flexbox

flex container 属性

display

flex

1
2
3

inline-flex

1
2
3

flex-direction

row（默认）

1
2
3

row-reverse

1
2
3

column

1
2
3

column-reverse

1
2
3

flex-wrap

no-wrap（默认）

1
2
3
4
5
6

wrap

1
2
3
4
5
6

wrap-reverse

1
2
3
4
5
6

justify-content

flex-start（默认）

1
2
3

flex-end

1
2
3

center

1
2
3

space-around

1
2
3

space-between

1
2
3

align-items

stretch（默认）

1
2
3

flex-start

1
2
3

flex-end

1
2
3

center

1
2
3

baseline

1
2
3

align-content

stretch（默认）

1
2
3
4
5
6

flex-start

1
2
3
4
5
6

flex-end

1
2
3
4
5
6

center

1
2
3
4
5
6

space-around

1
2
3
4
5
6

space-between

1
2
3
4
5
6

flex item 属性

align-self

auto（默认）

1
2
3

flex-start

1
2
3

flex-end

1
2
3

center

1
2
3

baseline

1
2
3

stretch

1
2
3

order

1
2
3

flex-grow

1
2
3

flex-shrink

1
2
3

flex-basis

1
2
3

flex

1
2
3