Flex

.flex
1
2
3
 
{ display: flex }
.flex-nowrap
1
2
3
 
{ flex-wrap: nowrap }
.flex-wrap
1
2
3
 
{ flex-wrap: wrap }

Items

.flex-fill
.flex-fill 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
.flex-initial 1 2 4
.flex-initial 
{ flex: 1 1 auto }
.flex-initial
.flex-initial 1 2 3 4 5 6 7 8 9 10
.flex-initial 1 2 3 4 5 6 7 8 9 10
.flex-initial 1 2 3 4 5 6 7 8 9 10 
{  }
.flex-none
.flex-none 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
.flex-none 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
.flex-none 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 
{ flex: 0 0 auto }

Flex Alignment

Content Along Main Axes
.justify-content-start
1
2
3
 
{ justify-content: flex-start }
.justify-content-end
1
2
3
 
{ justify-content: flex-end }
.justify-content-center
1
2
3
 
{ justify-content: center }
.justify-content-between
1
2
3
 
{ justify-content: space-between }
.justify-content-around
1
2
3
 
{ justify-content: space-around }
.justify-content-evenly
1
2
3
 
{ justify-content: space-evenly }
Content Along Cross Axes
.align-content-start
1
2
3
4
5
6
 
{ align-content: flex-start }
.align-content-end
1
2
3
4
5
6
 
{ align-content: flex-end }
.align-content-center
1
2
3
4
5
6
 
{ align-content: center }
.align-content-between
1
2
3
4
5
6
 
{ align-content: space-between }
.align-content-around
1
2
3
4
5
6
 
{ align-content: space-around }
.align-content-evenly
1
2
3
4
5
6
 
{ align-content: space-evenly }
Items Along Cross Axes
.align-auto
1
2
2
2
3
3
 
{ align-items: auto }
.align-start
1
2
2
2
3
3
 
{ align-items: start }
.align-end
1
2
2
2
3
3
 
{ align-items: end }
.align-center
1
2
2
2
3
3
 
{ align-items: center }
.align-stretch
1
2
2
2
3
3
 
{ align-items: stretch }
.align-baseline
1
2
2
2
3
3
 
{ align-items: baseline;
vertical-align: baseline }

Item Alignment

.flex .align-auto
1
.align-auto
3
3
 
{  }
.flex .align-start
1
.align-start
3
3
 
{  }
.flex .align-end
1
.align-end
3
3
 
{  }
.flex .align-center
1
.align-center
3
3
 
{  }
.flex .align-stretch
1
.align-stretch
3
3
 
{  }

Order

.order-1
1 .order-3
2 .order-1
3 .order-2
 
{ order: 1 }