在規定彈性盒子之中的子級元素換行顯示之前父級元素必須是彈性盒子模型，也就是設定 display 為 flex
**如下：
結果：
flex-wrap：wrap ； 彈性容器為多行。該情況下彈性子項溢位的部分會被放置到新行，子項內部會發生斷行。
結果：
從上面的結果來看雖然子元素換行顯示了但是布局效果並不是很好，好的別著急我們接著往下看
css 語法：justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
屬性值：
flex-start 預設值。專案位於容器的開頭。
flex-end 專案位於容器的結尾。
center 專案位於容器的中心。
space-between 專案位於各行之間留有空白的容器內。
space-around 專案位於各行之前、之間、之後都留有空白的容器內。
initial 設定該屬性為它的預設值。
inherit 從父元素繼承該屬性。
justify-content的屬性值有很多，本次為大家介紹的是space-between也是在我們布局中比較好用的一中布局方式，缺點就是相容性不是很理想
廢話就不多說了，給大家試試效果
結果：
雖然效果已經很不錯了，但是細心的童鞋不難發現我們的子元素並沒有與父元素的底部平齊
css 語法 align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
stretch 預設值。元素被拉伸以適應容器。各行將會伸展以占用剩餘的空間。如果剩餘的空間是負數，該值等效於'flex-start'。在其它情況下 ，剩餘空間被所有行平分，以擴大它們的側軸尺寸。
center 元素位於容器的中心。各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊，保持彈性盒容器的側軸起始內 容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。（如果剩下的空間是負數，則各行會向兩個方向 溢位的相等距離。）
flex-start 元素位於容器的開頭。各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，之 後的每一行都緊靠住前面一行。
flex-end 元素位於容器的結尾。各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界， 之後的每一行都緊靠住前面一行。
space-between 元素位於各行之間留有空白的容器內。各行在彈性盒容器中平均分布。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效 於'flex-start'。在其它情況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈 性盒容器的側軸結束內容邊界，剩餘的行則按一定方式在彈性盒視窗中排列，以保持兩兩之間的空間相等。
space-around 元素位於各行之前、之間、之後都留有空白的容器內。各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。 如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'center'。在其它情況下，各行會按一定方式在彈性盒容器中排列，以 保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半。
屬性值有很多，本次介紹一下 space-between
結果：
非常快速的就完成了乙個非常完美的布局了，是不是呢。
小結：這樣的布局方式不會脫離標準文件流，所以就不會有需要清除浮動的問題
CSS3彈性盒布局
使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度，而且可以隨著瀏覽器的改變而改變。12 zh cn 33536 container 37 left sidebar 示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長...
CSS3彈性盒布局
使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度，而且可以隨著瀏覽器的改變而改變。1 2 335 36 37 示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。38 示...
CSS3,彈性盒Flex布局
2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。使用css3屬性必然會存在瀏覽器相容性讓我們看看哪些瀏覽器支援flex 瀏覽器相容性 一 flex布局是什麼？flex是flexi...