初步學習彈性佈局

今天剛剛學習了微信小程序，學習微信小程序以前首先得熟悉彈性佈局

若是把一個元素設置爲display:flex，它的全部子元素都成爲容器成員，稱之爲項目，而且，子元素的float,clear和vertical-align屬性都會失效。如下介紹彈性佈局設置在容器上的6種屬性。

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-content

• align-items

1.flex-direction 決定主軸（容器默認存在兩根軸：水平的主軸和垂直的交叉軸，項目默認沿主軸排列）的方向

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    body, html {
        height: 100%;
        background-color: pink;
    }
    .flex-row {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }
    .flex-item {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 20px;
    }
    .bc_green {
        background-color: #09ba07;
    }
    .bc_red {
        background-color: #f76160;
    }
    .bc_blue {
        background-color: #0faeff;
    }
</style>
<div class="section">
    <div class="flex-wrap flex-row">
        <div class="flex-item bc_green"></div>
        <div class="flex-item bc_red"></div>
        <div class="flex-item bc_blue"></div>
    </div>
</div>

效果圖以下：

代碼中將flex-direction設爲row,即主軸在水平方向，也是flex-direction的默認值，flex-direction能夠設置4個值，其餘三個值與其對應的效果圖以下：

flex-direction:row-reverse;

flex-direction:column;

flex-direction:column-reverse;

2.flex-wrap 定義項目在一條軸線排不下時決定它怎麼換行，代碼就不放出來了，就是直接在上面代碼的.flex-flow{}中添加flex-wrap屬性，它有3個取值

flex-wrap:nowrap; 不換行，也是默認值
 
 flex-wrap:wrap;換行，第一行在上面，排不下的繼續往下面排
 
 flex-wrap:wrap-reverse; 換行，和wrap相反，第一行在下面，排不下的往上方排

是否是很簡單

3.flex-flow 是flex-direction flex-wrap的簡寫形式，默認就是flex-flow:row nowrap,組合起來取值有12種狀況；

4.align-items 定義項目在交叉軸上如何對齊，仍是要放一小段代碼

<style>
    body, html {
        height: 100%;
        background-color: pink;
    }
    .flex-row {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
    .flex-item {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 20px;
    }
    .flex-item:nth-child(2n){
        height: 200px;
    }
    .bc_green {
        background-color: #09ba07;
    }
    .bc_red {
        background-color: #f76160;
    }
    .bc_blue {
        background-color: #0faeff;
    }
</style>
<div class="section">
    <div class="flex-wrap flex-row">
        <div class="flex-item bc_green"></div>
        <div class="flex-item bc_red"></div>
        <div class="flex-item bc_blue"></div>
        <div class="flex-item bc_green"></div>
        <div class="flex-item bc_red"></div>
        <div class="flex-item bc_blue"></div>
        <div class="flex-item bc_green"></div>
        <div class="flex-item bc_red"></div>
        <div class="flex-item bc_blue"></div>
    </div>
</div>

這段代碼就是在第一段代碼的基礎上添加了6個項目，選中全部的與flex-item類同一輩而且是2的倍數的元素，將高設置爲200px,並添加了align-items屬性，align-items:flex-start;交叉軸的起點對齊效果圖以下：

align-items: stretch;若是項目沒有設置高度，將會佔滿整個容器的高度，也是該屬性的默認值

align-items：flex-end;與交叉軸的終點對齊

align-items: center;與交叉軸的中點對齊

align-items: baseline;與項目中第一行文字的基線也就是底部對齊

5.align-content定義了多根軸線的對齊方式，若是項目只有一根軸線，該屬性不會起任何做用，這個屬性有6個取值，分別是：
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一
倍。
stretch（默認值）：軸線佔滿整個交叉軸。

這裏就不放圖了，看了上面的幾個這裏應該很容易理解，別問我爲何，由於懶

6.justify-content定義了項目在主軸上的對齊方式，該屬性有5個取值，分別是：
flex-start：左對齊，也是默認值
flex-end：右對齊
center： 居中
space-between：兩邊對齊，項目之間的間隔相等。
space-around：每一個項目兩側間隔相等。
不放效果圖，仍是由於懶

這裏只介紹了採用flex佈局的容器的屬性，後續可能會有更多，也有可能沒有（微笑臉），哈哈哈，若有不足，請不吝指出，謝謝。