基本布局首先从最基本的布局开始介绍弹性盒布局模型。要实现的布局效果是一个简单的图片缩略图预览页面。页面的基本 HTML 如 所示。
清单 1. 简单的图片缩略图预览页面的 HTML 代码1
2
3
4
5
6
7
8
| <ul class="flex-container">
<li class="flex-item"><img src="//placehold.it/300&text=1"></li>
<li class="flex-item"><img src="//placehold.it/300&text=2"></li>
<li class="flex-item"><img src="//placehold.it/300&text=3"></li>
<li class="flex-item"><img src="//placehold.it/300&text=4"></li>
<li class="flex-item"><img src="//placehold.it/300&text=5"></li>
<li class="flex-item"><img src="//placehold.it/300&text=6"></li>
</ul>
|
该页面的基本 HTML 是很简单的。在一个<ul>元素下面有 6 个<li>元素。每个<li>元素中包含一个大小为 300x300 的缩略图图片。<ul>元素作为弹性盒布局的容器，而<li>元素则是容器中的条目。实现基本布局的 CSS 如 所示。
清单 2. 简单的图片缩略图预览页面的 CSS 代码1
2
3
4
5
6
7
8
9
10
11
| .flex-container {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
padding: 5px;
}
|
在代码清单 2 中，对于弹性盒布局的容器，使用"display: flex"声明使用弹性盒布局。CSS 属性声明"flex-direction"用来确定主轴的方向，从而确定基本的条目排列方式。"flex-direction"属性的可选值及其含义如所示。
表 1. “flex-direction”属性的可选值及其含义属性值含义row（默认值）主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr，则排列顺序是从左到右；如果文档顺序是 rtl，则排列顺序是从右到左。row-reverse主轴为水平方向。排列顺序与页面的文档顺序相反。column主轴为垂直方向。排列顺序为从上到下。column-reverse主轴为垂直方向。排列顺序为从下到上。
默认情况下，弹性盒容器中的条目会尽量占满容器在主轴方向上的一行。当容器的主轴尺寸小于其所有条目总的主轴尺寸时，会出现条目之间互相重叠或超出容器范围的现象。CSS 属性"flex-wrap"用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行为。"flex-wrap"属性的可选值及其含义如 所示。
表 2. “flex-wrap”属性的可选值及其含义属性值含义nowrap（默认值）容器中的条目只占满容器在主轴方向上的一行，可能出现条目互相重叠或超出容器范围的现象。wrap当容器中的条目超出容器在主轴方向上的一行时，会把条目排列到下一行。下一行的位置与交叉轴的方向一致。wrap-reverse与 wrap 的含义类似，不同的是下一行的位置与交叉轴的方向相反。
可以使用"flex-flow"属性把"flex-direction"和"flex-wrap"结合起来，如 所示。
清单 3. “flex-flow”属性的使用示例 |
