彈性布局

.box {

height: 300px;

background-color: #ccc;

/* 重點(diǎn)記住下面三個(gè)：display: flex; justify-content:center;align-items: center; */

/* 設(shè)置為flex容器 */

display: flex;

/* 設(shè)置(主軸)水平對(duì)齊方式 */

justify-content: center;

/* 設(shè)置(側(cè)軸)垂直對(duì)齊方式 */

align-items: center;

/* flex-direction: row; */

/* flex-wrap: wrap; */

/* 以上兩個(gè)的復(fù)合寫法如下 */

/* flex-flow:row-reverse wrap; */

/* align-content: stretch; */

}

.box>div {

/* 之前學(xué)的設(shè)置并排的方法 */

/* display: inline-block; */

/* float: left; */

width: 100px;

height: 100px;

background-color: red;

border: 1px solid black;

}

/* 清除浮動(dòng) */

/* .box::after{

content: none;

display: block;

clear: both;

} */

div1div2div3div4div5div6

flex-direction屬性用來控制上圖中伸縮容器中主軸的方向，同時(shí)也決定了伸縮項(xiàng)目的方向。

1.flex-direction:row;也是默認(rèn)值，即主軸的方向和正常的方向一樣，從左到右排列。

2.flex-direction:row-reverse;和row的方向相反，從右到左排列。

3.flex-direction:column;從上到下排列。

4.flex-direction:column-reverse;從下到上排列。 以上只針對(duì)ltr書寫方式，對(duì)于rtl正好相反了。

flex-wrap屬性控制伸縮容器是單行還是多行，也決定了側(cè)軸方向(新的一行的堆放方向)。

1.flex-wrap:nowrap;伸縮容器單行顯示，默認(rèn)值；

2.flex-wrap:wrap;伸縮容器多行顯示；伸縮項(xiàng)目每一行的排列順序由上到下依次。

3.flex-wrap:wrap-reverse;伸縮容器多行顯示，但是伸縮項(xiàng)目每一行的排列順序由下到上依次排列。

flex-flow屬性為flex-direction(主軸方向)和flex-wrap(側(cè)軸方向)的縮寫，兩個(gè)屬性決定了伸縮容器的主軸與側(cè)軸。

flex-flow: [flex-direction] [flex-wrap]; 默認(rèn)值為row nowrap

舉兩個(gè)栗子：

flex-flow:row;也是默認(rèn)值；主軸是行內(nèi)方向，單行顯示，不換行；

flex-flow:row-reverse wrap;主軸和行內(nèi)方向相反，從右到左，項(xiàng)目每一行由上到下排列(側(cè)軸)。

justify-content用于定義伸縮項(xiàng)目在主軸上面的的對(duì)齊方式，當(dāng)一行上的所有伸縮項(xiàng)目都不能伸縮或可伸縮但是已經(jīng)達(dá)到其最大長(zhǎng)度時(shí)，這一屬性才會(huì)對(duì)多余的空間進(jìn)行分配。當(dāng)項(xiàng)目溢出某一行時(shí)，這一屬性也會(huì)在項(xiàng)目的對(duì)齊上施加一些控制。

1.justify-content: flex-start;伸縮項(xiàng)目向主軸的起始位置開始對(duì)齊，后面的每元素緊挨著前一個(gè)元素對(duì)齊。

2.justify-content: flex-end;伸縮項(xiàng)目向主軸的結(jié)束位置對(duì)齊，前面的每一個(gè)元素緊挨著后一個(gè)元素對(duì)齊。

3.justify-content: center;伸縮項(xiàng)目相互對(duì)齊并在主軸上面處于居中，并且第一個(gè)元素到主軸起點(diǎn)的距離等于最后一個(gè)元素到主軸終點(diǎn)的位置。以上3中都是“捆綁”在一個(gè)分別靠左、靠右、居中對(duì)齊。

4.justify-content: space-between;伸縮項(xiàng)目平均的分配在主軸上面，并且第一個(gè)元素和主軸的起點(diǎn)緊挨，最后一個(gè)元素和主軸上終點(diǎn)緊挨，中間剩下的伸縮項(xiàng)目在確保兩兩間隔相等的情況下進(jìn)行平分。

5.justify-content:space-around;伸縮項(xiàng)目平均的分布在主軸上面，并且第一個(gè)元素到主軸起點(diǎn)距離和最后一個(gè)元素到主軸終點(diǎn)的距離相等，且等于中間元素兩兩的間距的一半。完美的平均分配，這個(gè)布局在阿里系中很常見。

align-items用來定義伸縮項(xiàng)目在側(cè)軸的對(duì)齊方式，這類似于[justify-content]屬性，但是是另一個(gè)方向。
(flex-directon和flex-wrap是一對(duì)，justify-content和align-items是一對(duì)，前者分別定義主軸和側(cè)軸的方向，后者分別定義主軸和側(cè)軸中項(xiàng)目的對(duì)齊方式)。

1.align-items:flex-start;伸縮項(xiàng)目在側(cè)軸起點(diǎn)邊的外邊距緊靠住該行在側(cè)軸起點(diǎn)的邊。

2.align-items:flex-end;伸縮項(xiàng)目在側(cè)軸終點(diǎn)邊的外邊距靠住該行在側(cè)軸終點(diǎn)的邊。

3.align-items:center;伸縮項(xiàng)目的外邊距在側(cè)軸上居中放置。

4.align-items:baseline;如果伸縮項(xiàng)目的行內(nèi)軸與側(cè)軸為同一條，則該值與[flex-start]等效。 其它情況下，該值將參與基線對(duì)齊。

5.align-items:stretch;伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器。此值會(huì)使項(xiàng)目的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下盡可能接近所在行的尺寸。

align-content屬性可以用來調(diào)準(zhǔn)伸縮行在伸縮容器里的對(duì)齊方式，這與調(diào)準(zhǔn)伸縮項(xiàng)目在主軸上對(duì)齊方式的[justify-content]屬性類似。只不過這里元素是以一行為單位。請(qǐng)注意本屬性在只有一行的伸縮容器上沒有效果。當(dāng)使用flex-wrap:wrap時(shí)候多行效果就出來了。

1.align-content: stretch;默認(rèn)值,各行將會(huì)伸展以占用剩余的空間。

2.其他可以參考justify-content用法。

一鍵復(fù)制

編輯

Web IDE

原始數(shù)據(jù)

按行查看

歷史

總結(jié)

以上是生活随笔為你收集整理的html弹性布局平均分配,flex弹性布局.html的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。