When you add multiple elements on your webpage, and they automatically get aligned in a column, but what if you want to align them in a row instead?
By default, these elements start from top, but what if you want to place them starting from bottom?
What if we want to change the default spacing between those elements?
What if you want to put them in the center or from the right side of a row?
Your webpage looks fine in your browser window, but elements overlap in smaller screen sizes and looks weird.

Have you faced these situations and were not able to figure out a solution? Don’t worry, CSS Flexbox is here to solve all such problems. In this blog, I will tell everything you need to know about Flexbox, so that you can arrange elements on your webpage in exactly the way you want.

What is a Flexbox?

Flexbox, short for flexible box layout, is a CSS layout model, which helps you in controlling and customizing the alignment, spacing, and order of the elements. Think of it as a way to organize items in a container, like arranging books on a shelf.

Components of a Flexbox

Flex Container: It is the container inside which you will place the elements which you want to arrange.
Flex Items: These are the items or elements which you want to arrange inside a container.

A graphical representation of a flex container and flex items in a flex layout.

To create a flex container, you just need to set its display property as flex, and that’s it. It is a flex container, and all of its child tags will be flex-items.

.container {
    display: flex;
}

Before moving ahead let me also tell you some default properties of a flex container:

Alignment of items will be in a row i.e. horizontally.
Items will start from the left side.
Items will stretch vertically to fit the container.
Items won’t move to next row; they will shrink and fit in same row.

The Main and Cross Axis

Each flex container has 2 axes i.e. main axis and cross axis.

Alignment of items is along the main axis.
Cross axis is perpendicular to main axis and items stretch themselves along cross axis.
Default main axis is row i.e. horizontal, and default cross axis is column i.e. vertical.

Flexbox Properties for the Container

flex-direction: Sets the main axis of the container. It's like choosing which way your items will line up. Expects one of the following values:
- row: Items are placed horizontally, left to right.
- column: Items are placed vertically, top to bottom.
- row-reverse: Items are placed horizontally, but right to left.
- column-reverse: Items are placed vertically but bottom to top.
justify-content: It defines how flex items should be positioned along the main axis of the container. Expects one of the following values:
- flex-start: Items are aligned towards start of the main axis with no extra space between them.
- flex-end: Items are aligned towards end of the main axis with no extra space between them.
- center: Items are placed in the center of main axis, with no extra space between them.
- space-between: Items are evenly distributed with equal space between them, with no space before the first item and after the last item.
- space-around: Items are evenly distributed with equal space around them. Adds space before the first item and after the last item.
  
  💡
  
  Here “no extra space” means additional space will not be added. However, margin and padding of each item will not be affected.
align-items: positions the items along the cross axis. It's like adjusting how tall or short your items appear. Expects one of the following values:
- stretch: Items are stretched to fit the container.
- flex-start: Items are aligned to the start of cross axis.
- flex-end: Items are aligned to the end of cross axis.
- center: Items are centered on cross axis.
- baseline: Items are aligned based on their baselines.
flex-wrap: It controls whether items should wrap to a new line when they run out of space. Expects one of the following values:
- nowrap: All items will be in single line.
- wrap: Items will wrap to additional lines if needed.
- wrap-reverse: Items will wrap to additional lines in reverse order.
flex-flow: A shorthand property for setting both flex-container and flex-wrap properties.
- Expects a combination of flex-container and flex-wrap.
```
  .container {
      flex-flow: row wrap;
  }
```

Flexbox Properties for the Items

flex-grow: It defines the ability for a flex item to grow if necessary. It's like giving some items priority to take up more space.
- Expects an integer.
```
  #item1 {
      flex-grow: 2;
  }
```
- Default value of each item is 0.
- The items will grow in the direction of main axis.
- If all the items have same value, they will take same space.
flex-shrink: It defines the ability for a flex item to shrink if necessary. It's the opposite of flex-grow.
- Expects an integer.
```
  #item1 {
      flex-shrink: 3;
  }
```
- Default value for each item is 1, means they will shrink in same proportion to fit in the screen.
- A value of 0 means the item will never shrink.
- It works only if total width of all the flex items is greater than the width of the flex container.
flex-basis: This property defines the default size of an element before the remaining space is distributed. It's like setting a starting size for your items.
- Expects max-content, min-content, fit-content, or other width units including px and %.
order: It specifies the order of the flex items.
- Expects a number.
- Default value is 0.
- All items will be aligned according to increasing order of their order value.
```
  #item1 {
      order: 1;
  }
  #item2 {
      order: 2;
  }
```
flex: This is a shorthand for flex-grow, flex-shrink and flex-basis properties.
- Expects a combination of flex-grow, flex-shrink and flex-basis
```
  #item1 {
      flex: 0 1 200px;
  }
```

CSS Flexbox: Everything you need to know

Table of contents