flex布局

一,容器屬性

1,flex-direction

2,flex-wrap
默認(rèn)會(huì)縮小Item。

3,justify-content
justify-content:把所有元素打包一塊放到中間。

4, 軸向的對齊方式

5, align-content (不常用,多行,多軸的時(shí)候?qū)R方式)

align-content的容器只有一根軸線,不起作用指的是
This property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap).
二、項(xiàng)目屬性

項(xiàng)目屬性用的不是非常多,有時(shí)候特殊情況也會(huì)用。
1,order

2, flex-grow
flex-grow填滿剩余空間的比例分配。

3,flex-shrink
典型例子。一個(gè)項(xiàng)目的flex-shrink屬性為0,其余為默認(rèn)1,那么空間不足時(shí),其他都縮小,該項(xiàng)目不縮小。

4,flex-basis(復(fù)雜,但是用的很少)

5,align-self 脫離團(tuán)隊(duì),自己定位

https://www.bilibili.com/video/BV1t7411E7tn?spm_id_from=333.999.0.0
如果覺得本文對您有幫助~可以微信支持一下:




浙公網(wǎng)安備 33010602011771號