Flex动手操作

原文地址 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

样式借鉴 http://static.vgee.cn/static/index.html

设置在容器上的属性

1. flex-direction : 排列方向

row : 水平方向从左到右 (默认)

1
2
3
4

column : 垂直方向从上到下

1
2
3
4

Tips : column-reverse | row-reverse 表示反过来

2. flex-wrap : 定义如果一排放不下,如何换行

nowrap : 不换行 (默认)

1
2
3
4

wrap : 换行,正常规则,第一行在上方

1
2
3
4

wrap-reverse : 换行,第一行在下方

1
2
3
4

3. flex-flow : flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

row nowrap : 水平不换行

1
2
3
4

row wrap : 水平换行

1
2
3
4

cloumn nowrap : 垂直不换行

1
2
3
4

cloumn nowrap : 垂直换行

1
2
3
4

cloumn nowrap : 垂直反向换行??

1
2
3
4

4. jutisfy-content : flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

flex-start:左对齐(默认值)

1
2
3
4

flex-start:右对齐

1
2
3
4

center:居中

1
2
3
4

space-between : 两端对齐,中间每个元素的间隔都相等

1
2
3
4

space-around : 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

1
2
3
4

5. align-items : 属性定义项目在交叉轴上如何对齐。假设交叉轴从上到下

flex-start : 交叉轴的起点对齐(项目都有高度的默认值)

1
2
3
4

flex-end : 交叉轴的终点对齐

1
2
3
4

center : 交叉轴的中点对齐

1
2
3
4

base-line : 项目的第一行文字基线对齐

1
2
3
4

stretch : 如果项目未设置高度或设为auto,将占满整个容器的高度。

1
2
3
4

6. 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

space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

1
2
3
4
5
6
7
8
9

space-around : 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

1
2
3
4
5
6
7
8
9