概念
flex container(flex容器)
- 任何一個(gè)HTML元素都可以指定成flex布局(
display:flex)，即便是行內(nèi)元素(display:inline-flex)。但設(shè)定為flex布局之后，子元素的float、clear、vertical-align屬性會(huì)失效。
flex item(容器成員)
- 放入flex容器中的元素都是flex item。
main axis(容器主軸)和cross axis(交叉軸)
- 容器通過(guò)兩條根軸來(lái)確定成員的擺放。水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做 main start ，結(jié)束位置叫做 main end ；交叉軸的開(kāi)始位置叫做 cross start ，結(jié)束位置叫做 cross end。
容器屬性
flex-direction(排列方向)
- row(水平排列，從左到右)
- row-reverse(水平排列，從右到左)
- column(垂直排列，從上到下)
- column-reverse(垂直排列，從下到上)
flex-wrap(換行方式)
-
nowarp(默認(rèn)不換行)
-
warp(換行)
-
warp-reverse(倒置換行)
flex-flow
- 等于
flex-direction+flex-wrap的簡(jiǎn)寫(xiě)方式
justify-content(主軸對(duì)齊方式)
- flex-start(靠起始點(diǎn)對(duì)齊)
- flex-end(靠終點(diǎn)對(duì)齊)
- center(居中對(duì)齊)
- space-between(兩端對(duì)齊，平鋪拉伸)
- space-around(兩端不對(duì)齊，使用相等距離的間隔點(diǎn)，環(huán)繞平鋪)
align-item(交叉軸對(duì)齊方式)
- flex-start(靠交叉軸起點(diǎn)對(duì)齊)
- flex-end(靠交叉軸終點(diǎn)對(duì)齊)
- center(交叉軸居中對(duì)齊)
- stretch(交叉軸拉伸)
- baseline(以容器元素的第一行文字基線對(duì)齊)
align-content(主軸多行的對(duì)齊方式)
- flex-start(靠交叉軸的起點(diǎn)對(duì)齊)
- flex-end(靠交叉軸的終點(diǎn)對(duì)齊)
- center(相對(duì)交叉軸，居中對(duì)齊)
- stretch(相對(duì)交叉軸拉伸)
- space-between(交叉軸兩端對(duì)齊，平鋪拉伸)
- space-aground(交叉軸兩端不對(duì)其，使用相等距離的間隔點(diǎn)，環(huán)繞平鋪)
容器成員的屬性
order：
-
定義容器元素的排序編號(hào)，由小到大，默認(rèn)為0（可以設(shè)置負(fù)數(shù)）
flex-grow
-
容器元素的平鋪比例，默認(rèn)為0。如果容器元素的flex-grow屬性值為1，則等分平鋪。
flex-shrink
-
當(dāng)容器空間不足時(shí)的縮放比例。如果容器元素的flex-shrink屬性值都未1時(shí)，則等分縮放。而其中有個(gè)元素設(shè)置flex-shrink為0，則不進(jìn)行縮放。
flex-basis(設(shè)定主軸元素的main size)
- length(指定大小)
- auto(原本大小)
flex(flex-grow + flex-shrink + flex-basis的簡(jiǎn)寫(xiě)方式)
- 默認(rèn)為 0 1 auto。
align-self(為容器元素設(shè)置單獨(dú)的對(duì)齊方式)
- auto(默認(rèn)，表示繼承父元素的align-items屬性/如果無(wú)父元素則是stretch)
- flex-start(交叉軸起點(diǎn)對(duì)齊)
- flex-end(交叉軸終點(diǎn)對(duì)齊)
- center(居中對(duì)齊)
- baseline(第一行文字基線)
- stretch(拉伸)
