CSS Flexbox

Written By: Avinash Malhotra

Updated on:

  1. Home
  2. Frontend
  3. CSS
  4. CSS Flexbox
  1. Flexbox
  2. Properties
  3. Display Flex
  4. Flex Direction
  5. Flex Flow
  6. Justify Content
  7. Align Items
  8. order
  9. flex-grow
  10. flex-shrink
  11. flex-basis
  12. flex

Flex based layouts

The flex box is CSS Layout Design build using display:flex property. Flexbox is used to build one-dimensional layout in css. One dimensional means flexbox can build layout in one dimension ( either row or column ) at one time. For two-dimensional layouts, use CSS Grids that can handle both row and column.

Display flex or inline-flex is used to build flexbox. Flex can build one dimension layout which is better than float based layout.

Flexbox advantages

  1. Better layout designs
  2. Advantage of flexible layouts.
  3. Supports IE 10 and above browsers.
  4. Auto height and width option available.
  5. Easy to change direction of flex columns.

For IE 9 and below, please use css float based layouts.

Flexbox properties

Flex is the value of css display . By using display flex in parent element, child elements automatically align like column or row with auto width and auto height.

Flex container and flex items
CSS Flexbox

Properties of flex container

  1. display flex / inline-flex
  2. flex-direction
  3. flex-wrap
  4. flex-flow
  5. justify-content
  6. align-items

Properties of flex items ( child of container)

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-content
  7. align-self

Properties of flex container

Display Flex

Display flex is the property of flex container to use flexbox. CSS Display property can have value flex or inline-flex. By using display flex or inline-flex to parent container, the children automatically enable flex content.

Change display flex

Block Flex
Item 1
Item 2
Item 3
Item 4

<style>
*{ margin:0; box-sizing:border-box}
    .flex-container{
        display: flex;
    }
    .flex-item{
        padding:10px;
        border: 1px solid #ccc; 
        margin: 5px
    }
</style>

<div class="flex-container">    
    <div class="flex-item">Item 1</div>    
    <div class="flex-item">Item 2</div>    
    <div class="flex-item">Item 3</div>    
    <div class="flex-item">Item 4</div>    
</div>

Flex Direction

Flex Direction property is given to flex container to change direction of flex items. By default, flex direction is row.

Flex Directions value

  1. row ( default)
  2. row-reverse
  3. column
  4. column-reverse

Change Flex directions

Item 1
Item 2
Item 3
Item 4

<style>
*{ margin:0; box-sizing:border-box}
    .flex-container{
        display:flex;
        flex-direction: row;
    }
    .flex-item{
        padding:0 10px;
        border: 1px solid #ccc;
        margin: 5px
    }
</style>

<div class="flex-container">    
    <div class="flex-item">Item 1</div>    
    <div class="flex-item">Item 2</div>    
    <div class="flex-item">Item 3</div>    
    <div class="flex-item">Item 4</div>    
</div>

Flex Wrap

Flex items will always fit in one row even if content is more. flex wrap is used to allow items to wrap in next line or wrap in reverse direction.

Flex Wrap values

  1. nowrap ( default)
  2. wrap ( wrap to next line)
  3. wrap-reverse ( multiple line but in reverse from bottom to top )

Change Flex wrap

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16

