Learn & Understand CSS Flexbox: A Step-By-Step Guide

CSS Flexbox

CSS flexbox(flexbox layout or flex layout) is a one-dimensional layout method that uses rows & columns to place the flexbox items.The flex items expand or shrink to fit the smaller spaces.Although, CSS grid is two dimension grid layout.

Flex container: The flex-container refers to the properties of the parent. It is declared by assigning the display property of an element to either flex or inline-flex.

Flex items: Flex item is basically the children of the flexbox container element. A flex container contains more than one flex item.

Followings are the flex properties: flex-direction,flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content

The flex-direction Property

The flex-direction property is used to show the flex item alignment direction. By default flex-direction is row.

Followings are the flex direction properties: flex-direction: row;,flex-direction: row-reverse;,flex-direction: column;,flex-direction: column-reverse;

The flex-direction: row value displays the flex items horizontally(from left to right).

General Syntax

display: flex;
flex-direction: row;

Source Code

.flex-container {
  display: flex;
  flex-direction: row;
}

flex-direction: row-reverse

The flex-direction: row-reverse value displays the flex items horizontally(from right to left).

General Syntax

display: flex;
flex-direction: row-reverse;

Source Code

.flex-container {
display: flex;
flex-direction: row-reverse;
}

flex-direction: column

The flex-direction: column value displays the flex items vertically (from top to bottom).

General Syntax

display: flex;
flex-direction: column;

Source Code

.flex-container {
  display: flex;
  flex-direction: column;
}

Flex Shrink Property

The flex-shrink property of the flex item specifies the ability to shrink the flex item relative to the rest of the flex items. The default value of flex-shrink is 1. The value can be any positive value.

General Syntax

flex-shrink:{0 to n};

Source Code

<div class="flex-container">
    <div  class="flex-item bg-info">1</div>
    <div class="flex-item bg-primary">2</div>
    <div class="flex-item bg-warning" style="flex-shrink: 0">3</div>
    <div class="flex-item bg-warning">4</div>
    <div class="flex-item bg-info">5</div>
</div>

flex-direction: column-reverse

The flex-direction: column-reverse value displays the flex items vertically (from bottom to top).

General Syntax

display: flex;
flex-direction: column-reverse;

Source Code

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Flex Wrap (multi-line flex container)

Flex wrap is used to display the flex item either in one row/multiple rows . It has the followings properties.

• nowrap(default)
• wrap(wrap in next line)
• wrap-reverse(multiple line but in reverse from bottom to top).General Syntaxdisplay: flex; flex-wrap: nowrap;Source Code.flex-container { display: flex; flex-wrap: nowrap; }

flex-wrap: nowrap

nowrap — It is used to display flex items in one row. Please keep in mind that ,this is the by default behaviour.

General Syntax

display: flex;
flex-wrap: nowrap;

Source Code

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

flex-wrap: wrap

wrap–This property is used to display flex items into multiple lines and items will wrap from top to bottom.

General Syntax

display: flex;
flex-wrap: wrap;

Source Code

<style type="text/css">
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
</style>

flex-wrap: wrap-reverse

wrap-reverse-Flex items will try to wrap in reverse direction means bottom to top.

General Syntax

display: flex;
flex-wrap: wrap-reverse;

Source Code

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

The Flex Flow Property

It is a flex shorthand property of flex-direction and flex-wrap properties.

General Syntax

display: flex;
flex-flow: row wrap;

Source Code

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Horizontal Alignment Of Flex Item

Please keep in mind that by default flex-direction is row.

The justify-content Property

The justify-content property is used to align the flex items along the horizontal direction or on the main dimension/main axis/primary axis or on the x-axis.

Followings are the value of justify-content property: justify-content: center,justify-content: flex-start,justify-content: flex-end,justify-content: space-around,justify-content: space-between

justify-content: center

The justify-content: center value is used to align the flex item to the center of the main-axis or x-axis or horizontal direction.

General Syntax

display: flex;
justify-content: center;

Source Code

.flex-container {
  display: flex;
  justify-content: center;
}

