weex默认的flex布局_flex笔记5——align-content

align-content是flex布局“容器”的最后一个属性，定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。也就是说，如果你设置flex-direction属性的时候，设定为nowrap(默认值)，那么，项目就只有一根轴线，align-content属性不起作用，或者你设置的项目，连一行都没能排满，align-content属性不起作用。还有一个值得注意的问题是，如果你的flex布局中“容器”没有设定高度或者设定的高度比项目的总高度要小，那么这个属性也是无效的。align-content有六个取值，它们分别是——

1. flex-start：与交叉轴的起点对齐。
2. flex-end：与交叉轴的终点对齐。
3. center：与交叉轴的中点对齐。
4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
5. space-around:每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
6. stretch(默认值)：各行将会伸展以占用剩余的空间。

照例，我们看它们的实际效果，先写一段HTML代码

1

2

3

4

5

6

7

8

9

10

然后加上css样式

.container{ width:1000px; height:400px; display: flex; flex-wrap: wrap; background-color:rgb(25 202 173); padding:10px 0 0 10px;}.item{ display: flex; justify-content: center; align-items: center; width:240px; color:rgb(244 96 108); font-size: 60px; height:80px; background: rgb(209 186 116); margin:0 10px 10px 0;}

现在我们往.container中加入align-content属性，先取值为flex-start

align-content：flex-start

效果很是清晰，和float：left效果基本相同，接着更改取值为flex-end

align-content：flex-end

其实也没什么好介绍的，看图一目了然。继续改取值——align-content：center

align-content：center

在继续改取值——align-content：space-between

align-content：space-between

由上图可以看到，这个取值为两两相邻的行与行之间设置了一个相等的距离。接着看另外一个取值——space-around

align-content：space-around

这个取值，相当于为每行项目添加了一个相等的上、下外边距(外边距不会重合)。剩下最后一个取值——stretch

align-content：stretch

这个取值是这个属性的默认值，效果相当于为每一行“项目”添加一个下外边距。

以上就是笔记5的全部内容。