Flex Layout Design Essentials in CSS

Flexbox (Flexible Box Layout) is a powerful CSS layout module that enables you to create complex layouts with ease. It provides more control over the alignment, distribution, and sizing of items within a container, even when their sizes are unknown or dynamic.

Here are the Essentials of Flex Layout Design in CSS

1. Flex Container

To use Flexbox, you first need to define a container as a flex container by applying the display: flex; or display: inline-flex; property to it.

display: flex; – creates a block-level flex container.
display: inline-flex; – creates an inline flex container.

				
					.container {
  display: flex; /* Makes the container a flex container */
}

2. Flex Items

Any direct child of the flex container becomes a flex item. You can apply Flexbox properties to these flex items.

3. Flex Direction (flex-direction)

This property defines the direction in which the flex items are laid out within the container. The default value is row.

row: Items are arranged horizontally (left to right).
row-reverse: Items are arranged horizontally (right to left).
column: Items are arranged vertically (top to bottom).
column-reverse: Items are arranged vertically (bottom to top)

				
					.container {
  display: flex;
  flex-direction: row; /* default, items laid out horizontally */
}

4. Justify Content (justify-content)

This property defines how the flex items are distributed along the main axis (the direction defined by flex-direction).

flex-start: Aligns items to the start of the flex container.
flex-end: Aligns items to the end of the flex container.
center: Centers the items in the container.
space-between: Distributes items evenly, with the first item at the start and the last item at the end.
space-around: Distributes items evenly with equal space around them.
space-evenly: Distributes items with equal space between and around them.

				
					.container {
  display: flex;
  justify-content: center; /* Center the items horizontally */
}

5. Align Items (align-items)

This property defines how the flex items are aligned along the cross axis (perpendicular to the main axis, defined by flex-direction).

flex-start: Aligns items at the start of the cross axis.
flex-end: Aligns items at the end of the cross axis.
center: Centers items on the cross axis.
baseline: Aligns items along their baseline (useful for text-heavy layouts).
stretch: Stretches items to fill the container (default value).

				
					.container {
  display: flex;
  align-items: center; /* Align items vertically in the center */
}

6. Align Self (align-self)

This property allows you to override the align-items value for individual flex items, giving them a different alignment along the cross axis.

auto: Follows the align-items value.
flex-start, flex-end, center, baseline, stretch: Same values as align-items.

				
					.item {
  align-self: flex-end; /* Align this item to the end of the cross axis */
}

7. Flex Wrap (flex-wrap)

By default, flex items will try to fit in one row or column. The flex-wrap property controls whether the items should wrap to the next line when there is not enough space.

nowrap: Default behavior, items will not wrap.
wrap: Items will wrap to the next line if necessary.
wrap-reverse: Items will wrap to the next line in the reverse direction.

				
					.container {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap when necessary */
}

8. Align Content (align-content)

This property controls the alignment of the entire flex container when there is extra space on the cross axis (applies when there are multiple rows or columns).

flex-start: Aligns rows/columns at the start of the cross axis.
flex-end: Aligns rows/columns at the end of the cross axis.
center: Aligns rows/columns at the center of the cross axis.
space-between: Distributes rows/columns evenly with space between them.
space-around: Distributes rows/columns with space around them.
stretch: Stretches rows/columns to fill the available space.

				
					.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center; /* Align rows/columns in the center */
}

9. Flex Grow (flex-grow)

This property controls how much a flex item should grow relative to the other items inside the same container when there is extra space. By default, it is set to 0 (no growth).

				
					.item {
  flex-grow: 1; /* The item will grow to fill the available space */
}

10. Flex Shrink (flex-shrink)

This property defines how a flex item will shrink relative to the other items in the container if there is not enough space. The default value is 1.

				
					.item {
  flex-shrink: 1; /* The item will shrink if necessary */
}

11. Flex Basis (flex-basis)

This property defines the initial size of a flex item before any growing or shrinking occurs. You can set a specific value (like px, %, em, etc.).

				
					.item {
  flex-basis: 200px; /* The item will start with a width of 200px */
}

12. Flex Property (flex)

This is a shorthand for flex-grow, flex-shrink, and flex-basis. The default is 0 1 auto.

				
					.item {
  flex: 1 0 200px; /* Grow: 1, Shrink: 0, Basis: 200px */
}

13. Order (order)

This property controls the order of the flex items within the container. The default value is 0. You can set negative or positive values to reorder the items.

				
					.item {
  order: 2; /* Change the order of this item */
}

Practical Example

				
					


  
  
  <title>Flexbox Layout</title>
  
    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px; /* New space between items */
    }
    .item {
      flex: 1 1 200px; /* Grow, Shrink, and initial size */
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }
  



  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>

In the example above, the .container has a flex layout with items that will wrap, align, and distribute based on the properties applied. You can adjust and tweak the properties to achieve the desired layout.

Flexbox is a highly flexible and intuitive way to handle modern layouts, so it’s useful to experiment with different combinations to get the hang of it!