今天我們簡(jiǎn)單談一下彈性盒，僅限于相對(duì)父元素的屬性淺談酗捌。
2009年，w3c提出了一種新的方案，F(xiàn)lex布局胖缤，它可以簡(jiǎn)便尚镰、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局哪廓。目前它已得到所有瀏覽器的支持狗唉，這意味著現(xiàn)在就能很安全地使用這項(xiàng)功能。
先來介紹一下什么是flex涡真，flex是flex box的縮寫分俯，意為“彈性布局”，用來為盒裝模型提供最大的靈活性哆料。
任何一個(gè)容器都可以指定為flex布局：

.box{
    display:flex;
}

行內(nèi)元素也可以使用flex布局：

.box{
    display:inline-flex;
}

注意８准簟！剧劝！設(shè)為flex布局之后橄登，子元素的float、clear和vertical-align屬性將失效讥此。
我們先設(shè)置幾個(gè)盒子標(biāo)簽

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

我們給這些盒子設(shè)置一個(gè)樣式拢锹，便于看的清楚

.box{
    width: 500px;
    height: 200px;
    background: red;
}
.box div{
    width: 60px;
    height: 30px;
    background: pink;
    border: 1px solid rgb(27, 25, 25);
}

都知道塊元素的特點(diǎn)是獨(dú)占一行，所以在不給它設(shè)置任何其他屬性之前他都是獨(dú)占一行的：

div.png

我們先給他設(shè)置一個(gè)彈性布局：

    .box{
        display: flex;
    }

看一下效果：

flex.png

可以看到它和浮動(dòng)有點(diǎn)類似萄喳，脫離標(biāo)準(zhǔn)文檔流卒稳，默認(rèn)排到一排。

我們?cè)賮砜匆幌滤加心男傩裕?br> 1他巨、flex-direction
它決定主軸方向即項(xiàng)目的排列方式
①row:此為默認(rèn)值充坑，主軸為水平方向，起點(diǎn)在左端染突。和不作任何設(shè)置的情況下相同捻爷；
②row-reverse:主軸為水平方向，起點(diǎn)在右端份企。

.box{
      display: flex;
      flex-direction: row-reverse;
}

實(shí)現(xiàn)效果是這樣的：

row-reverse.png

③column：主軸為垂直方向也榄，起點(diǎn)在頂端。

.box{
    display: flex;
    flex-direction: column;
}

是這樣的：

column.png

④column-reverse：主軸為垂直方向司志，起點(diǎn)在底部甜紫。

.box{
    display: flex;
    flex-direction: column-reverse;
}

column-reverse.png

2、flex-wrap
是否換行
默認(rèn)情況下骂远，項(xiàng)目都排在一條線上（軸線）囚霸。
flex-wrap屬性定義，如果在一條軸線上排不下激才，如何換行拓型。
它可以取三個(gè)值：
①nowrap默認(rèn)值额嘿，在不設(shè)置的情況下默認(rèn)不換行：

nowrap.png

②wrap
換行，第一行在上方

.box{
    display: flex;
    flex-wrap: wrap;
}

wrap.png

③wrap-reverse
換行吨述，第一行在下方

.box{
     display: flex;
    flex-wrap: wrap-reverse;
}

wrap-reverse.png

3岩睁、flex-flow
是flex-direction和flex-wrap的綜合寫法，默認(rèn)值為row nowrap揣云。
4捕儒、justify-content
定義了項(xiàng)目在主軸上的對(duì)齊方式
①flex-start左對(duì)齊

.box{
    display: flex;
    justify-content: flex-start;
}

flex-start.png

②flex-end右對(duì)齊

    .box{
        display: flex;
         justify-content: flex-end;
    }

flex-end.png

③center居中

.box{
    display: flex;
    justify-content: center;
}

image.png

④space-between兩端對(duì)齊，項(xiàng)目之間間隔相等

.box{
    display: flex;
    justify-content: space-between;
}

image.png

⑤space-around每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等邓夕。所以項(xiàng)目之間的間隔比項(xiàng)目與邊距的間隔大一倍

.box{
    display: flex;
    justify-content: space-around;
}

image.png

5刘莹、align-items垂直方向?qū)R方式（適用于單行）
當(dāng)設(shè)為center時(shí)居中

.box{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

image.png

6、align-content
適用于多行時(shí)的垂直方向?qū)R方式焚刚。

今天就簡(jiǎn)單介紹到這点弯。
小編能力有限，存在不足或不全矿咕，請(qǐng)大家指出抢肛，共同學(xué)習(xí)與交流。