Abhi
Abhi Author of Anicode.in. Passionate full-stack web developer.

The ultimate guide to master flexbox in 10minutes


The ultimate guide to master flexbox in 10minutes

The CSS flexbox (Flexible Box Layout Module) is a layout module consisting of the flex container (the parent element) and the flex elements (the elements for children).

Alt Text

The flex objects can be arranged as a row or as a column, and the free space available between them can be distributed in different ways.

Share this with your freinds using on twitter #CSSCheatz

## Basic Example:

Alt Text

1
2
3
4
5
6
7
 .container {
  display: flex;
}
.container > elem {
  flex: 1 1 auto;
}

The Flexbox layout is optimised for small-scale layouts, whereas the Grid layout is better adapted for larger-scale layouts.

Display

1
2
3
display: flex;
display: inline-flex;
 

By example, all flex objects may try to fit in one section. You can adjust that, and with this property allow the products to wrap as required.

## Flex- Direction

Alt Text

1
2
3
4
5
6
 
 flex-direction: row;            
  flex-direction: row-reverse;    
  flex-direction: column;         
  flex-direction: column-reverse; 
  

## Wrap

One line

1
 flex-wrap: nowrap; 

Multiline

1
2
  flex-wrap: wrap;   
  

## Alignment

Alt Text

vertical-align to top

1
  align-items: flex-start; 

**vertical-align to bottom **

1
2
  align-items: flex-end;  

vertical-align to center

1
2
  align-items: center;   
  

To eg height

1
2
  align-items: stretch; 

Refer this graphic

Alt Text

Justify content

1
  justify-content: flex-start;    
1
2
3
 
  justify-content: center;   

Alt Text

1
2
3
 
  justify-content: flex-end;  

1
2
3
 
  justify-content: space-between; 

1
2
3
 
  justify-content: space-around;

1
2
3
 
  justify-content: space-evenly;  
  

# Flex child

Alt Text

## simple

1
2
 
  flex: 1 0 auto;

Flex grow,shrink.,

1
2
3
4
5
6
7
 
  
  
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  

Order

1
2
3
 
  order: 1;
  order:2;

## Align self

left

1
2
3
 
  align-self: flex-start;  
  

right

1
2
 
  margin-left: auto;       

# Small devices layouts

Alt Text

Simple way that fits small sized devices best!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  
  .container {
  display: flex;
  flex-direction: column;
}

.container > .header {
  flex: 0 0 100px;
}

.container > .MainContent {
  flex: 1 0 auto;
}

# Arrange elements in a table

1
2
3
4
5
6
7
8
 .container {
  display: flex;
}


.container > .box1 { flex: 1 0 20%; }
.container > .box2 { flex: 1 0 40%; }
.container > .box3    { flex: 1 0 250%; }

Centering vertically using flex

Alt Text

1
2
3
4
5
6
7
8
9
10
11
  
.container {
  display: flex;
}

.container > div {
  width: 100px;
  height: 100px;
  margin: auto;
}

For more cheatsheets like this follow me on twitter

comments powered by Disqus