Css3實現彈性盒模型應用

作為 CSS3 規範的一部分，彈性盒布局模型可以在很多典型的情境中簡化完成布局所需的 CSS 代碼。該布局模型也提供了很多實用的特性來滿足常見的布局要求，包括對容器中條目的排列、對齊、調整大小和分配空白空間等。彈性盒布局模型可以作為 Web 開發人員工具箱中的一個很好的工具。

1、css清除浮動。父元素如果沒有設定高度，將預設由子項目撐開父元素的高度。如果子項目設定了浮動，也不能撐開父元素的高度。

2、使用@media only screen為不同螢幕大小的裝置寫樣式其實是一件非常繁雜的事，所有構建的頁面結構最好一樣，然後通過設定 元素的display來影藏和顯示元素。

頁面結構一旦成型， 除非是通過js動態增刪元素，通過@media only screen我們只能 修改屬性而不能增刪元素。
max-width和min-width是指整個視窗的寬度，包括捲軸的寬度。

3、標準合模型、怪異合模型、彈性盒模型的區別和用法。

4、bootstrap的相關屬性和用法。

上面就是今天所掌握的知識點，廢話不多說入正題。
怎樣實現以下同行元素子自動換行，且換行後，每一行元素依舊佔滿整個父元素的寬度。
請看下面幾張圖：

狀態1

狀態2

狀態3

狀態4
上面4張圖是瀏覽器視窗由大到導覽列的狀態變化。
我的頁面是用bootstrap寫的，上面是bootstrap中的按鈕組，預設同行顯示，由字型撐開按鈕的大小
狀態1到狀態2
狀態1的字型和按鈕大小都比較大，這個過程我是通過css的@media only screen實現。
狀態2到狀態3
這是我們的重點。
怎麼實現行元素自動換行?
如果同行元素有固定的寬度，一般都不會自動換行。
如果同行元素採用百分比賦值,始終會有寬度值，不會實現換行。
如果元素的寬高都是由內容撐開呢?
給元素設定display:inline-block;

悟空與八戒兩個元素中間會出現縫隙。不過自動換行倒是實現了。
如果給元素添加浮動效果呢？

浮動效果要比display:inline-block;好。
不過這兩者雖然都實現了自動換行，但是最終效果卻不是我們想要的。
我們要的效果是由狀態2到狀態3,元素換行之後，該元素會佔據整行，上一行空出來的空間會被其它元素所佔滿。
我採用的方法是使用彈性盒模型
父元素添加以下屬性

 display: flex;//表示該元素為彈性盒模型元素。 flex-wrap: wrap;//表示遇到邊界後會自動換行。

所有子項目添加


flex-grow: 1;//定義元素在整行中所佔的比例，如果都為1，則同行所有的元素的寬度都相同。已換行的元素會 佔據整行。狀態3和狀態4.

引入彈性盒布局模型的目的是提供一種更加有效方式來對一個容器中的條目進行排列、 對齊和分配空白空間。即便容器中條目的尺寸未知或是動態變化的，彈性盒布局模型也能正常的工作。在該布局模型中，容器會根據布局的需要，調整其中包含的條 目的尺寸和順序來最好地填充所有可用的空間。當容器的尺寸由於螢幕大小或視窗尺寸發生變化時，其中包含的條目也會被動態地調整。比如當容器尺寸變大時，其 中包含的條目會被展開以佔滿多餘的空白空間；當容器尺寸變小時，條目會被縮小以防止超出容器的範圍。彈性盒布局是與方向無關的。在傳統的布局方式 中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來排列。彈性盒布局並沒有這樣內在的方向限制，可以由開發人員自由操作。

相關盒模型文章：

CSS 怪異盒模型和標準盒模型執行個體詳解

彈性盒模型 flex 方法總結