justify-content: start

The justify-content: flex-start value is used to align the flex item to the beginning of the main-axis or x-axis or horizontal direction. Please keep in mind that this is the default value of justify-content.

General Syntax

display: flex;
justify-content: flex-start;

Source Code

.flex-container {
  display: flex;
  justify-content: flex-start;
}

justify-content: flex-end

The justify-content: flex-end value is used to align the flex item to the end of the main-axis or x-axis or horizontal direction.

General Syntax

display: flex;
justify-content: flex-end;

Source Code

.flex-container {
  display: flex;
  justify-content: flex-end;
}

justify-content: space-around

The justify-content: space-around value is used to align flex item with space before, between, and after the lines along the main-axis or x-axis or horizontal direction.

General Syntax

display: flex;
justify-content: space-around;

Source Code

.flex-container {
  display: flex;
  justify-content: space-around;
}

justify-content: space-between

The justify-content: space-between value is used to align flex item space between the lines along the main-axis or x-axis or horizontal direction.

General Syntax

display: flex;
justify-content: space-between;

Source Code

.flex-container {
  display: flex;
  justify-content: space-between;
}

The align-items Property

The align-itemproperty is used to align the flex items along the cross axis(perpendicular to main axis) or y-axis or vertical to the main axis. Please keep in mind that align-items is the property of the flex container.

The align-self property is used to align the individual flex item along the cross axis or Y-axis. Please keep in mind that align-self is the property of the flex item.

Followings are the value of align-items:

• flex-start
• center
• flex-end
• stretch
• baseline

align-items:flex-start

The align-items:flex-start value is used to place flex items at the start of the cross axis or Y-axis or vertical to main axis(x-axis).

General Syntax

display: flex;
align-items: flex-start;

Source Code

.flex-container {
  display: flex;
  align-items: flex-start;
}

align-items: center

The align-items: center value is used to place flex items at the center of the cross axis or Y-axis or vertical to the main axis(x-axis).

General Syntax

display: flex;
align-items: center;

Source Code

.flex-container {
  display: flex;
  align-items: center;
}

align-items: flex-end

The align-items: flex-end value is used to place flex items at the end of the cross-axis or Y-axis or vertical to the main axis(x-axis) with equal amounts of free space at both ends.

General Syntax

display: flex;
align-items: flex-end;

Source Code

<style type="text/css">
.flex-container {
  display: flex;
   align-items: flex-end;
}
</style>

align-items: stretch

The align-items: stretch value is used to fill the current row or column unless prevented by the minimum and maximum width or height. Please keep in mind that this is the default value of align-items.

General Syntax

display: flex;
align-items: stretch;

Source Code

.flex-container {
  display: flex;
  align-items: stretch;
}

align-items: baseline

The align-items: baseline value is used to align each flex item with the baseline of the flex item with the largest font size.

General Syntax

display: flex;
align-items: baseline;

Source Code

<style type="text/css">
.flex-container {
  display: flex;
  align-items: baseline;
}
</style>

The align-content Property

The align-content property is used to align the flex lines of the flex container along the main axis.

Followings are the value of align-content: stretch, center, space-around , space-between space-evenly , flex-start , flex-end.

align-content: stretch

The align-content: stretch value is used to stretch the flex lines to take up the remaining space. This is the default value of align-content.

General Syntax

align-content: stretch | center| space-around | space-between | space-evenly | flex-start | flex-end;

Source Code

<style type="text/css">
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}
</style>

align-content: flex-start

The align-content: flex-start value is used to display the flex lines at the start of the flex container.

General Syntax

align-content: flex-start;
flex-wrap: wrap;

Source Code

<style type="text/css">
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
</style>

align-content: center

The align-content: center value is used to display the flex lines at the center of the flex container.

General Syntax

align-content: center;

Source Code

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

align-content: flex-end

The align-content: flex-end value is used to display the flex lines at the end of the flex container.

General Syntax

align-content: flex-end;

Source Code

.flex-container{
  display: flex;
 flex-wrap: wrap;
  align-content: flex-end;
}

