[CSS3] Flexbox

正常的佈局是塊元素從上到下(因爲佔用一行)
內聯元素從左到右.
但是flexbox是讓子項目儘量的改變高度寬度，用最好的方式適應各種的設備。

---

(1) Display: flex | inline-flex

flex: 按照 塊 伸縮
inline-flex: 內聯 伸縮

設爲Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。

【面試題】
除了display： inline block 將元素定義爲塊或者內聯還有什麼方法？

   display:flex | inline-flex

---

(2) Display: flex-flow

flex-flow: flex-direction flex-wrap

伸縮方向 和 伸縮換行

創建主軸

 flex-direction: 
                row  從左到右
                row-reverse 從右到左
                column 從上到下
                column-reverse 從下到上

---

創建測軸

 flex-wrap: 單行還是多行
            nowrap 單行顯示
            wrap   多行
            wrap-reverse 多行方向相反

---

(3) Justify-content

主軸對齊

   justify-content:
             flex-start 從起始位置
             flex-end
             center     從中間位置
             space-between
             space-around

---

(4) align-items align-self

測軸對齊方式： 與justify-content相對應

  align-items

.div{
    display: flex;
    display: -webkit-flex;
    font-size:3em;

    text-align: center;/*文字水平居中*/
    line-height: 100px;/*文字垂直居中*/

    border:1px solid #333;
    min-width:1024px;
    height:300px;
    flex-flow:row nowrap;

    justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/
}
p{  
    width:300px;
    height:100px;
    margin:10px;
    background: orange; 
    /*flex:1;*/
}

---

(5) order

伸縮文檔出現的順序

---

<div class="layout">
  <nav>Home</nav>

  <div class="center">
    <aside>aside</aside>
    <article>article</article>
    <div>p</div>
  </div>

  <footer>footer</footer>
</div>

body,html,div,nav,footer,aside,article{
    margin:0; padding:0;
}
.layout{
    min-width: 1000px;
    height:auto;
    margin:0 auto;
    font-size: 2em;
}
nav{
    height:40px;
    background-color: #333;
    margin-bottom: 10px;
}
.center{
    width:inherit;
    height:500px;
    display: flex;/**/
    flex-flow:row no-wrap;
    justify-content:flex-start;
    order:1;/*順序*/
}
/*.center*/
aside{
    flex:1; /*佔寬度爲1/4*/
    margin-right:10px;
    background:orange;
    order:3;/*順序3*/ 
}
article{
    flex:2;/*佔寬度爲1/2*/
    margin-right:10px;
    background:red;
    order:2;/*順序2*/
}
.center div:last-child{
    flex:1;/*佔寬度爲1/4*/
    margin-right:10px;
    background:green;
    order:1;/*順序1*/
}
/*.center*/
footer{
    height:40px;
    margin-top:10px;
    background-color: blue;
}

---

(6) 兼容性

display: box;             /* OLD - Android 4.4- */
display: -webkit-box;     /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;       /* OLD - Firefox 19- */
display: -ms-flexbox;     /* TWEENER - IE 10 */
display: -webkit-flex;   /* NEW - Chrome */
display: flex;           /* NEW,Opera 12.1, Firefox 20+ */