思維導(dǎo)圖

image

<a name="6ab8332f"></a>

flex 布局

<a name="226b0912"></a>

類型

• [ ] display: flex;(本文章為此為主)
• [ ] display欲侮；inline-flex;

<a name="24d67862"></a>

屬性

• [ ] 父節(jié)點(diǎn) 容器flex-container
• [ ] 子節(jié)點(diǎn) flex-item

<a name="e51b446b"></a>

父節(jié)點(diǎn)容器

1. flex-direction 主軸方向(一般水平方向)
2. flex-warp 處理一行排列不足的問題
3. flex-flow 1和2的簡(jiǎn)寫（flex-flow: row nowrap）
4. justify-content 主軸(水平方向)對(duì)齊方式
5. align-items 與主軸的交叉軸（豎方向）對(duì)齊方式
6. align-content 多行在交叉軸軸上的對(duì)齊方式

<br />
<a name="f3640081"></a>

子節(jié)點(diǎn)項(xiàng)目

1. order 值是整數(shù)崭闲，默認(rèn)為0，整數(shù)越小威蕉，item排列越靠前
2. flex-grow 是其他item的放大倍數(shù)
3. flex-shrink 但空間不足刁俭，按照比例被消化, 需在父節(jié)點(diǎn)容器中設(shè)置flex-basis寬度
4. flex-basis 規(guī)定item項(xiàng)目的寬度
5. flex 是flex-grow flex-shrink flex-basis的總和
6. align-self 允許item自己在交叉軸(豎方向)有對(duì)齊方式

<a name="e51b446b"></a>

父節(jié)點(diǎn)容器

1. flex-direction 主軸方向(一般水平方向)
2. flex-warp 處理一行排列不足的問題
3. flex-flow 1和2的簡(jiǎn)寫（flex-flow: row nowrap）
4. justify-content 主軸(水平方向)對(duì)齊方式
5. align-items 與主軸的交叉軸（豎方向）對(duì)齊方式
6. align-content 多行在交叉軸軸上的對(duì)齊方式

html案例代碼：

<div class="flex-container">
    <div class="flex-item red">
        1
    </div>
    <div class="flex-item green">
        2
    </div>
    <div class="flex-item yellow">
        3
    </div>
    <div class="flex-item black">
        4
    </div>
</div>

css案例代碼：

    html,body{
        background: #f7f7f7;
    }
    .flex-container{
        display: flex
        color: #fff;
    }
    .flex-item{
        width: 150px;
        height: 100px;
    }
    .red{
        background: red;
    }
    .green{
        background: green;
    }
    .yellow{
        background: yellow;
    }
    .black{
        background: black;
    }

image.png

<a name="d41d8cd9"></a>

flex-direction

決定主軸(一般是x軸)的方向，即項(xiàng)目排列的方向韧涨，有四個(gè)可能的值：row(默認(rèn))| row-reverse | column | column-reverse

<br />

• row:主軸為水平方向牍戚，項(xiàng)目沿主軸從左至右排列
• column：主軸為豎直方向，項(xiàng)目沿主軸從上至下排列
• row-reverse：主軸水平虑粥，項(xiàng)目從右至左排列如孝，與row反向
• column-reverse：主軸豎直，項(xiàng)目從下至上排列娩贷，與column反向

.flex-container{
    display: flex;
    height: 100px;
    flex-direction: row; /* 1 */
    flex-direction: column; /*  2*/
    flex-direction: row-reverse; /*  3*/
    flex-direction: column-reverse;/* 4*/
    color: #fff;
}
.flex-item{
    flex: 1
}

image

<a name="flex-wrap"></a>

flex-wrap

默認(rèn)情況下第晰，item排列在一條線上，即主軸上彬祖，flex-wrap決定當(dāng)排列不下時(shí)是否換行以及換行的方式茁瘦，可能的值nowrap(默認(rèn)) | wrap | wrap-reverse

• nowrap：自動(dòng)縮小項(xiàng)目，不換行<br />
• wrap：換行涧至，且第一行在上方<br />
• wrap-reverse：換行腹躁，第一行在下面

