flex 入門(mén)
屬性介紹
父級(jí)元素 : (為了兼容低版本瀏覽器,要加上 -webkit -ms 前綴)
display: flex;
flex-direction(定義了伸縮項(xiàng)目放置在伸縮容器的方向)
row : (默認(rèn)值)同一行中 排版方式下從左向右排列
row-reverse : 與row排列方向相反,同一行中 排版方式下從右向左排列。
column : 類(lèi)似 于row,不過(guò)是從上到下排列
column-reverse : 類(lèi)似于row-reverse,不過(guò)是從下到上排列。
flex-wrap(定義伸縮容器里是單行還是多行顯示)
nowrap : (默認(rèn)值)伸縮容器單行顯示,同一行中, 排版方式下從左向右排列
wrap : 伸縮容器多行顯示,同一行中, 排版方式下從左向右排列
wrap-reverse : 與wrap排列方向相反 伸縮容器多行顯示,同一行中,伸縮項(xiàng)目從右向左排列
justify-content(定義伸縮項(xiàng)目沿著主軸線(xiàn)的對(duì)齊方式)
flex-start``:(默認(rèn)值)同一行的起始位置靠齊。flex-end：同一行的結(jié)束位置靠齊。center：同一行的中間位置靠齊。space-between：伸縮項(xiàng)目會(huì)平均地分布在行里。第一個(gè)伸縮項(xiàng)目一行中的最開(kāi)始位置，最后一個(gè)伸縮項(xiàng)目在一行中最終點(diǎn)位置。space-around`：伸縮項(xiàng)目會(huì)平均地分布在行里，兩端保留一半的空間。
align-item(定義伸縮項(xiàng)目可以在伸縮容器的當(dāng)前行的側(cè)軸上對(duì)齊方式)
flex-start : 伸縮項(xiàng)目在側(cè)軸起點(diǎn)邊的外邊距緊靠住該行在側(cè)軸起始的邊。()
flex-end : 伸縮項(xiàng)目在側(cè)軸終點(diǎn)邊的外邊距靠住該行在側(cè)軸終點(diǎn)的邊 。
center : 伸縮項(xiàng)目的外邊距盒在該行的側(cè)軸上居中放置。
baseline : 伸縮項(xiàng)目根據(jù)他們的基線(xiàn)對(duì)齊。
stretch : （默認(rèn)值）伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器。此值會(huì)使項(xiàng)目的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下盡可能接近所在行的尺寸。
order(伸縮項(xiàng)目是按照文檔流出現(xiàn)先后順序排列) 作用子元素
integer : 1,2,3,4..
flex-grow(定義伸縮項(xiàng)目的擴(kuò)展能力) 作用子元素
1 : 每個(gè)伸縮項(xiàng)目將設(shè)置為一個(gè)大小相等的剩余空間
2 : 伸縮項(xiàng)目所占的剩余空間是其他伸縮項(xiàng)目所占剩余空間的兩倍
flex-basis(定義伸縮基準(zhǔn)值，剩余的空間按比率進(jìn)行伸縮) 作用子元素
length : 剩余的空間按比率進(jìn)行伸縮
