CSS Flexbox Tutorial – Unleash the Power of Flexibility

• from Flex Container
  • 1. Create a flexbox container, display: flex;
  • 2. flex-direction
  • 3. justify-content
  • 4. align-items
  • 5. flex-wrap
  • 6. flex-flow _^(shorthand)
  • 7. align-content
  • 8. gap
• from Flex items
  • 9. flex-basis
  • 10. flex-grow & flex-shrink
    • 10.1 flex-grow
    • 10.2 flex-shrink
  • 11. flex _^(shorthand)
  • 12. align-self
• Summary for alignments

The CSS Flexible Box Layout (Flexbox) is a one-dimensional layout that can work on either rows or columns at a time. The flexibility of the layout width and height plays an important role in creating a responsive website. This article is a comprehensive tutorial to understand everything about display:flex;.

1: Create a flexbox container, display: flex;

First of all, let’s start with create a flex container (parent) with multiple flex items (children), then set the display property of the flex container to display: flex; display: flex;

<div class="main_container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.main_container{
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex;/* NEW - Chrome */
  display: flex; 
}

.item{
  width: 30px;
  min-height: 30px;
  background: #1fb4ab;
  border:1px solid black;
  text-align: center;
}

2: flex-direction

Define main-axis & direction

The flex-direction property is to define the main axis and direction of the display. The key point to understanding flexbox alignment is to understand the concept of the main axis and cross axis. 

• If the flex-direction define as row or row-reverse, the main axis will be along the row and the side axis will be along the column
• If the flex-direction define as column or column-reverse, the main axis will be along the column and the side axis will be along the row

.main_container{
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex;/* NEW - Chrome */
  display: flex; 
  flex-direction: row;
}

3: justify-content

Define the alignment on flex items towards main axis:

The justify-content property is used to define the alignment along the main axis (based on flex direction)

.main_container{
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex;/* NEW - Chrome */
  display: flex; 
  justify-content: flex-start;
}

4: align-items

Define the alignment on flex items towards cross axis:

The align-items property is used to define the alignment along cross axis(which perpendicular to the main axis).

.main_container{
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex;/* NEW - Chrome */
  display: flex;
  align-items: flex-start;
  height: 100px; 
}

5: flex-wrap

The flex-wrap property specifies whether the flex items should be forced to display in a single line or wrap onto multiple lines.

.main_container{
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex;/* NEW - Chrome */
  display: flex;
  flex-wrap: nowrap;
  height: 100px; 
}

6: flex-flow

You can combine the declaration for flex-direction and flex-wrap with flex-flow shorthand. For example:

flex-direction: column;
flex-wrap: wrap;

/*first value from: flex-direction, 2nd value from: flex-wrap*/
flex-flow: column wrap;

7: align-content

Align the wrapped lines along the cross axis:

The align-content property will only take effect on a multi-line flex container, where flex-wrap must be set to either wrap or wrap-reverse

.main_container{
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex;/* NEW - Chrome */
  display: flex;
  height: 100px; 
  flex-wrap: wrap
  align-content: stretch;
}

8: gap

Define the space between flex item along the main axis

.main_container{
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex;/* NEW - Chrome */
  display: flex;
  height: 100px; 
  gap: 10px;
}

9: flex-basis

Define the initial base size of the flex item along the main axis.

This is similar as declare a flexible width** on the flex item. The flex item then will be grow and shrink based on the flex-basis size, then fit in the available space with the other items.

** width for "flex-direction: row;" height for "flex-direction: column;“

<style>
 .main_container{
   display: -webkit-box;  /* OLD-iOS 6-, Safari 3.1-6 */ 
   display: -ms-flexbox;  /* TWEENER-IE 10 */
   display: -webkit-flex; /* NEW-Chrome */
   display: flex;
   height: 100px; 
 }
 .item{
   min-height: 30px;
   border:1px solid black;
   text-align: center;
   flex-grow: 1;
 }
 .item_target{
   background: cornflowerblue;
   flex-basis: 300px;
 }
</style>