.flex-container{
    display: flex;
    color: #fff;
    flex-wrap: nowrap; /* 1 */
    flex-wrap: wrap; /* 2 */
    flex-wrap: wrap-reverse; /* 3 */
}
.flex-item{
    width: 150px;
    height: 100px;
}
.red{
    width: 300px;   
}

備注： flex-item寬度定義分別是300px 150px 150px 150px; 所以按照比例2：1：1：1來分割父節(jié)點(diǎn)寬度，實(shí)際寬度為 150px 75px 75px 75px (合計(jì)375px)

image

<a name="flex-flow"></a>

flex-flow

是flex-direction和flex-wrap的簡(jiǎn)寫形式南蓬，如：row wrap | column wrap-reverse等纺非。默認(rèn)值為row nowrap，即橫向排列 不換行赘方。

.flex-container{
    flex-flow: row nowrap;
}

組合：

第一種：當(dāng)flex-wrap設(shè)置為nowrap時(shí)踩衩，屬性(寬度比例，非px實(shí)際寬度)按照flex-direction來排列

image

第二種：當(dāng)flex-wrap設(shè)置為wrap時(shí)，item則按照實(shí)際寬度排列驱富，不足則到下行

image

第三種：當(dāng)flex-wrap設(shè)置為wrap-reverse時(shí)锚赤， item則按照實(shí)際寬度排列，不足則到上行

image

<a name="justify-content"></a>

justify-content

非常重要褐鸥，決定item在主軸上的對(duì)齊方式线脚，可能的值有flex-start（默認(rèn)），flex-end晶疼，center酒贬，space-between，space-around翠霍。

當(dāng)主軸沿水平方向時(shí)，具體含義為

• flex-start：左對(duì)齊
• flex-end：右對(duì)齊
• center：居中對(duì)齊
• space- between：兩端對(duì)齊
• space-around：沿軸線均勻分布

備注： 當(dāng)項(xiàng)目item不滿父節(jié)點(diǎn)item-container時(shí)蠢莺，flex-start, flex-end不起到作用

.flex-container{
    justify-content: flex-start; /* 1 */
    justify-content: flex-end; /* 2 */
    justify-content: center; /* 3 */
    justify-content: space-between; /* 4 */
    justify-content: space-around; /* 5 */
}
.flex-item{
    width: 50px;
    height:50px;
}

image

<a name="align-items"></a>

align-items

決定了item在交叉軸上(Y軸)的對(duì)齊方式寒匙，可能的值有flex-start | flex-end | center | baseline | stretch

當(dāng)主軸水平(Y軸)時(shí)，其具體含義為：

• flex-start：頂端對(duì)齊
• flex-end：底部對(duì)齊
• center：豎直方向上居中對(duì)齊
• baseline：item第一行文字的底部對(duì)齊
• stretch：當(dāng)item未設(shè)置高度時(shí)躏将，item將和容器等高對(duì)齊

備注：父節(jié)點(diǎn)flex-container與子節(jié)點(diǎn)flex-item存在高度差锄弱，才能起到作用

.flex-container{
    height: 200px;
    align-items: flex-start; /* 1 */
    align-items: flex-end; /* 2 */
    align-items: center; /* 3 */
    align-items: baseline; /* 4 */
    align-items: stretch; /* 5 */
}
.flex-item{
    height: 100px;
}
.red,.green{
    font-size: 14px;
}

image

<a name="align-content"></a>

align-content

該屬性定義了當(dāng)有多根主軸時(shí)，即item不止一行時(shí)祸憋，多行在交叉軸軸上的對(duì)齊方式会宪。注意當(dāng)有多行時(shí)，定義了align-content后蚯窥，align-items屬性將失效掸鹅。

align-content可能值含義如下（假設(shè)主軸為水平方向）：

• flex-start：左對(duì)齊
• flex-end：右對(duì)齊
• center：居中對(duì)齊
• space- between：兩端對(duì)齊
• space-around：沿軸線均勻分布
• stretch：各行將根據(jù)其flex-grow值伸展以充分占據(jù)剩余空間

備注：1、設(shè)置flex-wrap：wrap拦赠，不然默認(rèn)nowrap按照比例排滿一行巍沙。<br /> 2、父節(jié)點(diǎn)flex-container與子節(jié)點(diǎn)flex-item存在高度差荷鼠，才能起到作用<br /><br />

