[css3.svg]CSS - Flexbox properties - A visual guide

Container properties

display:
flex
|
inline-flex
;
flex-direction:
row
1
2
3
|
row-reverse
1
2
3
|
column
1
2
3
|
column-reverse
1
2
3
;

Main-axis

flex-wrap:
wrap
1
2
3
4
5
6
7
8
9
|
nowrap
1
2
3
4
5
6
7
8
9
|
wrap-reverse
1
2
3
4
5
6
7
8
9
;
justify-content:
flex-start
|
flex-end
|
center
|
space-between
|
space-around
|
space-evenly
;

Cross-axis

align-items:
flex-start
|
flex-end
|
center
|
stretch
|
baseline
a
b
c
;
align-content:
flex-start
1
2
3
4
5
6
7
8
9
|
flex-end
1
2
3
4
5
6
7
8
9
|
center
1
2
3
4
5
6
7
8
9
|
stretch
1
2
3
4
5
6
7
8
9
|
space-between
1
2
3
4
5
6
7
8
9
|
space-around
1
2
3
4
5
6
7
8
9
;

Item Properties

 

Main-axis

order:
0
1
2
3
|
[number]
1
2
3
;
flex-grow:
0
0
0
0
|
[number]
1
2
1
;
flex-shrink:
1
1
1
1
Using: flex-basis: 10;
|
[number]
1
2
1
Using: flex-basis: 10;
;
flex-basis:
auto
auto
auto
auto
|
[length] or [percentage]
5em
10em
20em
;

Cross-axis

align-self:
auto
|
flex-start
|
flex-end
|
center
|
baseline
a
b
c
|
stretch
;

align-self is an item level override for the container level property align-items.
In this example, we specify an override for the third item in the list. Items 1 and 2 are aligned according to the container's align-items property, which in this case, has the default value of stretch.


Shorthand properties

Container

flex-flow:
[flex-direction] [flex-wrap];
E.g.: row wrap;

Item

flex:
[flex-grow] [flex-shrink] [flex-basis];
E.g.: 0 1 auto;

Ads by Google


Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath