CSS Flex Items and Properties

CSS Flexbox is a one-dimensional layout method used for arranging elements in rows or columns. The main aim of the flexbox is to layout, align and fill the available space among the container even if the size is unknown to make a layout responsive. A flex container expands or shrinks elements to fill the available space or to avoid overflow. To create the flex container, we set the value of the display property to flex or inline-flex. As soon as we set the display value to flex or inline-flex, the direct child element of that container becomes flex items. In this blog, we will discuss all the CSS flex items properties.

Prerequisite: To better understand CSS flex items, you can refer to our previous blog CSS Flexbox and Properties.

CSS Flex Items Properties

1. Order

Flex items, by default, are laid out in the source order, but we can specify the order of the flex items through the order property. Therefore the first flex item in the source does not need to appear as the first item in the layout.

The value for the order property must be a number, and the default value is 0.

.item {
  order: 3; /* default is 0 */
}

2. Flex-grow

Flex-grow property defines the ability for a flex item to grow relative to the rest of the flex items. It specifies the amount of leftover space inside the container the flex item should take up.

For example, if all flex items have flex-grow: 1, all the leftover space is equally distributed among all children. While if one of the flex items has a flex-grow value of 3, then the leftover space will take up thrice as much as the others.

The value for the flex-grow property must be a positive number, and the default value is 0.

.item {
  flex-grow: 3; /* default 0 */
}

3. Flex-shrink

The flex-shrink property defines the ability for a flex item to shrink relative to the rest of the flex items. It specifies the flex-shrink factor, determining how much the flex item will shrink when there isn’t enough space in the flex container.

The value for the flex-shrink property must be a positive number, and the default value is 1.

.item {
  flex-shrink: 3; /* default 1 */
}

4. Flex-basis

The flex-basis property defines the initial size of a flex item before the leftover space is distributed among flex items. We can set the flex-basis value in length (50%, 250px, 5rem) or keyword (auto, content). The auto keyword means to set the value as my width or height. The content means size is based on the item’s content.

By default, the value for flex-basis is set to auto.

.item {
  flex-basis:  | auto; /* default auto */
}

5. Flex

You will rarely see flex-grow, flex-shrink, and flex-basis properties individually as flex property combines three in one. The flex shorthand property aloows you to set the three values in order: flex-grow, flew-shrink, flex-basis. The second and third, i.e., flex-shrink and flex-basis parameters, are optional.

By default, the values for flex are 0 1 auto.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

6. Align-self

The align-self property inside the flex container specifies the alignment for the selected flex item. It overrides the default alignment or alignments specified y align-items for the individual flex items.  

.item {
  align-self: auto | flex-start | flex-end | center | baseline 
              | stretch;
}

• stretch:  Flex items are stretched to take up the leftover space.
• flex-start/start/self-start:  Places the flex items at the start of the vertical or cross axis.  
• flex-end/end/self-end:  Places the flex items at the end of the vertical or cross axis.  
• center:  Places the flex items in the center along with the cross or vertical axis.
• baselines:  Flex items are aligned such as their baselines align.

Conclusion

Hopefully, the above write-up was enough to clear all your doubts about CSS flex items and its properties. However, in our upcoming blog, we will cover more CSS-related topics. Also, if you have any questions or suggestions, you can write us in the comment section below.