概念
flex container(flex容器)
- 任何一個HTML元素都可以指定成flex布局(
display:flex)属韧，即便是行內(nèi)元素(display:inline-flex)算灸。但設(shè)定為flex布局之后谅将，子元素的float、clear鸠蚪、vertical-align屬性會失效。
flex item(容器成員)
- 放入flex容器中的元素都是flex item师溅。
main axis(容器主軸)和cross axis(交叉軸)
- 容器通過兩條根軸來確定成員的擺放茅信。水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做 main start 墓臭，結(jié)束位置叫做 main end 蘸鲸；交叉軸的開始位置叫做 cross start ，結(jié)束位置叫做 cross end窿锉。
容器屬性
flex-direction(排列方向)
- row(水平排列酌摇，從左到右)
- row-reverse(水平排列，從右到左)
- column(垂直排列嗡载，從上到下)
- column-reverse(垂直排列窑多，從下到上)
flex-wrap(換行方式)
-
nowarp(默認不換行)
-
warp(換行)
-
warp-reverse(倒置換行)
flex-flow
- 等于
flex-direction+flex-wrap的簡寫方式
justify-content(主軸對齊方式)
- flex-start(靠起始點對齊)
- flex-end(靠終點對齊)
- center(居中對齊)
- space-between(兩端對齊，平鋪拉伸)
- space-around(兩端不對齊洼滚，使用相等距離的間隔點埂息，環(huán)繞平鋪)
align-item(交叉軸對齊方式)
- flex-start(靠交叉軸起點對齊)
- flex-end(靠交叉軸終點對齊)
- center(交叉軸居中對齊)
- stretch(交叉軸拉伸)
- baseline(以容器元素的第一行文字基線對齊)
align-content(主軸多行的對齊方式)
- flex-start(靠交叉軸的起點對齊)
- flex-end(靠交叉軸的終點對齊)
- center(相對交叉軸，居中對齊)
- stretch(相對交叉軸拉伸)
- space-between(交叉軸兩端對齊，平鋪拉伸)
- space-aground(交叉軸兩端不對其千康，使用相等距離的間隔點享幽，環(huán)繞平鋪)
容器成員的屬性
order：
-
定義容器元素的排序編號，由小到大拾弃，默認為0（可以設(shè)置負數(shù)）
flex-grow
-
容器元素的平鋪比例值桩，默認為0。如果容器元素的flex-grow屬性值為1豪椿，則等分平鋪奔坟。
flex-shrink
-
當(dāng)容器空間不足時的縮放比例。如果容器元素的flex-shrink屬性值都未1時砂碉，則等分縮放蛀蜜。而其中有個元素設(shè)置flex-shrink為0，則不進行縮放增蹭。
flex-basis(設(shè)定主軸元素的main size)
- length(指定大小)
- auto(原本大小)
flex(flex-grow + flex-shrink + flex-basis的簡寫方式)
- 默認為 0 1 auto滴某。
align-self(為容器元素設(shè)置單獨的對齊方式)
- auto(默認，表示繼承父元素的align-items屬性/如果無父元素則是stretch)
- flex-start(交叉軸起點對齊)
- flex-end(交叉軸終點對齊)
- center(居中對齊)
- baseline(第一行文字基線)
- stretch(拉伸)
