彈性盒
2009年，W3C 提出了一種新的方案????Flex 布局，可以簡便、完整、響應(yīng)式地實(shí)
現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽?的支持，這意味著，現(xiàn)在就能
很安全地使用這項(xiàng)功能
一、什么是flex?Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提
供最大的靈活性。
任何一個(gè)容?都可以指定為 Flex 布局。
.box{ display: flex; }
行內(nèi)元素也可以使用 Flex 布局。
.box{ display: inline?flex;}
Webkit 內(nèi)核的瀏覽?，必須加上?webkit前綴。
.box{ display: ?webkit?flex; /* Safari */ display: flex;}
注意，設(shè)為 Flex 布局以后，子元素的float、clear和vertical?align屬性將失
效。
詳細(xì)屬性今天不做介紹，這里只分享一個(gè)排版的小案例。
這樣一個(gè)簡單的版面，但是實(shí)際排版中運(yùn)用彈性盒會(huì)遇到一個(gè)小問題，在這里為大家展示一下。
微信圖片_20190619003903.png
上個(gè)版面用浮動(dòng)的時(shí)候通常是按照先后順序然后直接1 2 3 5 6 7向左浮動(dòng)
4向右浮動(dòng)就完成了，間距用margin調(diào)整一下就可以了；
但是用彈性盒的話很多初學(xué)者正常的順序還是這樣排列，然后邏輯性就是讓他們成一行排列然后換行，這樣問題就來了，按照上面的邏輯寫的話就會(huì)出現(xiàn)下面的問題：
微信圖片_20190619004325.png
我們會(huì)發(fā)現(xiàn)4號(hào)元素由于體積的問題擋住了后面的元素，所以上面的邏輯行不通。
那么現(xiàn)在我們換一種排列方式就可以完成了；
微信圖片_20190619004628.png
讓所有元素上下排列 7號(hào)最大的元素因?yàn)槭亲詈笠粋€(gè) 所以不會(huì)影響到其他元素。
下面把寫法呈現(xiàn)給大家，希望從邏輯思維上對(duì)新手有些幫助。
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
