In this article, we will learn about CSS flexbox and take a look at its properties as it is one of the most important topics in CSS.

About CSS flexbox:-

CSS flexbox is a whole module, it is not a single property. It consists of whole sets of properties. some properties are applied to the container(which is a parent element) whereas others are applied to items(which are the children element) so the parent element is known as a "flex container" and the children element is known as a "flex item".

For understanding, you can apply the properties on the HTML code given below-

<div class="container">
        <div class="item">one</div>
        <div class="item" id="flex">two</div>
        <div class="item">three</div>
        <div class="item">four</div>
    </div>

Now we will see the following CSS flexbox properties-

Properties for parent(flex container):-

🔸Display:-

Display defines a flex container, inline or outline depending on the given value. It enables a flex context for all its direct children elements.

Syntax:-

.container{
display:flex;
}

🔸flex-direction:-

flex-box is a single direction layout concept, flex-items are placed either horizontally or vertically. It establishes the main axis therefore it defines the direction of flex items inside the container.

Syntax:-

.container{
   flex-direction: row | row-reverse | column | column-reverse;
 }

• row => insert content from left to right.

• row-reverse => insert content from right to left.

• column => same as row but top to bottom.

• column-reverse => same as row-reverse but bottom to top.

🔸flex-wrap:-

by default, flex-items will try to fit in one-line but with the help of this property we can wrap them as needed.

Syntax:-

.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap => It is the default one and all the items are on one line.

• wrap => In this all the items will be on multiple lines from top to bottom.

• wrap-reverse => In this all the items will be on multiple lines from bottom to top.

🔸flex-flow:-

This property is the combination of flex-direction and flex-wrap, it is used with single space between them.

Syntax:-

.container{
 flex-flow: row wrap;
}

🔸Justify-content:-

This property is used to align the items on the main axis in the horizontal direction. It is also used to distribute some extra free space between the items which are inflexible or are flexible (but reached the maximum size). It also exerts some control over the items which are aligned but overflow the line.

Syntax:-

.container{
 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start => items are aligned from the start of the flex-direction.(default one)

• flex-end => items are aligned from the end of the flex-direction.

• center => items are centered along the line.

• space-between => items are equally distributed in the line, with the first item on the first line and the last on the end line.

• space-around => items are equally distributed with equal space around them(equal space on both sides of the item).

• space-evenly => items are equally distributed with equal space between the items.

🔸align-items:-

This property is used to align the items on the cross-axis. It is the same as the justify-content property but on the cross-axis (perpendicular to the main axis).

Syntax:-

.container{
 align-items: flex-start | start | self-start | end | self-end | flex-end | center | stretch | start | baseline ;
}

• stretch => It is used to fill the container( still within the min-width / max-width)

• flex-start | start | self-start => items are aligned from the start of the line. There is a subtle difference between them which is about respecting the flex-direction rule.

• flex-end | end | self-end => items are aligned from the end of the line. There is a subtle difference between them which is about respecting the flex-direction rule.

• center => It aligns the items at the center.

• baseline => items are aligned such as their baseline align.

🔸align-content:-

This property aligns the flex containers within the container when there is some extra space in the vertical line(cross-axis). It is quite similar to the justify-content as it works on the flex-items similarly this property works with containers . Therefore it works only when there are multi-line flexible containers where flex-wrap is set to be either wrap or wrap-reverse.

Syntax:-

.container{
 flex-content: flex-start | flex-end | center | stretch | space-around | space-between;
}

• flex-start => items packed to the start of the container.

• flex- end => items packed towards the end of the container.

• center = > aligned center in the container.

• space-between => items evenly distributed; the first line is at the start of the container while the last one is at the end.

• space-around => items evenly distributed with equal space around each line.

• space-evenly =>items are evenly distributed with equal space around them.

• stretch => lines stretch to take up the remaining space.

  🔸gap, row-gap, column-gap:-

  gap property controls the gap between the flex items. It applies the gap only between the flex items not on the outer side. This property also works on the grid, and multi-column layout.

  Syntax:-

    .container{
     gap: 20px;
    }
  

  properties on flex-items(children):-

  🔸order:-

  The order property can control the order of the flex-items which appear inside the container. by default they appear in the source order. Items that have the same order are reversed to the source order.

  Syntax:-

    .container{
     order: 2;
    }
  

  🔸flex-grow:-

  This property helps flex-items to grow. for example, if one of the items is set to flexgrow:2 then it will take the space of two items. Therefore the number dicides the amount of space item will take inside the container.

  Syntax:-

.container{
 flex-grow : 2;
}

🔸flex-shrink:-

This property helps the flex items to shrink if required.

Syntax:-

.container{
 flex-shrink: 2;
}

🔸flex:-

This is the shortcut property for flex-grow, flex-shrink and flex-basis combined. The second and third are optional( shrink and basis). However, the default is 0 1 auto, but for example, you have set the single number value like flex:5; then the flex-grow=5, flex-shrink= 1 ; flex-basis=0%.

Syntax:-

.container{
 flex:5; /* flex-grow:5 , flex-shrink:1 , flex-basis:0% */
}

It is recommended to use this shortcut property instead of using the properties individually.

Thank you for reading this article 🙂.