Flexbox可以為你文檔內(nèi)的元素提供高效的布局垒探、對齊和空間分配方式.

FlexBox初始化

將元素初始化為彈性盒模型非常簡單间涵，只需要在父級元素上將display屬性設(shè)置為flex或者inline-flex即可厢呵。

<div class="container">
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
</div>
<style>
      .container {
            display: flex;   /* inline-flex */
            outline: 1px dashed;
        }
     .list {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 8px;
        }
</style>

上方div塊本身是block元素，垂直排列；聲明為flex模型之后，變?yōu)閒lex默認(rèn)的橫向排列瓷马。div.container稱為 彈性容器, div.list則為其彈性盒子子元素

更改為flex之后的div排列

Flex盒模型容器屬性

1）flex-direction彈性伸縮方向

效果對比一下

**flex-direction: row;**

**flex-direction: row-reverse;**

**flex-direction: column;**

**flex-direction: column-reverse;**

2）flex-wrap彈性換行

默認(rèn)沒有換行跨晴，子元素全部壓縮在一行中欧聘，而設(shè)置wrap屬性，則可以控制其換行坟奥。

如container彈性容器有9個子元素爱谁，對比效果如下：
不換行的情況下，子元素會被壓縮

**flex-wrap: nowrap;**

**flex-wrap: wrap;**

**flex-wrap: wrap-reverse;**

3）flex-flow彈性流

是flex-direction和flex-wrap屬性的簡寫形式孝偎，格式為：flex-flow: [flex-direction] [flex-wrap];
如：

<div class="container-flow">
        <div class="list">1</div>
        <div class="list">2</div>
        <div class="list">3</div>
        <div class="list">4</div>
        <div class="list">5</div>
        <div class="list">6</div>
        <div class="list">7</div>
        <div class="list">8</div>
        <div class="list">9</div>
</div>
<style>
.container-flow {
            display: flex;
            flex-flow: column wrap;
            height: 400px;
}
.list {
      width: 100px;
      heght: 100px;
}
</style>

每個子元素按縱軸方向排列访敌，在一列不能容納的情況下?lián)Q行顯示，如圖：

**flex-flow:column wrap;**

各個屬性之間還有更多的組合形式衣盾，多去嘗試寺旺。

4）justify-content內(nèi)容對齊

設(shè)置子元素的對齊方式。

space-around可能不太好理解阻塑，對照著效果圖比較一下：

**justify-content: flex-end**

**justify-content: center**

**justify-content: space-between**

**justify-content: space-around**

5）align-items元素對齊

與justify-content區(qū)別為前者為橫軸基準(zhǔn)，后者align-items則以縱軸為基準(zhǔn)果复。其默認(rèn)值為stretch.

<div class="container-align-items">
        <!-- 默認(rèn)： stretch -->
        <h1 class="item">這是第1個子元素</h1>
        <h3 class="item">這是第2個子元素</h3>
        <h5 class="item">這是第3個子元素</h5>
</div>
<style>
      .container-align-items {
            outline: 1px dashed;
            height: 200px;
            /* 聲明flex box*/
            display: flex;
            /* default：stretch*/
            align-items: stretch;
        }
        .item {
            background-color: lightblue;
            margin: 5px;
        }
</style>

如上三個子元素走搁，當(dāng)align-items取不同的值時独柑，元素分布：

**align-items: stretch;**

**align-items: flex-start;**

**align-items: flex-end;**

**align-items: center;**

**align-items: baseline;**

對于baseline的理解可能可以這樣，其以內(nèi)容的最底端為基準(zhǔn)線來對齊元素私植。

6）align-content縱向內(nèi)容對齊

設(shè)置在多行子元素的縱向排列, 要先將flex-wrap屬性設(shè)置為換行wrap忌栅。其縱向填充空間，默認(rèn)為stretch值曲稼。

<div class="container-align-content">
        <!-- 默認(rèn)stretch -->
        <h1 class="content">這是第1個子元素</h1>
        <h2 class="content">這是第2個子元素</h2>
        <h3 class="content">這是第3個子元素</h3>
        <h4 class="content">這是第4個子元素</h4>
        <h5 class='content'>這是第5個子元素</h5>
        <h6 class='content'>這是第6個子元素</h6>
</div>
<style>
    .container-align-content {
        outline: 1px dashed;
        height: 200px;
        /* 聲明flex box*/
        display: flex;
        /* default：stretch*/
        align-content: stretch;
        /*設(shè)置換行*/
        flex-wrap: wrap;
    }
    .content {
        background-color: lightblue;
        margin: 5px;
    }
</style>

當(dāng)如上六個子元素，隨著align-content值得變化如圖：

**align-content: stretch;**

**align-content: flex-start;**

**align-content: flex-end;**

**align-content: center;**