弹性盒
2009年，W3C 提出了一种新的方案‑‑‑‑Flex 布局，可以简便、完整、响应式地实
现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能
很安全地使用这项功能
一、什么是flex?Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提
供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex; }
行内元素也可以使用 Flex 布局。
.box{ display: inline‑flex;}
Webkit 内核的浏览器，必须加上‑webkit前缀。
.box{ display: ‑webkit‑flex; /* Safari */ display: flex;}
注意，设为 Flex 布局以后，子元素的float、clear和vertical‑align属性将失
效。
详细属性今天不做介绍，这里只分享一个排版的小案例。
微信图片_20190619002430.png
这样一个简单的版面，但是实际排版中运用弹性盒会遇到一个小问题，在这里为大家展示一下。
微信图片_20190619003903.png
上个版面用浮动的时候通常是按照先后顺序然后直接1 2 3 5 6 7向左浮动
4向右浮动就完成了，间距用margin调整一下就可以了；
但是用弹性盒的话很多初学者正常的顺序还是这样排列，然后逻辑性就是让他们成一行排列然后换行，这样问题就来了，按照上面的逻辑写的话就会出现下面的问题：
微信图片_20190619004325.png
我们会发现4号元素由于体积的问题挡住了后面的元素，所以上面的逻辑行不通。
那么现在我们换一种排列方式就可以完成了；
微信图片_20190619004628.png
让所有元素上下排列 7号最大的元素因为是最后一个 所以不会影响到其他元素。
下面把写法呈现给大家，希望从逻辑思维上对新手有些帮助。
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
