Flex布局Demos

学习阮一峰老师的教程时练手的demos， http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

容器的属性

flex-direction

.box { display: flex; flex-direction: row | row-reverse | column | column-reverse; }

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5

.box{ display: inline-flex; flex-direction: row | row-reverse | column | column-reverse; }

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5

flex-wrap

.box { display: flex; flex-wrap: nowrap | wrap | wrap-reverse; }

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5

flex-flow

.box{ display: flex; flex-flow: [flex-direction] || [flex-wrap]; }

flex-flow: column wrap;    flex-flow: column wrap-reverse;    flex-flow: row wrap;   

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5

justify-content

.box{ display: flex; justify-content: flex-start | flex-end | center | space-between | space-around; }

flex-start

1
2
3

flex-end

1
2
3

center

1
2
3

space-between

1
2
3

space-around

1
2
3

align-items

.box{ display: flex; align-items: flex-start | flex-end | center | baseline | stretch; }

flex-start

1
2
3
4

flex-end

1
2
3
4

center

1
2
3
4

baseline

1text-value
2text-value
3text-value
4text-value

stretch

1
2
3
4

align-content

.box{ display: flex; align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

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

space-between

1
2
3
4
5
6
7
8
9

space-around

1
2
3
4
5
6
7
8
9

stretch

1
2
3
4
5
6
7
8
9

项目的属性

order

.item { order: <integer>; }

1
order:0
2
order:0
3
order:0
4
order:-1
5
order:-2

flex-grow

.item { flex-grow: <number>; /* default 0 */ }

1
flex-grow:1
2
flex-grow:1
3
flex-grow:1
1
flex-grow:1
2
flex-grow:2
3
flex-grow:1
4
flex-grow:0

flex-shrink

.item { flex-shrink: <number>; /* default 1 */ }

1
flex-shrink:1
2
flex-shrink:2
3
flex-shrink:1
4
flex-shrink:0

flex-basis

.item { flex-basis: <length> | auto; /* default auto */ }

1
auto
2
flex-basis:200
3
auto
4
auto
1
flex-basis:auto
2
flex-basis:200
3
flex-basis:auto
4
flex-basis:auto

flex

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; }

1
auto
2
flex:0 0 200px
3
flex:1 0 auto
4
flex:2 0 auto

align-self

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

1
auto
2
align-self:flex-end
3
auto
4
align-self:center