html

Flexbox Items Properties in CSS | Explained

While working with the flexbox model, we use flex container and flex items; the flex container or the parent element is a box/container that contains multiple flex items. While everything inside a flexbox container is called a flexbox item or child element. The flexbox module provides some robust alignment capabilities, which can be achieved with the help of either flex container properties or flex item properties.

This write-up will assist you in understanding the below-listed aspects of the CSS flexbox items:

So, let’s begin!

Flexbox Items in CSS

While creating the flex container in the flexbox, we utilize the display property and assign some value to it, such as flex, inline. At that time, the direct child of that flex container becomes the flex item. The figure given below will provide a better understanding:

Flexbox Items Properties in CSS

The below table will provide you with a brief overview of flexbox properties:

Properties Description
order It controls the order of child elements within the flex container.
flex-grow It determines the growth factor for a flex item.
flex-shrink It determines the shrink factor for a child element/flex item.
flex-basis It determines the initial size of a child element/flex item.
flex It is a shorthand property for three properties flex-grow, flex-shrink, and flex-basis.
align-self It enables default alignment(along cross-axis) to be overridden for individual child element/flex items.

How to implement Flexbox Items Properties in CSS

In this section, we will discuss each flexbox property mentioned above and implement them practically for a profound understanding:

Example 1: CSS order Property
It takes a numeric value to sort the elements in a specific order. The below code snippet will let you understand how the order property works in a Flexbox:

<body>
<h3>Order Property</h3>
<div class="container-class">
    <div style="order: 2">First Item</div>
    <div style="order: 5">Second Item</div>
    <div style="order: 1">Third Item</div>
    <div style="order: 3">Fourth Item</div>
    <div style="order: 4">Fifth Item</div>
  </div>
</body>

In the above code snippet, we utilized the order property to arrange the flexbox items according to our choice:

The output shows that the order property arranged the flex items according to the user-specified order.

Example 2: CSS flex-grow Property

It takes a numeric value that represents how fast a flex item will grow compared to the other flex items. For the clarity of concepts, let’s consider the below piece of code:

<html>
<head>
    <style>
    .container-class {
      display:flex;
      background-color: gray;
      align-items: stretch;
    }
   
    .container-class > div {
      background-color: lightgreen;
      margin: 8px;
      padding: 10px;
      font-size: 15px;
    }
    </style>
</head>
<body>

<h3>flex-grow Property</h3>

<div class="container-class">
    <div>First Item</div>
    <div style="flex-grow: 12">Second Item</div>
    <div>Third Item</div>
    <div style="flex-grow: 12">Fourth Item</div>
    <div>Fifth Item</div>
  </div>
</body>
</html>

In this example, the default value for the flex-grow property is 0, so every container item will grow accordingly. However, the second and fourth items of the container will grow twelve-time faster than other items because these two items specified the value of the flex-grow property as 12:

The above snippet verified the working of flex-grow property.

Example 3: CSS flex-basis Property

In the below code snippet, we will implement the flex-basis property to set the size of second and fourth items of the container:

<body>
<h3>flex-basis Property</h3>
<div class="container-class">
    <div>First Item</div>
    <div style="flex-basis: 150px">Second Item</div>
    <div>Third Item</div>
    <div style="flex-basis: 150px">Fourth Item</div>
    <div>Fifth Item</div>
  </div>
</body>

We set the value of flex-basis property as 150px for the second and fourth items. The above code will generate the following output:

Similarly, we can utilize the other flexbox item properties to achieve different functionalities.

Conclusion

The flex container or the parent element is a box/container that contains multiple flex items, while everything inside a flexbox container is called a flexbox item or child element. To create the flex container in the flexbox, we utilize the display property and assign it either flex or inline value; as a result, the direct child of that flex container becomes the flex item. In CSS, several properties are available to work with flexbox items, such as order controls the order of flexbox items, flex-grow determines the growth factor for the flex items, etc. This article covered several flexbox item properties and explained how to use them to achieve their functionalities.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.