1 .container編譯之後的效果很明顯，介面的布局也很合理，看起來很清晰。那麼究竟這個屬性是幹嘛用的呢？
flex是flexible box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。
採用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱"專案"。容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
以下6個屬性設定在容器上：
flex-direction1 .box屬性可選值的範圍為row(預設)沿水平主軸由左向右排列、row-reverse沿水平主軸由右向左排列、column沿垂直主軸右上到下和column-reverse。
flex-wrap1 .box
屬性可選值的範圍為nowrap(預設)不換行、wrap換行（第一行在上方）和wrap-reverse（***~）
flex-flow
1 .box
寫法屬性中，將上述兩種方法的值用||連線即可
justify-content
1 .box
專案在主軸上的對齊方式(主軸究竟是哪個軸要看屬性flex-direction的設定了)
flex-start：在主軸上由左或者上開始排列
flex-end：在主軸上由右或者下開始排列
center：在主軸上居中排列
space-between：在主軸上左右兩端或者上下兩端開始排列
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
1 .box
這裡面直接上說明的更清楚一些
以上介紹完了容器中的屬性，下面說一下容器中專案的屬性：
1 .item
1 .item
1 .item
1 .item
1 .item
1 .item容器屬性和專案屬性是可以配合使用的，用法類似於css的行內式和嵌入式的道理一樣。希望你可以在實際應用中熟練使用。
CSS屬性 display 顯示屬性
演示示例 visibility 屬性?該css屬性用來設定物件如何顯示。的預設值都為 inline。值 block none inline inline block list item table header group table footer group inherit 可用值值的說明 blo...
css樣式display屬性
值 描述none 此元素不會被顯示。block 此元素將顯示為塊級元素，此元素前後會帶有換行符。inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符。inline block 行內塊元素。css2.1 新增的值 list item 此元素會作為列表顯示。run in 此元素會根據上下文作...
CSS 布局 display 屬性
display 屬性規定是否 如何顯示元素。每個 html 元素都有乙個預設的 display 值，具體取決於它的元素型別。大多數元素的預設 display 值為 block 或 inline。塊級元素總是從新行開始，並佔據可用的全部寬度 盡可能向左和向右伸展 內聯元素不從新行開始，僅占用所需的寬度...