Properties of Flex Items | Web Technologies

In this section, we will know the properties of flex item elements of the flex box. We will apply these properties to align the divs in an example.

Properties of flex item

order
flex-grow
flex-shrink
flex-basis
flex
align-self

Our basic HTML and CSS file will look like as

HTML File

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8" />
    <meta name = "viewport" 
     content = "width = device-width,initial-scale=1.0"/>
    <meta http-equiv = "X-UA-Compatible" content ="ie=edge" />
    <title>Flex Box</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
   <div class="container">
    <div class="flex-item item1">Item1</div>
    <div class="flex-item item2">Item2</div>
    <div class="flex-item item3">Item3</div>
     div class="flex-item item4">Item4</div>
   </div>
  </body>
</html>

CSS File

.container{
  border:10px solid black;
  display:flex;
  height:300px;
  flex-wrap:wrap;
  align-content:flex-start;
}
.flex-item{
  padding:1em;
  font-size:1.5em;
}
.item1{
  background-color: #006699;
}
.item2{
  background-color: #997d11;
}
.item3{
  background-color: #3c9922;
}
.item4{
  background-color: #993d33;
}

Order

Flex items are layed out in the order in which they appear in the code. This order can be changed using order property.

For, the above html and css files, the output are

By default, the value of the order for all the elements is 0. So, if you change the value for order, the items will be aligned according to the same.

.item1{
  background-color: #006699;
  order:2;
}
.item2{
  background-color: #997d11;
  order:3;
}

as you increase order, the items are pushed to the end. Order 0 appear first, then order 1 and so on.

Flex-Grow

Flex-grow specifies what amount of space the item should take in the flex container.

It is relative to size of other items.

Default value for flex-grow is 0, that’s why they do not take extra space.

.item1{
  background-color: #006699;
  order:2;
  flex-grow:1;
}
.item2{
  background-color: #997d11;
  order:3;
}

If you change this for item2 as well, you will get

So, equal space is taken by item 1 and item 2.

If you want all the elements to take the equal space, you can modify the flex-item class as

.flex-item{
  padding:1em;
  font-size:1.5em;
  flex-grow:1;
}
.item1{
  background-color: #006699;
  order:2;
}
.item2{
  background-color: #997d11;
  order:3;
}

So, all items grow equally and occupies all space,

Flex-Shrink

Flex shrink is opposite to flex-grow. The default value is 1. It dictates the shrink factor of the items when default size of flex items is larger than flex container.

Flex-Basis

Flex basis is used to set the initial width/size of the flex item. Default value of flex-basis is auto. It can take values in rem, em, px or percentage.

Flex grow and flex shrinks applies on top of flex-basis.

Flex

Flex is a shorthand for flex-grow, flex-shrink and flex-basis

flex: <flex-grow> <flex-shrink> <flex-basis>

For any item you can write

.item1{
  flex-grow:1;
  flex-shrink:2;
  flex-basis:200px;
}

We can write it as

.item1{
  flex: 1 2 200px;
}

Default for flex is 0 1 auto.

Align-self

It is used to control the alignment of the individual items. It has the same properties as that of align-items property. The default property for align-self is the value of the align-items property of the parent.

Let us align the all the items at the start using align-item:flex-start. Now for item1 we can align it to the end using align-self:flex-end as shown below

.container{
  border:10px solid black;
  display:flex;
  height:200px;
  align-items:flex-start;
}
.flex-item{
  padding:1em;
  font-size:1.5em;
  text-align:center;
}
.item1{
  background-color: #006699;
  align-self:flex-end;
}
.item2{
  background-color: #997d11;
  flex-shrink:4;
}
.item3{
  background-color: #3c9922;
}
.item4{
  background-color: #993d33;
}

Other values for align-self are

flex-start
flex-end
center
baseline
stretch