FlexBox

Flexbox, formally known as "Flexible Box Layout," is a layout model designed for creating more efficient and predictable layouts in web design. It provides a straightforward way to align and distribute space among items in a container, even when their sizes are unknown or dynamic. 

Flexbox introduces a new way to layout, align, and distribute space among items within a container, offering more control over their arrangement compared to traditional block or inline layout techniques.

Note: It allows you to arrange elements in a container along a single axis (either a row or a column).

Important Concept:

Flex Direction

This property determines the main axis along which the flex items are laid out. It can be set to row (default), column, row-reverse, or column-reverse.

I. Justify Content

This property controls how the flex items are distributed along the main axis of the flex container.

1. flex-start: Items align at the beginning of the container.
2. flex-end: Items align at the end of the container.
3. center: Items are centered along the main axis.
4. space-between: Items are evenly distributed with space between them.
5. space-around: Similar to space-between but with additional space at the beginning and end of the container.
 

III. Align Items:

This property controls how the flex items are vertically aligned within the flex container. Common values:

1. flex-start: Items align at the top of the container .
2. flex-end: Items align at the bottom of the container.
3. center: Items are centered along the cross-axis .
4. baseline: Items are aligned based on their baselines.
5. stretch (default): Items stretch to fill the available space in the cross-axis.

III. Flex Wrap: 

This property controls whether flex items can wrap onto multiple lines if they don't fit within the container on a single line. It can be set to nowrap (default - items don't wrap), wrap (items can wrap), or wrap-reverse (items wrap in reverse order).

1. Flex Order: This property allows you to specify the order in which flex items appear, overriding their source code order.

2. Flex Grow: This property controls how any remaining space in the flex container after aligning items is distributed among the flex items that have a positive flex-grow value. A value of 1 indicates the item will grow to fill the space, while higher values prioritize that item for filling space.

3. Flex Shrink: This property controls how much a flex item can shrink if there's not enough space in the flex container to accommodate all items at their preferred sizes. A value of 1 indicates the item will shrink proportionally with other items, while higher values prioritize shrinking that item.

Example(navbar layout):

<nav class="flex justify-between items-center bg-gray-800 text-white p-4">
 <div class="flex-shrink-0">
   <a href="#" class="font-bold">Logo</a>
 </div>
 <div class="flex">
   <a href="#" class="px-4">Home</a>
   <a href="#" class="px-4">About</a>
   <a href="#" class="px-4">Services</a>
   <a href="#" class="px-4">Contact</a>
 </div>
 <div class="flex-shrink-0">
   <a href="#" class="px-4">Login</a>
   <a href="#" class="px-4">Sign up</a>
 </div>
</nav>

Example(another layout):

<div class="flex justify-center">
 <div class="flex flex-wrap max-w-3xl">
   <div class="flex-auto bg-gray-200 m-4 p-6 rounded-lg shadow-md">
     <h2 class="text-xl font-semibold">Card 1</h2>
     <p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
   </div>
   <div class="flex-auto bg-gray-200 m-4 p-6 rounded-lg shadow-md">
     <h2 class="text-xl font-semibold">Card 2</h2>
     <p class="mt-4">Suspendisse cursus fermentum risus at accumsan.</p>
   </div>
   <div class="flex-auto bg-gray-200 m-4 p-6 rounded-lg shadow-md">
     <h2 class="text-xl font-semibold">Card 3</h2>
     <p class="mt-4">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
   </div>
 </div>
</div>