<style>
*{ margin:0; box-sizing:border-box}
    .flex-container{
        display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .flex-item{
        padding:0 10px;
        border: 1px solid #ccc; 
        margin: 5px
    }
</style>

<div class="flex-container">    
    <div class="flex-item">Item 1</div>    
    <div class="flex-item">Item 2</div>    
    <div class="flex-item">Item 3</div>    
    <div class="flex-item">Item 4</div>    
    <div class="flex-item">Item 5</div>    
    <div class="flex-item">Item 6</div>    
    <div class="flex-item">Item 7</div>    
    <div class="flex-item">Item 8</div>    
    <div class="flex-item">Item 9</div>    
    <div class="flex-item">Item 10</div>    
    <div class="flex-item">Item 11</div>    
    <div class="flex-item">Item 12</div>    
    <div class="flex-item">Item 13</div>    
    <div class="flex-item">Item 14</div>    
    <div class="flex-item">Item 15</div>    
    <div class="flex-item">Item 16</div>    
</div>

Flex Flow

flex flow is the shorthand for flex-direction and flex-wrap properties. The default value is row nowrap.

Item 1
Item 2
Item 3
Item 4

<style>
*{ margin:0; box-sizing:border-box}
.flex-container{
    display:flex;
    flex-flow: column wrap;
}
.flex-item{
    padding:0 10px;
    border: 1px solid #ccc; 
    margin: 5px
}
</style>
<div class="flex-container">    
    <div class="flex-item">Item 1</div>    
    <div class="flex-item">Item 2</div>    
    <div class="flex-item">Item 3</div>    
    <div class="flex-item">Item 4</div>    
</div>

Justify Content

justify-content property is used to justify content in main axis. This can adjust items to left, center, right or add space in between.

justify-content values

  1. flex-start (default)
  2. flex-end
  3. center
  4. space-between
  5. space-around
  6. space-evenly

Change justify-content

Item 1
Item 2
Item 3

<style>
*{ margin:0; box-sizing:border-box}
    .flex-container{
        display:flex;
        flex-flow:row wrap;
        justify-content: flex-start;
    }
    .flex-item{
        padding:0 10px;
        border: 1px solid #ccc;
        margin: 5px
    }
</style>

<div class="flex-container">    
    <div class="flex-item">Item 1</div>    
    <div class="flex-item">Item 2</div>    
    <div class="flex-item">Item 3</div>      
</div>

Align Items

Align-items property define the behavior of how flex item laid out across horizontal axis. By-default, the value is stretch.

Values of align-items

  1. stretch
  2. flex-start
  3. flex-end
  4. center
  5. baseline
1
2
3

<style>
*{ margin:0; box-sizing:border-box}
    .flex-container{
        display:flex;
        flex-flow:row wrap;
        align-items: stretch;
    }
    .flex-item{
        padding:0 10px;
        border: 1px solid #ccc;
        margin: 5px;
    }
</style>

<div class="flex-container">    
    <div class="flex-item"> 1 </div>    
    <div class="flex-item"> 2 </div>    
    <div class="flex-item"> 3 </div>      
</div>

Properties of flex items

order

order property of flex item set the order in which they appear in parent container. The default order is 0. value of order is always a number. order can be positive or negative.

By default all flex items are in order of document flow.

1
2
3

<style>
*{ margin:0; box-sizing:border-box}
    .flex-container{
        display:flex;
        flex-flow:row wrap;
    }
    .flex-item{
        padding:0 10px;
        border: 1px solid #ccc;
        margin: 5px;
        order:0;
    }
</style>

<div class="flex-container">    
    <div class="flex-item"> 1 </div>    
    <div class="flex-item"> 2 </div>    
    <div class="flex-item"> 3 </div>      
</div>

flex-grow

flex-grow property of flex item defines the growth ability. The default value for all flex items is 0. Flex grow when not zero can use the remaining space of container

Flex Grow value

  1. 0 (default)
  2. number

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

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

Flex-grow:
1
2
3

<style>
*{ margin:0; box-sizing:border-box}
    .flex-container{
        display:flex;
        flex-flow:row wrap;
    }
    .flex-item{
        padding:0 10px;
        border: 1px solid #ccc;
        margin: 5px;
        flex-grow: 0;
    }
</style>

<div class="flex-container">    
    <div class="flex-item"> 1 </div>    
    <div class="flex-item"> 2 </div>    
    <div class="flex-item"> 3 </div>      
</div>

Flex Grow 2

1
2
3

<style>
*{ margin:0; box-sizing:border-box}
    .flex-container{
        display:flex;
        flex-flow:row wrap;
    }
    .flex-item{
        padding:0 10px;
        border: 1px solid #ccc;
        margin: 5px;
        flex-grow: 1;
    }
    .fg2{
    flex-grow:2;
    }
</style>

<div class="flex-container">    
    <div class="flex-item"> 1 </div>    
    <div class="flex-item fg2"> 2 </div>    
    <div class="flex-item"> 3 </div>      
</div>

Flex Shrink

Flex Shrink property of flex item defines the ability to shrink if required. The default value of flex-shrink is 1. The value can be any positive value or 0. flex-shrink 0 means flex item will not shrink.

Flex Shrink values

  1. 1 (default)
  2. 0
Flex-shrink:
Column
Column
Column
Column
Column
Column
Column
Column

<style>
*{ margin:0; box-sizing:border-box}
    .flex-container{
        display:flex;
    }
    .flex-item{
        padding:0 10px;
        border: 1px solid #ccc;
        margin: 5px;
        flex-shrink: 1;
    }
</style>

<div class="flex-container">    
    <div class="flex-item">Column</div>    
    <div class="flex-item">Column</div>    
    <div class="flex-item">Column</div>    
    <div class="flex-item">Column</div>    
    <div class="flex-item">Column</div>    
    <div class="flex-item">Column</div>    
    <div class="flex-item">Column</div>    
    <div class="flex-item">Column</div>    
</div>

Flex Basis

flex-basis property of flex item defines the initial main size ( width or height ) of flex item. The flex basis value could be auto, %, px, em or rem. The default value of flex-basis is 0. We can assign value to flex-basis based on the percentage required. For example, 20% means the initial width of flex item will be 20%, and sum of width of other items will be 80%.

Flex Basis auto

flex-basis: auto will apply automatic or equal width to flex items. If flex items are two, then its 50%, if flex items are 3, then 33.33% and if its 4, then 25% each.

auto
auto
auto

<style>
*{ margin:0; box-sizing:border-box}
    .flex-container{
        display:flex;
        flex-flow:row wrap;
    }
    .flex-item{
        padding:0 10px;
        border: 1px solid #ccc;
        margin: 5px;
        flex-grow: 1;
        flex-shrink:0;
        flex-basis:auto;
    }
</style>

<div class="flex-container">    
    <div class="flex-item"> auto </div>    
    <div class="flex-item"> auto </div>        
    <div class="flex-item"> auto <//div>        
</div>

Flex Basic px or %

flex basis px or % defines initial width of flex-items in px or %. Like 25%, 20px, 4em, 5rem etc.

50%
50%

    <style>
    *{ margin:0; box-sizing:border-box}
        .flex-container{
            display:flex;
            flex-flow:row wrap;
        }
        .flex-item{
            padding:0 10px;
            border: 1px solid #ccc;
            margin: 5px;
            flex-grow: 1;
            flex-shrink:0;
            flex-basis:50%;
        }
    </style>
    
    <div class="flex-container">    
        <div class="flex-item"> 50% </div>    
        <div class="flex-item"> 50% </div>         
    </div>

Flex-Basis Vs Width

Flex-basis overwrites css width property. But max-width can be used with flex-basis.

Flex-Basis Vs Width Vs max-width

max-width > flex-basis > width

This means, flex-basis can overwrite width property, but max-width can overwrite flex-basis.

flex

flex is the shorthand for flex-grow, flex-shrink and flex-basis. The default value of flex is 0 1 0%. The first value, i.e flex-grow is compulsory and others two are optional.

Always prefer flex shorthand property for flex-grow, flex-shrink and flex-basis for simplicity.

1
2

<style>
*{ margin:0; box-sizing:border-box}
    .flex-container{
        display:flex;
        flex-flow:row-wrap;
    }
    .flex-item{
        padding:8px;
        border: 1px solid #ccc;
        flex: 1 0 auto;
    }
</style>

<div class="flex-container">    
    <div class="flex-item"> 1 </div>    
    <div class="flex-item"> 2 </div>        
</div>

flex with row-wrap

Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
Col 7
Col 8

<style>
*{ margin:0; box-sizing:border-box}
.flex-container{
    display:flex;
    flex-flow:row wrap;
}
.flex-item{
    padding:8px;
    border: 1px solid #ccc;
    flex: 1 0 25%;
}
</style>

<div class="flex-container">    
<div class="flex-item">col 1 </div>    
<div class="flex-item">col 2 </div>        
<div class="flex-item">col 3 </div>        
<div class="flex-item">col 4 </div>        
<div class="flex-item">col 5 </div>        
<div class="flex-item">col 6 </div>        
<div class="flex-item">col 7 </div>        
<div class="flex-item">col 8 </div>        
</div>

flex with column-wrap

Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
Col 7
Col 8

<style>
.flex-container{
    display:flex;
    flex-flow:column wrap;
    height:200px;
}
.flex-item{
    padding:8px;
    border: 1px solid #ccc;
    flex: 1 0 25%;
}
</style>

<div class="flex-container">    
<div class="flex-item">col 1 </div>    
<div class="flex-item">col 2 </div>        
<div class="flex-item">col 3 </div>        
<div class="flex-item">col 4 </div>        
<div class="flex-item">col 5 </div>        
<div class="flex-item">col 6 </div>        
<div class="flex-item">col 7 </div>        
<div class="flex-item">col 8 </div>        
</div>

Align Self

align-self is the property of flex items. It is used to align an individual flex item on y-axis.

Align Self Values

  1. auto
  2. flex-start
  3. center
  4. flex-end
  5. baseline
1
2
3

<style>
    .flex-container{
        display:flex;
        flex-flow:row wrap;
        height:150px;
    }
    .flex-item{
        padding:0 10px;
        border: 1px solid #ccc;
        margin: 5px;
        flex:1 0 auto;
    }
    .flex-item:nth-child(1){align-self:flex-start}
    .flex-item:nth-child(2){align-self:center}
    .flex-item:nth-child(3){align-self:flex-end}
</style>

<div class="flex-container">    
    <div class="flex-item"> 1 </div>    
    <div class="flex-item"> 2 </div>        
    <div class="flex-item"> 3 </div>        
</div>