建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
CSS 中的 Flex 布局是一種一維的布局模型，一次只能處理一個(gè)維度上的元素布局，一行或者一列。它給 flexbox 的子元素之間提供了強(qiáng)大的空間分布和對(duì)齊能力。下面就來(lái)看看如何在 CSS 中使用 Flex 布局！
基本概念
Flexbox 布局也叫 Flex 布局，彈性盒子布局。它的目標(biāo)是提供一個(gè)更有效地布局、對(duì)齊方式，并且能夠使父元素在子元素的大小未知或動(dòng)態(tài)變化情況下仍然能夠分配好子元素之間的間隙。
主要思想是使父元素能夠調(diào)整子元素的寬度、高度、排列方式，從而更好的適應(yīng)可用的布局空間。設(shè)定為flex布局的元素能夠放大子元素使之盡可能填充可用空間，也可以收縮子元素使之不溢出。
Flex布局更適合小規(guī)模的布局，可以簡(jiǎn)便、完整、響應(yīng)式的實(shí)現(xiàn)各種頁(yè)面布局。但是，設(shè)為Flex布局以后，其子元素的float?、clear?和vertical-align屬性將失效。Flex彈性盒模型的優(yōu)勢(shì)在于只需聲明布局應(yīng)該具有的?為，?不需要給出具體的實(shí)現(xiàn)?式，瀏覽器負(fù)責(zé)完成實(shí)際布局，當(dāng)布局涉及到不定寬度，分布對(duì)?的場(chǎng)景時(shí)，就要優(yōu)先考慮彈性盒布局。
Flex 布局是一個(gè)完整的模塊，它包括了一套完整的屬性。其中采用 Flex 布局的元素，稱(chēng)為 Flex 容器，簡(jiǎn)稱(chēng)"容器"。它的所有子元素就是容器成員，稱(chēng)為 Flex 項(xiàng)目，簡(jiǎn)稱(chēng)"項(xiàng)目"。
容器默認(rèn)存在兩個(gè)軸：水平軸（main axis）和垂直軸（cross axis），項(xiàng)目默認(rèn)沿主軸排列（水平軸）：
這里面涉及到了幾個(gè)概念，下面來(lái)看一下：
- main axis: Flex 父元素的主軸是指子元素布局的主要方向軸，它由屬性flex-direction來(lái)確定主軸是水平還是垂直的，默認(rèn)為水平軸。
- main-start & main-end: 分別表示主軸的開(kāi)始和結(jié)束，子元素在父元素中會(huì)沿著主軸從main-start到main-end排布。
- main size: 單個(gè)項(xiàng)目占據(jù)主軸的長(zhǎng)度大小。
- cross axis: 交叉軸，與主軸垂直。
- cross-start & cross-end: 分別表示交叉軸的開(kāi)始和結(jié)束。子元素在交叉軸的排布從cross-start開(kāi)始到cross-end。
- cross size: 子元素在交叉軸方向上的大小。
容器屬性
想要使用flex布局，首先需要給父元素指定為flex布局，這樣容器內(nèi)的元素才能實(shí)現(xiàn)flex布局：
.container {
display: flex | inline-flex;
}
這里有兩種方式可以設(shè)置flex布局，使用display: flex;?會(huì)生成一個(gè)塊狀的flex容器盒子，使用display: inline-flex;?會(huì)生成一個(gè)行內(nèi)的flex容器盒子。如果我們使用塊狀元素，比如div標(biāo)簽，就可以使用flex，如果使用行內(nèi)元素，就可以使用inline-flex。多數(shù)情況下，我們會(huì)使用 display: flex;。
父元素（容器）可以設(shè)置以下六個(gè)屬性：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1、flex-direction
flex-direction：主軸方向，它決定了容器內(nèi)元素排列方向，它有四個(gè)屬性值：
.container {
flex-direction: row | row-reverse | column | column-reverse;
}（1）flex-direction: row：默認(rèn)值，沿水平主軸從左到右排列，起點(diǎn)在左沿。
（2）flex-direction: row-reverse：沿水平主軸從右到左排列，起點(diǎn)在右沿。
（3）flex-direction: column：沿垂直主軸從上到下排列，起點(diǎn)在上沿。
（4）flex-direction: column-reverse：沿垂直主軸從下到上排列，起點(diǎn)在下沿。
2、flex-wrap
flex-wrap：容器內(nèi)元素是否可以換行，它有三個(gè)屬性值：
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}（1）flex-wrap: nowrap：默認(rèn)值，不換行。當(dāng)主軸的長(zhǎng)度是固定并且空間不足時(shí)，項(xiàng)目尺寸會(huì)隨之進(jìn)行調(diào)整，而不會(huì)換行。
（2）flex-wrap: wrap：換行，第一行在上面
（3）flex-wrap: wrap-reverse：換行，第一行在下面。
3、flex-flow
flex-flow? 是 flex-direction? 屬性和flex-wrap?屬性的簡(jiǎn)寫(xiě)，默認(rèn)為:flex-flow:row nowrap，用處不大，最好還是分開(kāi)來(lái)寫(xiě)。該屬性的書(shū)寫(xiě)格式如下：
.container {
flex-flow: ;
} 4、justify-content
justify-content：元素在主軸的對(duì)齊方式，它有五個(gè)屬性值：
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}這里以水平方向?yàn)橹鬏S進(jìn)行舉例，即flex-direction: row。
（1）justify-content : flex-start：默認(rèn)值，元素在主軸上左對(duì)齊（上對(duì)齊）。
（2）??justify-content : flex-end??：元素在主軸上右對(duì)齊（下對(duì)齊）。
（3）justify-content : center ：元素在主軸上居中對(duì)齊。
? ?
（4）justify-content : space-between：元素在主軸上兩端對(duì)齊，元素之間間隔相等
（5）justify-content : space-around ：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
5、align-items
align-item：元素在交叉軸上的對(duì)齊方式，它有五個(gè)屬性值：
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}這里以水平方向?yàn)橹鬏S進(jìn)行舉例，即flex-direction: row。
（1）align-item：flex-start：交叉軸的起點(diǎn)對(duì)齊（上面或左邊）。設(shè)置容器高度為 100px，項(xiàng)目高度分別為 20px、40px、60px、80px、100px，效果如圖所示：
（2）align-item：flex-end：交叉軸的終點(diǎn)對(duì)齊（下面或右邊）。設(shè)置容器高度為 100px，項(xiàng)目高度分別為 20px、40px、60px、80px、100px，效果如圖所示：
（3）align-item：center：交叉軸的中點(diǎn)對(duì)齊。設(shè)置容器高度為 100px，項(xiàng)目高度分別為 20px、40px、60px、80px、100px，效果如圖所示：
（4）align-item：stretch：默認(rèn)值、如果元素未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度。假設(shè)容器高度設(shè)置為 100px，而項(xiàng)目沒(méi)有設(shè)置高度，則項(xiàng)目的高度也為 100px：
（5）align-item：baseline：以元素的第一行文字的基線對(duì)齊
6.、align-content
align-content：多根軸線對(duì)齊方式。如果元素只有一根軸線，該屬性不起作用。它有六個(gè)屬性值：
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}那這個(gè)軸線數(shù)怎么確定呢？實(shí)際上這主要是由flex-wrap?屬性決定的，當(dāng)flex-wrap? 設(shè)置為 nowrap? 時(shí)，容器僅存在一根軸線，因?yàn)轫?xiàng)目不會(huì)換行，就不會(huì)產(chǎn)生多條軸線。當(dāng) flex-wrap? 設(shè)置為 wrap 時(shí)，容器可能會(huì)出現(xiàn)多條軸線，這時(shí)就需要去設(shè)置多條軸線之間的對(duì)齊方式。
這里以水平方向?yàn)橹鬏S時(shí)舉例，即：flex-direction: row; flex-wrap: wrap;
（1）align-content: stretch：默認(rèn)值，軸線占滿(mǎn)整個(gè)交叉軸。這里我們先設(shè)置每個(gè)項(xiàng)目都是固定寬度，效果如下：
下面就去掉每個(gè)項(xiàng)目的高度，它會(huì)占滿(mǎn)整個(gè)交叉軸，效果如下：
（2）align-content: flex-start：從交叉軸開(kāi)始位置填充。
（3）align-content: flex-end：從交叉軸結(jié)尾位置填充。
（4）align-content: center：與交叉軸中點(diǎn)對(duì)齊。
（5）align-content: space-between：與交叉軸兩端對(duì)齊，軸線之前的間隔平均分布。
（6）align-content: space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
項(xiàng)目屬性
子元素有以下六個(gè)屬性：
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1、order
order?屬性用來(lái)定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。使用形式如下：
.item {
order: ;
} 2、flex-basis
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間，瀏覽器會(huì)根據(jù)這個(gè)屬性來(lái)計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。使用形式如下：
.item {
flex-basis: | auto;
} 當(dāng)主軸設(shè)置為水平時(shí)，當(dāng)設(shè)置了 flex-basis，設(shè)置的項(xiàng)目寬度值會(huì)失效，flex-basis? 需要跟 flex-grow? 和 flex-shrink 配合使用才能生效。有兩種特殊的值：
- 當(dāng)flex-basis 值為 0 % 時(shí)，項(xiàng)目尺寸會(huì)被認(rèn)為是0，因此無(wú)論項(xiàng)目尺寸設(shè)置多少都用；
- 當(dāng)flex-basis 值為 auto 時(shí)，則跟根據(jù)尺寸的設(shè)定值來(lái)設(shè)置大小。
3、flex-grow
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間時(shí)也不放大。
當(dāng)容器中所有的項(xiàng)目都設(shè)置了flex-basis屬性時(shí)，如果仍有是剩余的空間，設(shè)置的 flex-grow 屬性才能生效。
- 如果所有項(xiàng)目的flex-grow屬性都設(shè)置為1，那么它們會(huì)均分剩余的空間，如下圖所示：
- 如果其中一個(gè)項(xiàng)目的flex-grow屬性設(shè)置為2，其他均為1，那么它占據(jù)的剩余空間就是其他項(xiàng)目的兩倍，如下圖所示：
4、flex-shrink
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。不能設(shè)置負(fù)值，使用形式如下：
.item {
flex-shrink: ;
} - 如果所有項(xiàng)目的flex-shrink 屬性都為 1，當(dāng)空間不足時(shí)，都將等比例縮小，如下圖所示：
- 如果一個(gè)項(xiàng)目的flex-shrink 屬性為 0，其他項(xiàng)目都為 1，則空間不足時(shí)，前者不縮小，如下圖所示：
5、flex
flex?屬性是flex-grow?, flex-shrink? 和 flex-basis?的簡(jiǎn)寫(xiě)，后兩個(gè)屬性可選。默認(rèn)值為：flex:0 1 auto。使用形式如下：
.item{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}對(duì)于flex的取值有幾種常用的特殊情況：
（1）默認(rèn)值：flex:0 1 auto，即在有剩余空間時(shí)，只放大不縮小。
.item {
flex:0 1 auto;
}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}（2）flex: none，即有剩余空間時(shí)，不放大也不縮小，最終尺寸通常表現(xiàn)為最大內(nèi)容寬度。
.item {
flex:0 0 auto;
}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}（3）flex: 0，即當(dāng)有剩余空間時(shí)，項(xiàng)目寬度為其內(nèi)容的寬度，最終尺寸表現(xiàn)為最小內(nèi)容寬度。
.item {
flex:0 1 0%;
}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;
}（4）flex: auto，即元素尺寸可以彈性增大，也可以彈性變小，具有十足的彈性，但在尺寸不足時(shí)會(huì)優(yōu)先最大化內(nèi)容尺寸。
.item {
flex:1 1 auto;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}（5）flex: 1，即元素尺寸可以彈性增大，也可以彈性變小，具有十足的彈性，但是在尺寸不足時(shí)會(huì)優(yōu)先最小化內(nèi)容尺寸。
.item {
flex:1 1 0%;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}6、align-self
align-self?屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items?屬性。默認(rèn)值為auto?，表示繼承父元素的align-items?屬性，如果沒(méi)有父元素，則等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}這個(gè)屬性和align-items?屬性的效果是一樣的，只不過(guò)這個(gè)屬性只對(duì)單個(gè)項(xiàng)目生效，而align-items是對(duì)容器中所有的項(xiàng)目生效。
設(shè)置容器的align-items?屬性為flex-start?，容器中第三個(gè)項(xiàng)目的align-self?屬性為flex-end，效果如下：
本文題目：十分鐘徹底掌握CSSFlex布局
當(dāng)前網(wǎng)址：http://www.5511xx.com/article/cdgoccd.html
