flex弹性盒子模型
目錄
1.彈性盒子模型可以以任意父容器為flex模型
2.他的布局位置可以在父容器中或在自身屬性中
3.flex布局的優(yōu)點(diǎn)
1.彈性盒子模型可以以任意父容器為flex模型
2.他的布局位置可以在父容器中或在自身屬性中
父容器:
(1)flex-direction 屬性:屬性決定主軸的方向(即項(xiàng)目的排列方向)
屬性值:
row(默認(rèn)值):主軸為水平方向,起點(diǎn)在左端。row-reverse:主軸為水平方向,起點(diǎn)在右端column:主軸為垂直方向,起點(diǎn)在上沿column-reverse:主軸為垂直方向,起點(diǎn)在下沿(2)flex-wrap屬性默認(rèn)情況下,項(xiàng)目都排在一條線(又稱"軸線")上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。
屬性值:
nowrap(默認(rèn)):不換行。wrap:換行,第一行在上方。wrap-reverse:換行,第一行在下方。(3)flex-flow屬性:flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認(rèn)值為row nowrap
(4)justify-content屬性:定義了項(xiàng)目在主軸上的對齊方式。(水平方向)
屬性值:
flex-start(默認(rèn)值):左對齊flex-end:右對齊center: 居中space-around:每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。space-between:兩端對齊,項(xiàng)目之間的間隔都相等。(5)align-items屬性定義項(xiàng)目在交叉軸上如何對齊。(垂直方向)
屬性值:
flex-start:交叉軸的起點(diǎn)對齊。flex-end:交叉軸的終點(diǎn)對齊center:交叉軸的中點(diǎn)對齊baseline: 項(xiàng)目的第一行文字的基線對齊tretch(默認(rèn)值):如果項(xiàng)目未設(shè)置高度或設(shè)為auto,將占滿整個(gè)容器的高度(6)align-content屬性:定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線,該屬性不起作用。
屬性值
flex-start:與交叉軸的起點(diǎn)對齊。flex-end:與交叉軸的終點(diǎn)對齊。center:與交叉軸的中點(diǎn)對齊。space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。space-around:每根軸線兩側(cè)的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。stretch(默認(rèn)值):軸線占滿整個(gè)交叉軸。(height: auto時(shí)有效)作為自身屬性:
(1)order屬性(排序)
定義項(xiàng)目的排列順序。數(shù)值越小,排列越靠前,默認(rèn)為0。(2)flex屬性 設(shè)置彈性盒子的子元素如何分配空間。
flex:6; ?/* 占6份*/flex:0 25%結(jié)合父元素的flex-wrap屬性進(jìn)行響應(yīng)式分配(3)margin屬性(對齊)
設(shè)置"margin:auto"值,使得彈性子元素在兩上軸方向上完全居中3.flex布局的優(yōu)點(diǎn):
flex布局可以控制布局內(nèi)元素是膨脹到整個(gè)父元素還是保持原本大小,是從左往右還是從右往左還是居中。兩條軸線,四個(gè)維度,還是彈性的,這就使得用起來得心應(yīng)手
總結(jié)
以上是生活随笔為你收集整理的flex弹性盒子模型的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 实验1 C++程序的运行环境
- 下一篇: 使用百度地图api搜索两点位置、连线、计