Flex是FlexibleBox的縮寫,意為"彈性布局",用來(lái)為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局。行內(nèi)元素也可以使用Flex布局。注意,設(shè)為Flex布局以后,子元素的float、clear和vertical-align屬性將失效。采用Flex布局的元素,稱為Flex容器(flex container),簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員,稱為Flex項(xiàng)目(flex item),簡(jiǎn)稱"項(xiàng)目"。容器默認(rèn)存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis),項(xiàng)目默認(rèn)沿水平主軸排列。
以下6個(gè)屬性設(shè)置在容器上:
flex-direction屬性決定主軸的方向(即項(xiàng)目的排列方向)。flex-wrap屬性定義,如果一條軸線排不下,如何換行。flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式,默認(rèn)值為row nowrap。justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線,該屬性不起作用。
以下6個(gè)屬性設(shè)置在項(xiàng)目上:
order屬性定義項(xiàng)目的排列順序。數(shù)值越小,排列越靠前,默認(rèn)為0。flex-grow屬性定義項(xiàng)目的放大比例,默認(rèn)為0,即如果存在剩余空間,也不放大。flex-shrink屬性定義了項(xiàng)目的縮小比例,默認(rèn)為1,即如果空間不足,該項(xiàng)目將縮小。flex-basis屬性定義了在分配多余空間之前,項(xiàng)目占據(jù)的主軸空間。瀏覽器根據(jù)這個(gè)屬性,計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto,即項(xiàng)目的本來(lái)大小。flex屬性是flex-grow,flex-shrink和flex-basis的簡(jiǎn)寫,默認(rèn)值為0 1 auto。align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式,可覆蓋align-items屬性。默認(rèn)值為auto,表示繼承父元素的align-items屬性,如果沒(méi)有父元素,則等同于stretch。
簡(jiǎn)單來(lái)說(shuō): flex布局是CSS3新增的一種布局方式,可以通過(guò)將一個(gè)元素的display屬性值設(shè)置為flex從而使它成為一個(gè)flex容器,它的所有子元素都會(huì)成為它的項(xiàng)目。一個(gè)容器默認(rèn)有兩條軸:一個(gè)是水平的主軸,一個(gè)是與主軸垂直的交叉軸??梢允褂胒lex-direction來(lái)指定主軸的方向??梢允褂胘ustify-content來(lái)指定元素在主軸上的排列方式,使用align-items來(lái)指定元素在交叉軸上的排列方式。還可以使用flex-wrap來(lái)規(guī)定當(dāng)一行排列不下時(shí)的換行方式。對(duì)于容器中的項(xiàng)目,可以使用order屬性來(lái)指定項(xiàng)目的排列順序,還可以使用flex-grow來(lái)指定當(dāng)排列空間有剩余的時(shí)候,項(xiàng)目的放大比例,還可以使用flex-shrink來(lái)指定當(dāng)排列空間不足時(shí),項(xiàng)目的縮小比例。