一敬尺、Flex布局是什么称杨?
Flex是Flexible Box的縮寫(xiě),意為"彈性布局"筷转,用來(lái)為盒狀模型提供最大的靈活性姑原。
任何一個(gè)容器都可以指定為Flex布局。
----注意呜舒,設(shè)為Flex布局以后锭汛,子元素的float、clear和vertical-align屬性將失效袭蝗。
容器的屬性
以下6個(gè)屬性設(shè)置在容器上唤殴。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1) flex-direction屬性決定主軸的方向(即項(xiàng)目的排列方向)。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4個(gè)值到腥。
row(默認(rèn)值):主軸為水平方向朵逝,起點(diǎn)在左端。
row-reverse:主軸為水平方向乡范,起點(diǎn)在右端配名。
column:主軸為垂直方向,起點(diǎn)在上沿晋辆。
column-reverse:主軸為垂直方向渠脉,起點(diǎn)在下沿。
2 )flex-wrap屬性
默認(rèn)情況下瓶佳,項(xiàng)目都排在一條線(又稱(chēng)"軸線")上芋膘。flex-wrap屬性定義,如果一條軸線排不下霸饲,如何換行为朋。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
(1)nowrap
(默認(rèn)):不換行。
(2)wrap
:換行厚脉,第一行在上方习寸。
(3)wrap-reverse
:換行,第一行在下方器仗。
3 )flex-flow
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式融涣,默認(rèn)值為row nowrap。
- justify-content屬性
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5個(gè)值精钮,具體對(duì)齊方式與軸的方向有關(guān)威鹿。下面假設(shè)主軸為從左到右。
flex-start(默認(rèn)值):左對(duì)齊
flex-end:右對(duì)齊
center: 居中
space-between:兩端對(duì)齊轨香,項(xiàng)目之間的間隔都相等忽你。
space-around:每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以臂容,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍科雳。
5 ) align-items屬性
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊根蟹。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5個(gè)值。具體的對(duì)齊方式與交叉軸的方向有關(guān)糟秘,下面假設(shè)交叉軸從上到下简逮。
flex-start:交叉軸的起點(diǎn)對(duì)齊。
flex-end:交叉軸的終點(diǎn)對(duì)齊尿赚。
center:交叉軸的中點(diǎn)對(duì)齊散庶。
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
stretch(默認(rèn)值):如果項(xiàng)目未設(shè)置高度或設(shè)為auto凌净,將占滿整個(gè)容器的高度悲龟。
6 ) align-content屬性
align-content
屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線冰寻,該屬性不起作用须教。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
該屬性可能取6個(gè)值。
flex-start
:與交叉軸的起點(diǎn)對(duì)齊斩芭。
flex-end
:與交叉軸的終點(diǎn)對(duì)齊轻腺。
center
:與交叉軸的中點(diǎn)對(duì)齊。
space-between
:與交叉軸兩端對(duì)齊秒旋,軸線之間的間隔平均分布约计。
space-around
:每根軸線兩側(cè)的間隔都相等。所以迁筛,軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch
(默認(rèn)值):軸線占滿整個(gè)交叉軸耕挨。