參考地址:阮一峰Flex布局語(yǔ)法篇
1幔妨、容器的屬性
? ??1.1、flex-direction 主軸方向
? ????? (row 默認(rèn)值:橫 | row-reverse:倒著橫 | column:豎 | column-reverse:倒著豎)
? ??1.2谍椅、flex-wrap 是否換行
? ???? (nowrap 默認(rèn)值:不換 | wrap:換| wrap-reverse:換行误堡,第一行在下面)
? ??1.3、flex-flow 主軸方向和換行簡(jiǎn)寫
? ? ? ? ?(flex-direction || flex-wrap)
? ??1.4雏吭、justify-content 主軸對(duì)齊方式
? ? ? ? ?(flex-start 默認(rèn)值:| flex-end | center | space-between 兩端對(duì)齊锁施,軸間隔平分 | space-around 每根軸兩側(cè)間隔相等)
? ??1.5、align-items? 交叉軸上對(duì)齊方式(縱向?qū)R方式)
? ???? (flex-start | flex-end | center | baseline 文字基線 | stretch 默認(rèn)值:占滿)
? ??1.6杖们、align-content 多根軸線(多行)的對(duì)齊方式
? ???? (flex-start | flex-end | center | space-between | space-around | stretch 默認(rèn)值:占滿)
2颅痊、項(xiàng)目屬性
? ??2.1辛块、order 排序值;默認(rèn)0簿透,從小到大排序羹令。
? ? 2.2、flex-grow 項(xiàng)目放大比例;
????????? 默認(rèn)0:不放大孝治。
????????? 都為1:等分剩余空間列粪。
????????? 2~N:數(shù)值越大,剩余空間分成比例越高谈飒。
? ? 2.3岂座、flex-shrink? 項(xiàng)目縮小比例;
? ? ? ? ? 默認(rèn)1:空間不足將縮小。
????????? 都為1:都等比例縮小杭措。
? ? ? ? ? 一個(gè)為0,其他為1:前者不縮小费什。
? ? ? ? ? 負(fù)值無(wú)效(等同默認(rèn)值)
? ? ? ? ? 2~N:數(shù)值越大縮的比例越多。
? ??2.4瓤介、flex-basis 在分配多余空間之前,項(xiàng)目占據(jù)的主軸空間赘那。瀏覽器根據(jù)這個(gè)屬性刑桑,計(jì)算主軸是否有多余空間。
? ? ? ? ? ?默認(rèn)值auto:項(xiàng)目本身大小募舟。
? ? 2.5祠斧、flex
? ? ? ? ? flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫,默認(rèn)值為0 1 auto拱礁。后兩個(gè)屬性可選琢锋。
? ? ? ? ? 兩個(gè)快捷值:auto (1 1 auto) 和 none (0 0 auto)。
? ? 2.6呢灶、align-self 單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式吴超,
? ? ? ? ?(auto | flex-start | flex-end | center | baseline | stretch)
? ? ? ? ? 可覆蓋align-items屬性。默認(rèn)值為auto鸯乃,表示繼承父元素的align-items屬性鲸阻,如果沒(méi)有父元素,則等同于stretch。