CSS 柔性 容器
父元素（容器）
正如我们在上一章中提到的，这是一个弹性 容器 （蓝色区域）有三个 flex 项目:
通过设置 display 财产flex:
弹性容器的属性如下：
flex-direction 属性
这 flex-direction 属性定义容器想要堆叠弹性项目的方向。
例子
这 column 值垂直堆叠弹性项目（从上到下）：
.flex 容器 {
显示：弹性；
弹性方向： 列；
}
亲自尝试 »
例子
这 column-reverse 值垂直堆叠弹性项目（但从下到上）：
.flex 容器 {
显示：弹性；
弹性方向： 列反转；
}
亲自尝试 »
例子
这 row 值水平堆叠弹性项目（从左到右）：
.flex 容器 {
显示：弹性；
弹性方向：行；
}
亲自尝试 »
例子
这 row-reverse 值水平堆叠弹性项目（但从右到左）：
.flex 容器 {
显示：弹性；
弹性方向： 行反转；
}
亲自尝试 »
flex-wrap 属性
这 flex-wrap 属性指定弹性项目是否应该换行。
下面的例子有 12 个弹性项目，为了更好地展示 flex-wrap 财产。
1
2
3
4
5
6
7
8
9
10
11
12
例子
这 wrap 值指定弹性项目将在必要时换行：
.flex 容器 {
显示：弹性；
弹性包裹：包裹；
}
亲自尝试 »
例子
这 nowrap 值指定弹性项目不会换行（这是默认值）：
.flex 容器 {
显示：弹性；
弹性包装：现在包装；
}
亲自尝试 »
例子
这 wrap-reverse 值指定弹性项目将在必要时以相反的顺序换行：
.flex 容器 {
显示：弹性；
弹性包裹：反向包裹；
}
亲自尝试 »
flex-flow 属性
这 flex-flow 属性是用于设置的简写属性flex-direction 和flex-wrap 特性。
例子
.flex 容器 {
显示：弹性；
弹性流：行换行；
}
亲自尝试 »
放置您的广告！
justify-content 属性
这 justify-content 属性用于对齐弹性项目：
例子
这 center 值将弹性项目对齐到容器的中心：
.flex 容器 {
显示：弹性；
对齐内容：居中；
}
亲自尝试 »
例子
这 flex-start 值将弹性项目对齐到容器的开始处（这是默认值）：
.flex 容器 {
显示：弹性；
对齐内容：flex-start；
}
亲自尝试 »
例子
这 flex-end 值将弹性项目对齐到容器的末尾：
.flex 容器 {
显示：弹性；
对齐内容：flex-end；
}
亲自尝试 »
例子
这 space-around 值显示弹性项目，并在行前、行间和行后留有空格：
.flex 容器 {
显示：弹性；
对齐内容：周围空间；
}
亲自尝试 »
例子
这 space-between 值显示弹性项目，并在行之间留有空间：
.flex 容器 {
显示：弹性；
对齐内容： 间距；
}
亲自尝试 »
align-items 属性
这 align-items 属性用于对齐弹性项目。
在这些例子中，我们使用 200 像素高的容器，以更好地展示 align-items 财产。
例子
这 center 值将弹性项目对齐到容器的中间：
.flex 容器 {
显示：弹性；
高度：200px；
对齐项目：居中；
}
亲自尝试 »
例子
这 flex-start 值将弹性项目对齐到容器的顶部：
.flex 容器 {
显示：弹性；
高度：200px；
对齐项目：弹性开始；
}
亲自尝试 »
例子
这 flex-end 值将弹性项目与容器的底部对齐：
.flex 容器 {
显示：弹性；
高度：200px；
对齐项目：弹性结束；
}
亲自尝试 »
例子
这 stretch 值会拉伸弹性项目以填充容器（这是默认值）：
.flex 容器 {
显示：弹性；
高度：200px；
对齐项目：拉伸；
}
亲自尝试 »
例子
这 baseline 值对齐弹性项目，例如它们的基线对齐：
.flex 容器 {
显示：弹性；
高度：200px；
对齐项目：基线；
}
笔记： 该示例使用不同的字体大小来证明项目与文本基线对齐：
亲自尝试 »
align-content 属性
这 align-content 属性用于对齐弹性线。
1
2
3
4
5
6
7
8
9
10
11
12
在这些例子中，我们使用一个 600 像素高的容器， flex-wrap 属性设置为wrap，以更好地展示 align-content 财产。
例子
这 space-between 值显示弹性线之间相等间距：
.flex 容器 {
显示：弹性；
高度：600px；
弹性包裹：包裹；
对齐内容： 间距；
}
亲自尝试 »
例子
这 space-around 值显示弹性线及其前、中、后的空间：
.flex 容器 {
显示：弹性；
高度：600px；
弹性包裹：包裹；
对齐内容：周围空间；
}
亲自尝试 »
例子
这 stretch 值拉伸弹性线以占据剩余空间（这是默认值）：
.flex 容器 {
显示：弹性；
高度：600px；
弹性包裹：包裹；
对齐内容：拉伸；
}
亲自尝试 »
例子
这 center 值显示在容器中间显示弹性线：
.flex 容器 {
显示：弹性；
高度：600px；
弹性包裹：包裹；
对齐内容：居中；
}
亲自尝试 »
例子
这 flex-start 值在容器的开始处显示弹性线：
.flex 容器 {
显示：弹性；
高度：600px；
弹性包裹：包裹；
对齐内容：弹性开始；
}
亲自尝试 »
例子
这 flex-end 值显示容器末尾的弹性线：
.flex 容器 {
显示：弹性；
高度：600px；
弹性包裹：包裹；
对齐内容：弹性结束；
}
亲自尝试 »
完美居中
在下面的例子中，我们将解决一个非常常见的风格问题：完美居中。
解决方案： 设置justify-content 和align-items 属性center，并且弹性项目将完全居中：
例子
.flex 容器 {
显示：弹性；
高度：300px；
对齐内容：居中；
对齐项目：居中；
}
亲自尝试 »
CSS Flexbox 容器属性
下表列出了所有 CSS Flexbox 容器属性：
| 财产 |
描述 |
| 对齐内容 |
修改 flex-wrap 属性的行为。它与 align-items 类似，但不是对齐弹性项目，而是对齐弹性线 |
| 对齐项目 |
当弹性项目未使用横轴上的所有可用空间时，垂直对齐弹性项目 |
| 展示 |
规定用于 HTML 元素的框类型 |
| 弹性方向 |
规定弹性容器内弹性项目的方向 |
| 弹性流 |
flex-direction 和 flex-wrap 的简写属性 |
| 弹性包裹 |
指定当一行中没有足够的空间时，弹性项目是否应该换行 |
| 对齐内容 |
当弹性项目未使用主轴上的所有可用空间时，水平对齐弹性项目 |
