flex容器(父元素)有6個(gè)屬性:
flex-direction花枫;flex-wrap;flex-flow送悔;justify-content关霸;align-items;align-content领跛;
flex-direction
屬性決定主軸的方向(即項(xiàng)目的排列方向)。有4個(gè)值:
1. row(默認(rèn)值):主軸為水平方向撤奸,起點(diǎn)在左端吠昭。
- row-reverse:主軸為水平方向,起點(diǎn)在右端胧瓜。
- column:主軸為垂直方向矢棚,起點(diǎn)在上沿。
- column-reverse:主軸為垂直方向府喳,起點(diǎn)在下沿蒲肋。
flex-wrap
默認(rèn)情況下項(xiàng)目都排在一條(軸)線。flex-wrap屬性定義,如果一條軸線排不下兜粘,如何換行申窘。有三個(gè)值:
- nowrap(默認(rèn)):不換行。
- wrap:換行孔轴,第一行在上方剃法。
- wrap-reverse:第一行在下方。
flex-flow
屬性是flex-direction屬性 和flex-wrap屬性的簡寫形式路鹰,默認(rèn)值為row nowrap贷洲。
justify-content
屬性定義了項(xiàng)目在主軸上的對齊方式。它有5個(gè)值可冉:
flex-start(默認(rèn)值):左對齊
flex-end:右對齊
center:居中
space-between:兩端對齊优构,項(xiàng)目之間的間隔都相等
space-around:每個(gè)項(xiàng)目兩側(cè)的間隔相等,所以項(xiàng)目之間的間隔比項(xiàng)目與邊框的間距大一倍雁竞。
align-items
屬性定義項(xiàng)目在交叉軸上如何對齊钦椭。它有5個(gè)值:
- flex-start:交叉軸的起點(diǎn)對齊
- flex-end:交叉軸的終點(diǎn)對齊
- center:交叉軸的中點(diǎn)對齊
- baseline:項(xiàng)目的第一行文字的基線對齊
- stretch(默認(rèn)值):如果項(xiàng)目未設(shè)置高度或設(shè)為auto,將占滿整個(gè)容器的高度碑诉。
align-content
屬性定義了多根軸線的對齊方式玉凯,如果項(xiàng)目只有一根軸線,該屬性不起作用联贩。可取6個(gè)值
- flex-start:與交叉軸的起點(diǎn)對齊
- flex-end:與交叉軸的終點(diǎn)對齊
- center:與交叉軸的中點(diǎn)對齊
- space-between:與交叉軸兩端對齊捎拯,軸線之間的間隔平均分布
- space-around:每根軸線兩側(cè)的間隔都相等泪幌,所以軸線之間的間隔比軸線與邊框的間隔大一倍
- stretch(默認(rèn)值):軸線占滿整個(gè)交叉軸
flex 項(xiàng)目(子元素)有6個(gè)屬性:
order,flex-grow署照,flex-shrink祸泪,flex-basis,flex建芙,align-self没隘。
order
屬性定義項(xiàng)目的排列順序。數(shù)值越小禁荸,排列越靠前右蒲,默認(rèn)為0。
flex-grow
屬性定義項(xiàng)目的放大比例赶熟,默認(rèn)為0瑰妄,即如果存在剩余空間,也不放大映砖。如果所有項(xiàng)目的flex-grow屬性為1间坐,則它們將等分剩余空間(如果有的話)。如果一個(gè)項(xiàng)目的flex-grow屬性為2,其它項(xiàng)目都為1竹宋,則前者占據(jù)的剩余空間將比其他項(xiàng)目多一倍劳澄。
flex-shrink
屬性定義了項(xiàng)目的縮小比例,默認(rèn)為1蜈七,即如果空間不足秒拔,該項(xiàng)目將縮小。如果所有項(xiàng)目的flex-shrink屬性都為1宪潮,當(dāng)空間不足時(shí)溯警,都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0狡相,其他項(xiàng)目都為1梯轻,則空間不足時(shí),前者不縮小尽棕。負(fù)值對該屬性無效喳挑。
flex-basis
屬性定義了在分配多余空間之前,項(xiàng)目占據(jù)的主軸空間滔悉。瀏覽器根據(jù)這個(gè)屬性伊诵,計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto回官,即項(xiàng)目的本來大小曹宴。它可以設(shè)為跟width或height屬性一樣的值(例如200px),則項(xiàng)目將占據(jù)固定空間歉提。
flex
屬性是flex-grow笛坦,flex-shrink 和flex-basis的簡寫,默認(rèn)值為 0 1 auto苔巨。后兩個(gè)屬性可選版扩。該屬性有兩個(gè)快捷值,auto(1 1 auto) 和 none(0 0 auto)侄泽。建議優(yōu)先使用這個(gè)屬性礁芦,而不是單獨(dú)寫三個(gè)分離的屬性,因?yàn)闉g覽器會(huì)推算相關(guān)值悼尾。
align-self
屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式柿扣,可覆蓋align-items屬性,默認(rèn)值為auto闺魏,表示繼承父元素的align-items屬性窄刘,如果沒有父元素,則等同于stretch舷胜。該屬性可取6個(gè)值娩践,除了auto活翩,其他都與align-items屬性完全一致。即auto | flex-start | flex-end | center | baseline | stretch翻伺。