align-content:space-between

The align-content:space-between value is used to align the flex items along the main axis in such a way that every two successive items have equal spaces in between them. There will be no extra space before the first flex item and after the last flex item.

General Syntax

align-content: space-between;

Source Code

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

align-content:space-around

The align-content:space-around value is used to align the flex items along the main axis in such a way that each item has an equal amount of space around it.

General Syntax

align-content: space-around;

Source Code

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

align-content:space-evenly

The align-content:space-evenly value is used to align the flex items along the main axis in such a way that every two successive items have equal spaces in between them There will be no extra space before the first flex item and after the last flex item. So, the space on the left & right sides of each item should be equal to the width of the item.

General Syntax

align-content:space-evenly;

Source Code

.flexbox-container {
   display: flex;
   flex-wrap: wrap;
   align-content:space-evenly;
}

Flex Items

CSS flex items specify the child elements of a flex container.It has following properties: order, flex-grow, flex-shrink, flex-basis, flex, & align-self.

In other word, the child elements of a flex container are known as flex items. An individual flex item has the followings properties: order, flex-grow, flex-shrink, flex-basis, flex, align-self.

The Order Property

The order property of the flex items is used to set the order in which they appear in the parent container. The default order is 0.

Source Code

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

The flex-grow Property

The flex-grow value specifies how much a flex item will grow relative to the rest of the flex items.

Flex-grow 0 means width of flex item as per content only.

Flex-grow 1 means the width of the flex item will be distributed equally to all items.

General Syntax

flex-grow: {0 to n};

Source Code

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 2">2</div>
  <div style="flex-grow: 4">3</div>
</div>

Flex Basis Property

The flex-basis property specifies the width of the flex item. The default value of the flex-basis is auto. Flex item width can be specified in %age, px, em, or rem.

General Syntax

flex-basis: {0 to n }px/%/rem/em;

Source Code

<div class="flex-container">
    <div class="flex-item bg-info">1</div>
    <div class="flex-item bg-primary" >2</div>
    <div class="flex-item bg-warning" style="flex-basis: 250px">3</div>
</div>

The flex Property

It is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

General Syntax

flex: {flex-grow}  {flex-shrink}  {flex-basis};

Source Code

<div class="flex-container">
    <div class="flex-item" >1</div>
     <div class="flex-item" style="flex: 0 0 200px">2</div>
     <div class="flex-item">3</div>
     <div class="flex-item">4</div>
</div>

The align-self Property

The align-self property is used to align the selected flex item inside the flexible container.

General Syntax

align-self: center

Source Code

<div class="flex-container">
  <div class="flex-item bg-info" >1</div>
   <div class="flex-item bg-primary" style="align-self: center">2</div>
   <div class="flex-item bg-warning">3</div>
   <div class="flex-item bg-info">4</div>
</div>

align-self:center

The align-self:center property is used to align the flex item in the middle of the container.Please keep in mind that flex item alignment can be done with respect to the flex container.

General Syntax

align-self: center

Source Code

<div class="flex-container">
  <div class="flex-item bg-info" >1</div>
   <div class="flex-item bg-primary" style="align-self: center">2</div>
   <div class="flex-item bg-warning">3</div>
   <div class="flex-item bg-info">4</div>
</div>

align-self: flex-start

The align-self: flex-start property is used to align the flex item at the top of the container.

General Syntax

align-self: flex-start;

Source Code

<div class="flex-container">
  <div class="flex-item bg-info" >1</div>
  <div class="flex-item bg-primary" style="align-self: flex-start">2</div>
  <div class="flex-item bg-warning">3</div>CSS
</div>

align-self: flex-end

The align-self: flex-end property is used to align the flex item at the end of the container.

General Syntax

align-self: flex-end;

Source Code

<div class="flex-container">
  <div class="flex-item bg-info" >1 </div>
  <div class="flex-item bg-primary" style="align-self: flex-end">2 </div>
  <div class="flex-item bg-warning">3</div>
</div>

To learn more about flexbox, click here.