欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
1 问题描述在写网页的过程中，我们一般会遇到定义了一个div，但在其中添加子项目时，不能够以最佳的方式填满整个div，而使div留有空白，那么我们该如何解决这个问题呢？
2 问题分析正如上文所提到，当子项目无法填满整个div时，我们可能想到了调整子项目的margin、float、width、height等属性，但还要根据此div的大小来慢慢试出来，什么时候的大小是最合适的，而这些布局靠一个属性是很难实现，为什么不让这些设置变得更加简便？
3 解决方案Flexbox（伸缩盒）的出现解决了这一切。
首先通过设置div的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被设置为一个块级元素，而设置为 inline-flex 的容器则设置为一个行内元素。flex属性可以用来指定可伸缩长度的部件：扩展比率（flex-grow）、收缩比率（flex-shrink）和伸缩基准值（flex-basis）。默认值为：0 1 auto，auto表示伸缩基准值的计算值是自身的width设置，如果自身没有设置width值，则长度取决于内容。例
