建站
咨詢
售后
建站咨詢
新聞中心
Flexbox 是 CSS3 中的一種布局模式，它可以輕松地實(shí)現(xiàn)各種復(fù)雜的布局，相比于傳統(tǒng)的布局方式，如浮動(dòng)和定位，F(xiàn)lexbox 更加靈活、強(qiáng)大且易于使用，本文將詳細(xì)介紹 Flexbox 的屬性及其作用。
成都創(chuàng)新互聯(lián) - 服務(wù)器托管，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽(yáng)服務(wù)器托管，德陽(yáng)服務(wù)器托管，遂寧服務(wù)器托管，綿陽(yáng)服務(wù)器托管，四川云主機(jī)，成都云主機(jī)，西南云主機(jī)，服務(wù)器托管，西南服務(wù)器托管，四川/成都大帶寬，成都機(jī)柜租用，四川老牌ＩＤＣ服務(wù)商
容器屬性
1、display
display 屬性用于設(shè)置一個(gè)元素是否為彈性盒子容器，設(shè)置為 flex 或 inline-flex 的元素將成為彈性盒子容器。
.container {
display: flex;
}
2、flex-direction
flex-direction 屬性用于設(shè)置彈性盒子的主軸方向，默認(rèn)值為 row，表示水平方向，可以設(shè)置為 column，表示垂直方向。
.container {
flex-direction: column;
}
3、flex-wrap
flex-wrap 屬性用于設(shè)置彈性盒子的子元素是否換行，默認(rèn)值為 nowrap，表示不換行，可以設(shè)置為 wrap，表示換行。
.container {
flex-wrap: wrap;
}
4、justify-content
justify-content 屬性用于設(shè)置彈性盒子的子元素在主軸上的對(duì)齊方式，默認(rèn)值為 flex-start，表示左對(duì)齊，可以設(shè)置為 flex-end，表示右對(duì)齊；center，表示居中對(duì)齊；space-between，表示兩端對(duì)齊；space-around，表示均勻分布。
.container {
justify-content: center;
}
5、align-items
align-items 屬性用于設(shè)置彈性盒子的子元素在交叉軸上的對(duì)齊方式，默認(rèn)值為 stretch，表示拉伸以填充交叉軸，可以設(shè)置為 flex-start，表示上對(duì)齊；flex-end，表示下對(duì)齊；center，表示居中對(duì)齊；baseline，表示與基線對(duì)齊。
.container {
align-items: center;
}
6、align-content
align-content 屬性用于設(shè)置多行彈性盒子的子元素在交叉軸上的對(duì)齊方式，默認(rèn)值為 stretch，表示拉伸以填充交叉軸，可以設(shè)置為 flex-start，表示上對(duì)齊；flex-end，表示下對(duì)齊；center，表示居中對(duì)齊；space-between，表示兩端對(duì)齊；space-around，表示均勻分布。
.container {
align-content: space-between;
}
項(xiàng)目屬性
1、order
order 屬性用于設(shè)置彈性盒子的子元素的排列順序，數(shù)值越小，排列越靠前。
.item {
order: 2;
}
2、flex-grow
flex-grow 屬性用于設(shè)置彈性盒子的子元素在主軸上的放大比例，默認(rèn)值為 0，表示不放大，可以設(shè)置為正數(shù)或負(fù)數(shù)。
.item {
flex-grow: 1;
}
3、flex-shrink
flex-shrink 屬性用于設(shè)置彈性盒子的子元素在主軸上的縮小比例，默認(rèn)值為 1，表示縮小以適應(yīng)容器，可以設(shè)置為正數(shù)或負(fù)數(shù)。
.item {
flex-shrink: 0;
}
4、flex-basis
flex-basis 屬性用于設(shè)置彈性盒子的子元素在主軸上的初始大小，默認(rèn)值為 auto，表示根據(jù)內(nèi)容自動(dòng)計(jì)算寬度或高度，可以設(shè)置為具體數(shù)值或百分比。
.item {
flex-basis: 100px;
}
5、flex
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 的簡(jiǎn)寫(xiě)形式，默認(rèn)值為 0 1 auto，表示不放大、縮小以適應(yīng)容器、根據(jù)內(nèi)容自動(dòng)計(jì)算寬度或高度。
.item {
flex: 1;
}
6、align-self
align-self 屬性用于設(shè)置單個(gè)彈性盒子的子元素在交叉軸上的對(duì)齊方式，覆蓋容器的 align-items 屬性值。
.item {
align-self: center;
}
相關(guān)問(wèn)題與解答欄目
問(wèn)題1：為什么有時(shí)候設(shè)置了 flex-direction: column; 但是子元素還是按照 row 的方向排列？
答：這種情況可能是由于其他具有更高優(yōu)先級(jí)的選擇器覆蓋了 flex-direction 的值，可以嘗試提高容器選擇器的優(yōu)先級(jí)，或者檢查是否有其他樣式規(guī)則影響了子元素的排列方向。
問(wèn)題2：如何讓一個(gè)彈性盒子的子元素在交叉軸上居中對(duì)齊？
答：可以使用 align-items 屬性并設(shè)置為 center，如下所示：align-items: center;
分享題目：flex的屬性有哪些
標(biāo)題路徑：http://m.fisionsoft.com.cn/article/cdehhpe.html
