html

Flex Items in CSS | Explained

Flexbox is a layout model that aligns elements inside a container dynamically by assigning them equally distributed space. This layout proves helpful in making elements responsive which means that the elements will alter their behavior according to the kind of device displaying them. This model consists of two components which are, flex container and flex items. However, our focus in this write-up will be on flex containers. Subjects discussed in this write up are as follows.

  1. What is a Flex Item
  2. Flex Item Properties

What is a Flex Item

A flex item describes the properties of the successor elements, moreover, there can be numerous flex items present inside a flex container.

These items render some properties that are explained in detail below.

Flex Item Properties

The following properties are associated with a flex item.

order property

For the purpose of defining the order of a flex element relative to other elements present in a flexbox, the order property is used.

Syntax

order: num | initial | inherit;

Parameters explained
num: This value defines the order of a flex item. By default, the value is 0.

Example
Here is an example of the order property.

HTML

<div class="flexbox items">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
  <div id="item3">Item 3</div>
  <div id="item4">Item 4</div>
</div>

In the above code, a div container was created and four more divs were nested inside it. Each of the nested div has been assigned some id.

CSS

.flexbox {
  display: flex;
  background-color: aquamarine;
    }

Here, the larger div has been displayed as a flex container and has been provided some background color.

CSS

.items div  {
  background-color: lightgrey;
  margin: 15px;
  padding: 20px;
  font-size: 35px;
    }

We are now styling our items present inside the flex container with some basic CSS properties.

CSS

#item1{
 order: 4;
    }
#item2{
 order: 1;
    }
#item3{
 order: 2;
    }
#item4{
 order: 3;
    }

In the above code, we are using the id of each item to provide it some order.

Output

Each item has been placed according to its order.

flex-grow property

This property describes the extent to which an element will grow relative to the other elements present inside the container.

Syntax

flex-grow: number | initial | inherit;

Parameters explained
number: This value states the extent of growth of an element. By default the value is 0.

Example
Suppose we just want to grow one item with respect to others. Here is how you do it.

CSS

 .flexbox {
  display: flex;
  background-color: aquamarine;
  }
.items div {
  background-color: lightgrey;
  margin: 15px;
  padding: 20px;
  font-size: 35px;
  }
#item1 {
  flex-grow: 15;
  }

We set the value of the flex-grow property to 15. Item 1 will be 15 times larger as compared to other items.

Output

The property is working properly.

flex-shrink property

This property defines the extent to which an element will shrink relative to the other elements present inside the container.

Syntax

flex-shrink: number | initial | inherit;

Parameters explained
number: It states the extent to which an element will shrink. By default, the value is 0.

Example
Here is an example of this property.

HTML

<div class="container">
  <div style="background-color: bisque">1</div>
  <div style="background-color: rosybrown">2</div>
  <div style="background-color: palevioletred">3</div>
  <div class="item" style="background-color: sandybrown">4</div>
  <div class="item" style="background-color: plum">5</div>
</div>

To understand the working of this property, we have created a larger div container and nested five more div containers inside the larger one. Moreover, each div has been assigned a different background color so that the concept of this property can be demonstrated properly.

CSS

.container {
    display: flex;
    width: 400px;
    height: 200px;
  }
 
.container div {
    flex-basis: 100px;
  }

Here we are displaying the larger div as a flexbox, moreover, we are also giving it some width and height. Lastly, we are setting its flex-basis to 100px which defines the starting length of a flex item.

CSS

 .item {
    flex-shrink: 4;
  }

Using the class assigned to the last two div containers we are setting their flex-shrink to 4 which means that these items will be 4 times smaller than other items in the grid.

Output

Items 4 and 5 are smaller than the rest of the items.

flex-basis property

For the purpose of setting the starting length of a flex item, the flex-basis property is used.

Syntax

flex-basis: auto | num | initial | inherit;

Parameters explained
auto: It is a default value that provides an item with the length equal to that of the flex item.

num: It states the original length of an item.

Example
Suppose you want to give a flex item some initial length. We have shown how it is done.

CSS

.flexbox {
  display: flex;
  background-color: aquamarine;
    }
.items div  {
  background-color: lightgrey;
  margin: 15px;
  padding: 20px;
  font-size: 35px;
    }
#item3 {
  flex-basis: 300px;
}

We set the flex-basis of item 3 to 300px, which means that the original length of the third item will be 300px.

Output

The initial length of the third item was set successfully.

flex property

This property sets the growth, shrinkage, and length of an item all at once. It is a shorthand property for flex-growth, flex-shrink, and flex-basis.

Syntax

flex-property: flex-grow flex-shrink flex-basis | initial | inherit;

Parameters explained
flex-grow: It specifies the growth of flex item with respect to other items in the container.

flex-shrink: It states the shrinkage of an item relative to other items

flex-basis: It provides the starting length of an item.

Example
Consult the example below to understand the flex property.

CSS

.flexbox {
  display: flex;
  background-color: aquamarine;
    }
.items div  {
  background-color: lightgrey;
  margin: 15px;
  padding: 20px;
  font-size: 35px;
    }
#item2 {
    flex:0 0 300px;
}

Using the shorthand property, the growth and shrinkage of the second item has been set to 0, which means that this item will neither grow nor shrink, however, it will have a length of 300px.

Output

The property is working properly.

align-self property

For the purpose of describing the arrangement of items inside a flex container, the align-self property is used.

Syntax

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

Parameters explained
auto: This is a default value that either inherits characteristics from ancestor container or if there is no ancestor container then it stretches the item.

stretch: It stretches the items to fit in the container.

center: This positions the elements at the center of the container.

flex-start: It positions elements at the start of the container and is the default value.

flex-end: This places the elements at the end of the container.

baseline: This positions the elements at the baseline of the container.

Example
Consider the example below to understand the align-self property.

CSS

.flexbox {
  display: flex;
  background-color: aquamarine;
  height: 250px;
    }
.items div  {
  background-color: lightgrey;
  width: 150px;
  margin: 15px;
  padding: 20px;
  font-size: 35px;
    }

Here we have provided some height to the flex container to show the concept of this property in a clear manner, meanwhile, the rest of the code is same as above.

CSS

#item2 {
    align-self: flex-end;
}
#item3 {
    align-self: flex-start;
}

Using the ids assigned, item 2 has been positioned at the end of the container, however, the item 3 has been placed at the start of the container.

Output

Both the items were positioned differently using the align-self property.

Conclusion

A flex item is a component of a flexbox that defines the properties of the successor elements. You can place numerous flex items within a flex container. There are some CSS properties associated with these items such as order, align-self, flex-growth, flex, etc. Each of these renders multiple values and serves a different purpose which we have demonstrated with the help of relevant examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.