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