What are Tailwind CSS Flexbox layout classes, and how to create common Flex layouts?

Tailwind CSS Flexbox layout is implemented through flex-related classes, allowing developers to easily create flexible layouts.

Basic Flexbox classes:

• flex: enable Flexbox layout
• inline-flex: enable inline Flexbox layout
• flex-row: main axis is horizontal direction (default)
• flex-row-reverse: main axis is horizontal reverse direction
• flex-col: main axis is vertical direction
• flex-col-reverse: main axis is vertical reverse direction

Main axis alignment (justify):

• justify-start: main axis start alignment
• justify-end: main axis end alignment
• justify-center: main axis center alignment
• justify-between: main axis ends alignment, equal spacing between items
• justify-around: main axis ends alignment, equal spacing around items
• justify-evenly: main axis even distribution, equal spacing between items

Cross axis alignment (items):

• items-start: cross axis start alignment
• items-end: cross axis end alignment
• items-center: cross axis center alignment
• items-baseline: baseline alignment
• items-stretch: stretch to fill container (default)

Multi-line alignment (content):

• content-start: multi-line start alignment
• content-end: multi-line end alignment
• content-center: multi-line center alignment
• content-between: multi-line ends alignment
• content-around: multi-line equal spacing around
• content-evenly: multi-line even distribution

Flex item properties:

• flex-1: flex: 1 1 0%
• flex-auto: flex: 1 1 auto
• flex-initial: flex: 0 1 auto
• flex-none: flex: none
• flex-grow-0: flex-grow: 0
• flex-grow: flex-grow: 1
• flex-shrink-0: flex-shrink: 0
• flex-shrink: flex-shrink: 1
• flex-wrap: allow wrapping
• flex-nowrap: disallow wrapping (default)
• flex-wrap-reverse: reverse wrapping

Common layout examples:

• Horizontal centering:

  html
  <div class="flex justify-center items-center h-screen">
    Centered content
  </div>

• Navigation bar:

  html
  <nav class="flex justify-between items-center p-4">
    <div class="font-bold">Logo</div>
    <ul class="flex space-x-4">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>

• Card grid:

  html
  <div class="flex flex-wrap gap-4">
    <div class="flex-1">Card 1</div>
    <div class="flex-1">Card 2</div>
    <div class="flex-1">Card 3</div>
  </div>

• Vertical layout:

  html
  <div class="flex flex-col space-y-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>

• Responsive layout:

  html
  <div class="flex flex-col md:flex-row">
    <div class="flex-1">Sidebar</div>
    <div class="flex-3">Content</div>
  </div>

Spacing control:

• space-x-*: horizontal spacing

  html
  <div class="flex space-x-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>

• space-y-*: vertical spacing

  html
  <div class="flex flex-col space-y-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>

Best practices:

• Use semantic HTML structure
• Reasonably use flex properties to control layout
• Combine with responsive prefixes to create adaptive layouts
• Use spacing classes to control item spacing
• Test display effects on different screen sizes