flex布局筆記
flex-derection：row | row-reverse | column | column-reverse ?主軸方向 ?交叉軸垂直于主軸
主軸與行內(nèi)軸方向作為默認的書寫模式。即橫向從左到右排列（左對齊）。
row-reverse： 對齊方式與row相反。
column： 主軸與塊軸方向作為默認的書寫模式。即縱向從上往下排列（頂對齊）。
column-reverse： 對齊方式與column相反。
flex-wrap： nowrap | wrap | wrap-reverse 該屬性控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
nowrap：
flex容器為單行。該情況下flex子項可能會溢出容器
wrap：
flex容器為多行。該情況下flex子項溢出的部分會被放置到新行，子項內(nèi)部會發(fā)生斷行
wrap-reverse：
反轉(zhuǎn) wrap 排列。
flex-flow：<flex-direction> || <flex-wrap>
flex-basis：< length > | < percentage > | auto | ?content
設置或檢索彈性盒伸縮基準值。如果所有子元素的基準值之和大于剩余空間，則會根據(jù)每項設置的基準值，按比率伸縮剩余空間< length >：
用長度值來定義寬度。不允許負值
< percentage >：
用百分比來定義寬度。不允許負值
auto：
無特定寬度值，取決于其它屬性值
content：
基于內(nèi)容自動計算寬度
flex-grow：< number >
設置或檢索彈性盒的擴展比率。 根據(jù)彈性盒子元素所設置的擴展因子作為比率來分配剩余空間。flex-shrink：< number >
設置或檢索彈性盒的收縮比率。 根據(jù)彈性盒子元素所設置的收縮因子作為比率來收縮空間。flex：none | <flex-grow> <flex-shrink> <flex-basis>
flex: initial
flex: auto
flex: none
flex: < positive-number >
flex: initial： 是把 flex 元素重置為 Flexbox 的初始值，它相當于
flex: 0 1 auto。在這里flex-grow的值為 0，所以 flex 元素不會超過它們flex-basis的尺寸。flex-shrink的值為 1, 所以可以縮小 flex 元素來防止它們溢出。flex-basis的值為auto. Flex 元素尺寸可以是在主維度上設置的，也可以是根據(jù)內(nèi)容自動得到的。flex: auto： 等同于
flex: 1 1 auto和上面的flex:initial基本相同，但是這種情況下，flex 元素在需要的時候既可以拉伸也可以收縮。flex: none： 可以把 flex 元素設置為不可伸縮。它和設置為
flex: 0 0 auto是一樣的。元素既不能拉伸或者收縮，但是元素會按具有flex-basis: auto屬性的flexbox進行布局。你在教程中?？吹降?
flex: 1或者flex: 2等等。它相當于flex: 1 1 0或者flex: 2 1 0。元素可以在flex-basis為 0 的基礎上伸縮。align-items：flex-start | flex-end | center | baseline | ?stretch
定義flex子項在flex容器的當前行的側(cè)軸(縱軸)(交叉軸)方向上的對齊方式。flex-start：
彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：
彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：
彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：
如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與
flex-start等效。其它情況下，該值將參與基線對齊。stretch：
如果指定側(cè)軸大小的屬性值為
auto，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照min/max-width/height屬性的限制。justify-content：flex-start | flex-end | center | ?space-between | space-around
設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。flex-start：
彈性盒子元素將向行起始位置對齊。該行的第一個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊，同時所有后續(xù)的伸縮盒項目與其前一個項目對齊。
flex-end：
彈性盒子元素將向行結(jié)束位置對齊。該行的第一個子元素的主結(jié)束位置的邊界將與該行的主結(jié)束位置的邊界對齊，同時所有后續(xù)的伸縮盒項目與其前一個項目對齊。
center：
彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊并在行中居中對齊，同時第一個元素與行的主起始位置的邊距等同與最后一個元素與行的主結(jié)束位置的邊距（如果剩余空間是負數(shù)，則保持兩端相等長度的溢出）。
space-between：
彈性盒子元素會平均地分布在行里。如果最左邊的剩余空間是負數(shù)，或該行只有一個子元素，則該值等效于
flex-start。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最后一個元素的邊界與行的主結(jié)束位置的邊距對齊，而剩余的伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等。space-around：
彈性盒子元素會平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負數(shù)，或該行只有一個伸縮盒項目，則該值等效于
center。在其它情況下，伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半。
flex容器
文檔中采用了 flexbox 的區(qū)域就叫做 flex 容器。為了創(chuàng)建 flex 容器，我們把一個容器的 display 屬性值改為 flex 或者 inline-flex。完成這一步之后，容器中的直系子元素就會變?yōu)?flex 元素。所有 CSS 屬性都會有一個初始值，所以 flex 容器中的所有 flex 元素都會有下列行為：
元素排列為一行 (
flex-direction屬性的初始值是row)。元素從主軸的起始線開始。
元素不會在主維度方向拉伸，但是可以縮小。
元素被拉伸來填充交叉軸大小。
flex-basis?屬性為auto。flex-wrap?屬性為nowrap。
