在写网页的过程中，我们一般会遇到定义了一个div，但在其中添加子项目时，不能够以最佳的方式填满整个div，而使div留有空白，那么我们该如何解决这个问题呢？
正如上文所提到，当子项目无法填满整个div时，我们可能想到了调整子项目的margin、float、width、height等属性，但还要根据此div的大小来慢慢试出来，什么时候的大小是最合适的，而这些布局靠一个属性是很难实现，为什么不让这些设置变得更加简便？
Flexbox（伸缩盒）的出现解决了这一切。
首先通过设置div的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被设置为一个块级元素，而设置为 inline-flex 的容器则设置为一个行内元素。flex属性可以用来指定可伸缩长度的部件：扩展比率（flex-grow）、收缩比率（flex-shrink）和伸缩基准值（flex-basis）。默认值为：0 1 auto，auto表示伸缩基准值的计算值是自身的width设置，如果自身没有设置width值，则长度取决于内容。例如：
伸缩容器属性
（1）flex-flow属性
flex-flow属性是flex-direction和flex-wrap的简写形式。
Flex-direction属性值
row（默认值）：主轴为水平方向，起点在左端。
row-reverse: 主轴为水平方向，主轴起点和主轴终点交换。起点在右端。
column: 主轴为垂直方向，主轴和侧轴交换。起点在上沿。
column-reverse: 主轴为垂直方向，起点在下沿。
Flex-wrap属性值
nowrap (默认)：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
（2）justify-content属性
定义项目在主轴的对齐方式，与主轴的方向有关。
Justify-content属性值
flex-start：默认值，左对齐。
flex-end：右对齐。
center：居中。
space-between：两端对齐，项目之间间隔相等。
space-around：项目两侧间隔相等。项目之间的间隔比项目与边框的间隔大一倍。
（3）align-items属性
定义项目在交叉轴上如何对齐
align-items属性值
flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
center:伸缩项目的外边距盒在该行的侧轴上居中放置
baseline:项目在第一行文字的基线对齐。
stretch:默认值，未设置高度或设为：auto，则占满整个盒子。
（4）align-content属性
定义多根轴的对齐方式
flex-start:各行向伸缩容器的起点位置堆叠。
flex-end:各行向伸缩容器的结束位置堆叠。
center:各行向伸缩容器的中间位置堆叠。
space-between:各行在伸缩容器中平均分布。
space-around:各行在伸缩容器中品均分布，在两边各有一半空间。
stretch:默认值，各行将会伸展以占用额外空间。
本文介绍了伸缩盒子的使用，可用伸缩盒子进行布局，但伸缩盒子只是布局中的一个小项目，布局还有很多的方法，如浮动等等，还可参照其他博客，了解更多关于布局的知识。
联系客服
