everything about web

A Comprehensive Guide to the World of Web Design & Development:

CSS, HTML, Performance, Web Design, and all Aspects of Front-End Development

Advertisements

CSS Flexbox Tutorial – Unleash the Power of Flexibility

||

6 minutes
The CSS Flexible Box Layout, also known as Flexbox, is a powerful tool for creating responsive and flexible web designs. It provides the ability to control the layout and alignment of elements in one dimension, either horizontally or vertically. Flexbox enables designers to easily adapt their designs to different screen sizes, ensuring a consistent user experience across all devices. This article serves as a comprehensive guide to understanding the key concepts of Flexbox and how it can help in creating a responsive and dynamic web page.

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;

HTML:

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

CSS:

.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;
}

Result:

1
2
3
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;
}

row default

1
2
3
cross axis
main axis

column

1
2
3
main axis
cross axis

row-reverse

1
2
3
cross axis
main axis

column-reverse

1
2
3
main axis
cross axis
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;
}

flex-start default

1
2
3

flex-end

1
2
3

center

1
2
3

space-around

1
2
3

space-between

1
2
3

space-evenly

1
2
3
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; 
}

stretch default

1
2
3

flex-start

1
2
3

flex-end

1
2
3

center

1
2
3

baseline

1
2
3
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; 
}

nowrap default

1
2
3
4
5
6
7
8
9
10

wrap

1
2
3
4
5
6
7
8
9
10

wrap-reverse

1
2
3
4
5
6
7
8
9
10
6: flex-flow

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

from:

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

to:

/*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;
}

stretch default

1
2
3
4
5
6
7
8
9
10

center

1
2
3
4
5
6
7
8
9
10

flex-start

1
2
3
4
5
6
7
8
9
10

flex-end

1
2
3
4
5
6
7
8
9
10

space-around

1
2
3
4
5
6
7
8
9
10

space-between

1
2
3
4
5
6
7
8
9
10

space-evenly

1
2
3
4
5
6
7
8
9
10
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;
}
1
2
3
10px
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
tutorial for CSS flexbox: flex-basis usage explanation

flex-basis: auto; default

this is a sample – flex-basis: auto;
2
3
tutorial for CSS flexbox: flex-basis usage explanation

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:

A Complete Tutorial and guide for CSS Flexbox and Alignments - flexbox cheatsheet: flex-grow usage explanation

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:

A Complete Tutorial and guide for CSS Flexbox and Alignments - flexbox cheatsheet: flex-shrink usage explanation
  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:

from:

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

to:

.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>

default value is align-self: stretch;

flex-start
flex-end
center
baseline
stretch
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
, ,

Leave a comment

If you found this article helpful and would like to show your support, you can buy me a coffee using the link below. Thanks a bunch!

Choose an amount

S$0.99
S$2.00
S$5.00

Or enter a custom amount

S$

Thank you for your contribution!

Donate

Topics:

Clean CSS (5) CSS (35) css pseudo (4) debug (2) design (7) fonts (2) html (8) image (9) JavaScript (1) layout (5) MiniGame (3) optimization (15) performance (10) responsive (9)

Advertisements

Recent Post:

Advertisements

Related Posts

Advertisements
Advertisements