CSS Flex based layouts

The flex box is flexible box designed to build one-dimensional layouts in css layouts. One dimensional means flexbox can build layout in one dimension at one time. For two-dimensional layouts, we have CSS Grids that can handle both row and column.

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

Advantage of using flexbox?

  1. Better layout designs
  2. Advantage of flexible layouts.
  3. Supports IE 10 and above.
  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 property. By using display flex in parent elements, child elements automatically align like columns with auto width and auto height.

Flex container and flex items
CSS Flexbox

Properties of flex container

  1. display ( flex or inline-flex )
  2. flex-direction
  3. flex-wrap
  4. flex-flow
  5. justify-content
  6. align-items
  7. align-content

Properties of flex items ( child of container)

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basic
  5. flex
  6. 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 context.

Change display flex

Block Flex
Item 1
Item 2
Item 3
Item 4

<style>
    .flex-container{
        display: flex;
        display: -ms-flexbox;
    }
    .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 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>
    .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 by default fit in one row. flex wrap is used to allow items to wrap in next line or wrap-reverse.

Flex Wrap values

  1. nowrap ( default)
  2. wrap ( wrap in 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>
    .flex-container{
        display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        -ms-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>
.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 center
Item 3

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

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

1
2
3

<style>
    .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 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>
    .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>            
        
1
2
3

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

1
2
3

<style>
    .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;
    }
</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 Basis

flex-basis property of flex item defines the default width of item before in %age, px , em or rem. The default value of flex-basis is auto. We can assign value to flex-shrink based on the percentage required. For example, 20% means the width of item will be 20%, and sum of widths of other items will be 80%.

1
2

<style>
    .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"> 1 <div>    
    <div class="flex-item"> 2 <div>        
</div>            
        

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 instead of three.

1
2

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

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