flex 容器属性（一） | 每天学一点flex
“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 15 天，点击查看活动详情
Flexbox布局有两种主要的组件：容器（container）和项目（item）。容器属性指的是容器元素上设置的一些布局属性，这些属性将会影响容器中的项目的布局。
接下来我们来看一下部分容器属性，flex-direction、flex-wrap、flex-flow 属性。
容器属性
1. flex-direction 属性
flex-direction 属性用于设置内部项目的排列方向。
可以设置的值有四个，分别为 row（默认值），row-reverse，column 以及 column-reverse，如下表：
| 属性值 | 描述 |
|---|---|
| row | 主轴为水平方向，起点为左端 |
| row-reverse | 主轴为水平方向，起点为右端 |
| column | 主轴为垂直方向，起点为上面 |
| column-reverse | 主轴为垂直方向，起点为下面 |
（上图对应的属性值依次为 column-reverse，column，row，row-reverse）
下面，我们依次来看一下不同取值时的效果。
flex-direction 属性值为 row-reverse：
.container {
width: 300px;
height: 300px;
outline: 1px solid;
margin: 100px;
display: flex; /* 设置该盒子为弹性盒 */
flex-direction: row-reverse; /* 设置弹性盒主轴方向 */
}
效果如下：
flex-direction 属性值为 column 时的效果如下：
flex-direction 属性值为 column-reverse 时的效果如下：
2. flex-wrap 属性
默认情况下，所有项目都是排在一条轴线上面的。
通过 flex-wrap 属性，可以设置如果一条轴线排不下，如何进行换行。
可以设置值有三个，分别为 nowrap（默认值），wrap 以及 wrap-reverse，如下表：
| 属性值 | 描述 |
|---|---|
| nowrap | 不换行 |
| wrap | 换行，第一行在上面 |
| wrap-reverse | 换行，第一行在下面 |
flex-wrap 属性值为 no-wrap 时，表示不换行，空间不够会压缩每一个盒子。这是该属性的默认值。
flex-wrap 属性值为 wrap 时，表示换行，并且第一行在上方。
flex-wrap 属性值为 wrap-reverse 时，也表示换行，但是第一行在下方。
接下来我们来进行实际的代码演示。
首先将项目的宽度设置为 100px，如下所示：
/* 项目 css */
.item {
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
color: white;
}
由于默认情况下 flex-wrap 的属性值为 no-wrap，所以空间不足的情况下会压缩每一个项目，如下图所示：
将容器属性 flex-wrap 设置为 wrap：
/* 容器 css */
.container {
width: 300px;
height: 300px;
outline: 1px solid;
margin: 100px;
display: flex; /* 设置该盒子为弹性盒 */
flex-wrap: wrap; /* 设置盒子换行 */
}
效果如下：
flex-wrap 属性值为 wrap-reverse 时的效果如下：
3. flex-flow 属性
flex-flow 属性是 flex-direction 以及 flex-wrap 属性的简写形式，默认值为 row nowrap。