<div class="main_container">
  <div class="item item_target">this is a sample - flex-basis: 300px;</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Example when flex-grow: 1;

flex-basis: 300px;

this is a sample – flex-basis: 300px;

2

3

flex-basis: auto; ^default

this is a sample – flex-basis: auto;

2

3

Example when flex-grow: 0;

flex-basis: min-content;

flex-basis: min-content;

2

3

flex-basis: max-content;

flex-basis: max-content;

2

3

10: flex-grow & flex-shrink

The flex-grow and flex-shrink properties are use to manage the ratios of individual flex items based on the width of the flex-container.

10.1 flex-grow

The flex-grow property specifies how much ratio the targeted item will expand relative to the rest of the items within a flex container

<style>
 .main_container{
   display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
   display: -ms-flexbox; /* TWEENER - IE 10 */
   display: -webkit-flex;/* NEW - Chrome */
   display: flex;
   width: 600px; 
 }
 .item{
   min-width: 30px;
   min-height: 30px;
   border:1px solid black;
   text-align: center;
 }
 .flex_grow3{
   flex-grow: 3;
 }
.flex_grow1{
   flex-grow: 1;
 }
</style>

<div class="main_container">
  <div class="item flex_grow3">3</div>
  <div class="item flex_grow1">1</div>
  <div class="item flex_grow1">1</div>
</div>

3

1

1

In this example:

By declaring flex-grow: 3; to the first item, the first item has expanded 3 times bigger relativity to the rest of the flex items. 

The default value for flex-grow is 0

10.2 flex-shrink

The flex-shrink property specifies how the targeted item will shrink relatively to the rest of the items within a flex container when necessary (when there is not enough space on the row)

<style>
 .main_container{
   display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
   display: -ms-flexbox; /* TWEENER - IE 10 */
   display: -webkit-flex;/* NEW - Chrome */
   display: flex;
   width: 600px; 
 }
 .item{
   min-width: 30px;
   min-height: 30px;
   border:1px solid black;
   text-align: center;
   flex-grow: 1;
   flex-basis: 300px;
 }
 .flex_shrink3{
   flex-shrink: 3;
 }
</style>

<div class="main_container">
  <div class="item flex_shrink3">3</div>
  <div class="item">1</div>
  <div class="item">1</div>
</div>

3

1

1

In this example:

1. All 3 flex items want to take 300px width while the flex container has only 600px width available.
2. By declaring flex-shrink: 3; to the first item, the first item has shrunk 3 times smaller relativity to the rest of the flex items. 

Note: flex-shrink is used alongside with flex-grow and flex-basis. The default value for flex-shrink is 1

11: flex

You can combine the declaration for flex-grow and flex-shrink and flex-basis with flex shorthand. For example:

.item{
    flex-grow: 1;
    flex-shrink: 3;
    flex-basis: 300px;
 }

.item{
    flex: 1 3 300px;
 }

12: align-self

Define the alignment on the individual flex item along the cross axis:

<style>
 .main_container{
   display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
   display: -ms-flexbox; /* TWEENER - IE 10 */
   display: -webkit-flex;/* NEW - Chrome */
   display: flex;
   height: 100px; 
 }
 .item{
   min-width: 30px;
   min-height: 30px;
   border:1px solid black;
   text-align: center;
 }
 .item1{
   align-self: flex-start;
   background: cornflowerblue;
 }
 .item2{
   align-self: flex-end;
   background: aquamarine;
 }
 .item3{
   align-self: center;
   background: orange;
 }
 .item4{
   align-self: baseline;
   background: yellow;
 }
 .item5{
   align-self: stretch;
   background: pink;
 }
</style>

<div class="main_container">
  <div class="item item1">flex-start</div>
  <div class="item item2">flex-end</div>
  <div class="item item3">center</div>
  <div class="item item4">baseline</div>
  <div class="item item5">stretch</div>
</div>

Summary for alignments

• justify-content is to specify alignment on flex items towards main axis
• align-items is to specify alignment on flex items towards cross axis
• align-content is to specify alignment on the wrapped lines towards cross axis
• align-self is to specify alignment on individual targeted flex item towards cross axis