引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
首先从最基本的布局开始介绍弹性盒布局模型。要实现的布局效果是一个简单的图片缩略图预览页面。页面的基本 HTML 如代码清单 1所示。
|
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所示。
|
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所示。
默认情况下，弹性盒容器中的条目会尽量占满容器在主轴方向上的一行。当容器的主轴尺寸小于其所有条目总的主轴尺寸时，会出现条目之间互相重叠或超出容器范围的现象。CSS 属性"flex-wrap"用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行为。"flex-wrap"属性的可选值及其含义如表2所示。
可以使用"flex-flow"属性把"flex-direction"和"flex-wrap"结合起来，如代码清单 3所示。
|
1
|
flex-flow: row wrap; |
作为 CSS3 规范的一部分，弹性盒布局模型可以在很多典型的场景中简化完成布局所需的 CSS 代码。该布局模型也提供了很多实用的特性来满足常见的布局要求，包括对容器中条目的排列、对齐、调整大小和分配空白空间等。弹性盒布局模型可以作为 Web 开发人员工具箱中的一个很好的工具。
原文：https://www.cnblogs.com/lxl20000630/p/10828115.html