.flex-container{
    flex-wrap: wrap;
    height:300px;
    background: #969799;
    align-content: flex-start; /* 1 */
    align-content: flex-end; /* 2 */
    align-content: center; /* 3 */
    align-content: space-between; /* 4 */
    align-content: space-between; /* 5 */
    align-content: stretch; /* 6 */
}

image

<a name="f3640081"></a>

子節(jié)點(diǎn)項(xiàng)目

item的屬性在item的style中設(shè)置句携。item共有如下六種屬性

• order 值是整數(shù)，默認(rèn)為0允乐，整數(shù)越小矮嫉，item排列越靠前
• flex-grow 是其他item的放大倍數(shù)
• flex-shrink 但空間不足，按照比例被消化,需在父節(jié)點(diǎn)容器中設(shè)置flex-basis寬度
• flex-basis 規(guī)定item項(xiàng)目的寬度
• flex 是flex-grow flex-shrink flex-basis的總和
• align-self 允許item自己在交叉軸(豎方向)有對(duì)齊方式

<a name="order"></a>

order

order的值是整數(shù)牍疏，默認(rèn)為0蠢笋，整數(shù)越小，item排列越靠前

.flex-container{
    flex-flow: wrap;
}
.flex-items{
  order:1;
}

<a name="flex-grow"></a>

flex-grow

定義了當(dāng)flex容器有多余空間時(shí)麸澜，item是否放大挺尿。默認(rèn)值為0，即當(dāng)有多余空間時(shí)也不放大；可能的值為整數(shù)编矾，表示不同item的放大比例

備注：item項(xiàng)目未規(guī)定寬度熟史，則分配一行寬度，即使規(guī)定了寬度也分配多余空間

.flex-item{
    flex-grow: 1;
}
/* 1 */
.flex-contanier{
    flex-wrap: wrap;
}
/* 2 */
.flex-contanier{
    flex-wrap: nowrap;
}

image

<a name="flex-shrink"></a>

flex-shrink

定義了當(dāng)容器空間不足時(shí)窄俏，item是否縮小蹂匹。默認(rèn)值為1，表示當(dāng)空間不足時(shí)凹蜈，item自動(dòng)縮小限寞，其可能的值為整數(shù)，表示不同item的縮小比例仰坦。

備注：這個(gè)比較懵逼履植，待解析

<a name="flex-basis"></a>

flex-basis

表示項(xiàng)目在主軸上占據(jù)的空間，默認(rèn)值為auto悄晃。

.red{
    flex-basis: 100px;
}
.green {
    flex-basis: 100px;
}

image

<a name="flex"></a>

flex

flex屬性是flex-grow玫霎、flex-shrink和flex-basis三屬性的簡(jiǎn)寫總和

具體查看以上三個(gè)

<a name="align-self"></a>

align-self

align-self屬性允許item有自己獨(dú)特的在交叉軸上的對(duì)齊方式，它有六個(gè)可能的值妈橄，默認(rèn)值為auto

• auto：和父元素align-self的值一致
• flex-start：頂端對(duì)齊
• flex-end：底部對(duì)齊
• center：豎直方向上居中對(duì)齊
• baseline：item第一行文字的底部對(duì)齊
• stretch：當(dāng)item未設(shè)置高度時(shí)庶近，item將和容器等高對(duì)齊

備注：與父節(jié)點(diǎn)flex-container中的align-item, align-content同個(gè)意思，不同的是align設(shè)置的是單個(gè)的眷蚓，而align-items設(shè)置的<br /><br />

.green{
    align-self: auto;
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: baseline;
    align-self: stretch;
}

image

備注：align-self: baseline; align-self: stretch; 與1 2一樣在此不做多介紹鼻种，可以參考align-items

總結(jié)

在實(shí)際項(xiàng)目中，關(guān)于flex這么多屬性沙热，能用到的比較少叉钥，常用的就那幾個(gè)，記住這幾個(gè)基本在項(xiàng)目開發(fā)中能夠很好的實(shí)現(xiàn)布局

常用屬性

• justify-content
• align-items
• flex

有不足之處，請(qǐng)?jiān)u論留言... 謝謝