/
Flexbox Properties.txt
56 lines (28 loc) · 1.28 KB
/
Flexbox Properties.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
Flexbox Properties
A complete version of these tips with image explanations and links is available at CSS Tricks:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Parent (Flex Container)
display: flex | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: wrap | nowrap | wrap-reverse;
flex-flow (shorthand for flex-direction and flex-wrap) (flex-flow: row wrap;)
These next two properties work similarly, just on their different axes.
justify-content (main axis): flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items (cross axis): flex-start | flex-end | center | baseline | stretch;
Align-content spans multiple line boxes.
align-content: flex-start | flex-end | center | stretch | space-between | space-around | space-evenly;
Children (Flex Items)
order: <integer>;
flex-grow: <number>;
flex-shrink: <number>;
flex-basis: <length> | auto;
flex: shorthand for grow, shrink, and basis (default: 0 1 auto)
align-self: overrides alignment set on parent
Main axis = the axis declared in flex-direction
Cross axis = the other axis
i.e. if flex-flow: row wrap;
main axis = row
cross axis = column
if flex-flow: column nowrap;
main axis = column
cross axis = row