- 彈性盒子分為兩部分么库，父元素（flex container）和子元素（flex items）,如果方向?yàn)閞ow出牧，主軸就是水平冠桃，側(cè)軸就是垂直
- display(對(duì)flex-container設(shè)置)
display: other values | flex | inline-flex;
- flex-direction（對(duì)flex container設(shè)置）
row(默認(rèn)值)：從左向右排列
row-reverse：與row排列方向相反墩蔓，從右向左排列
column：從上到下排列.
column-reverse：從下到上排列。
- order(對(duì)flex items設(shè)置 )
默認(rèn)情況下囤捻，伸縮項(xiàng)目是按照文檔流出現(xiàn)先后順序排列臼朗。然而，“order”屬性可以控制伸縮項(xiàng)目在他們的伸縮容器出現(xiàn)的順序蝎土。
order: <integer> //數(shù)值越大順序越靠后
- flex-wrap（對(duì)flex container設(shè)置）
這個(gè)主要用來定義伸縮容器里是單行還是多行顯示
nowrap(默認(rèn)值)：伸縮容器單行顯示
wrap：伸縮容器多行顯示
wrap-reverse：伸縮容器多行顯示,和wrap相反
- flexflow(對(duì)flex container設(shè)置)
是“flex-direction”和“flex-wrap”屬性的縮寫版本视哑。同時(shí)定義了伸縮容器的主軸和側(cè)軸。其默認(rèn)值為“row nowrap”誊涯。
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
例如：
div { flex-flow: row; }
div { flex-flow: row-reverse wrap-reverse; }
7 justify-content（對(duì)flex container設(shè)置）
這個(gè)是用來定義伸縮項(xiàng)目沿著主軸線的對(duì)齊方式挡毅。當(dāng)一行上的所有伸縮項(xiàng)目都不能伸縮或可伸縮但是已經(jīng)達(dá)到其最大長(zhǎng)度時(shí)，這一屬性才會(huì)對(duì)多余的空間進(jìn)行分配醋拧。當(dāng)項(xiàng)目溢出某一行時(shí)慷嗜，這一屬性也會(huì)在項(xiàng)目的對(duì)齊上施加一些控制淀弹。
justify-content: flex-start | flex-end | center | space-between | space-around;
//flex-start(默認(rèn)值)：伸縮項(xiàng)目向一行的起始位置靠齊丹壕。
//flex-end：伸縮項(xiàng)目向一行的結(jié)束位置靠齊。
//center：伸縮項(xiàng)目向一行的中間位置靠齊薇溃。
//space-between：伸縮項(xiàng)目會(huì)平均地分布在行里菌赖。第一個(gè)伸縮項(xiàng)目一行中的最開始位置，最后一個(gè)伸縮項(xiàng)目在一行中最終點(diǎn)位置沐序。
//space-around：伸縮項(xiàng)目會(huì)平均地分布在行里琉用，兩端保留一半的空間。
8 align-content（對(duì)flex container設(shè)置）
這個(gè)屬性主要用來調(diào)準(zhǔn)伸縮行在伸縮容器里的對(duì)齊方式策幼。(針對(duì)多行)
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
9 align-items（對(duì)flex container設(shè)置）
align-items: flex-start | flex-end | center | baseline | stretch
//flex-start：伸縮項(xiàng)目在側(cè)軸起點(diǎn)邊的外邊距緊靠住該行在側(cè)軸起始的邊邑时。
//flex-end：伸縮項(xiàng)目在側(cè)軸終點(diǎn)邊的外邊距靠住該行在側(cè)軸終點(diǎn)的邊
//center：伸縮項(xiàng)目的外邊距盒在該行的側(cè)軸上居中放置。
//baseline：伸縮項(xiàng)目根據(jù)他們的基線對(duì)齊特姐。
//stretch（默認(rèn)值）：伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器晶丘。此值會(huì)使項(xiàng)目的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下盡可能接近所在行的尺寸。
10 align-self（對(duì)flex items設(shè)置）
用來在單獨(dú)的伸縮項(xiàng)目上覆寫默認(rèn)的對(duì)齊方式唐含。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
11 flex-grow（對(duì)于flex items設(shè)置）
根據(jù)需要用來定義伸縮項(xiàng)目的擴(kuò)展能力
flex-grow: <number>
12 flex-shrink（對(duì)flex items設(shè)置）
根據(jù)需要用來定義伸縮項(xiàng)目收縮的能力
flex-shrink: <number>;
13 flex-basis（對(duì)flex items設(shè)置）
這個(gè)用來設(shè)置伸縮基準(zhǔn)值浅浮，剩余的空間按比率進(jìn)行伸縮。
flex-basis: <length> | auto;
//如果設(shè)置為“0”捷枯，不考慮剩余空白空間滚秩。如果設(shè)置為自動(dòng)，則按照flex-grow值分配剩余空白空間
14 .flex（對(duì)flex items設(shè)置）
這是“flex-grow”淮捆、“flex-shrink”和“flex-basis”三個(gè)屬性的縮寫郁油。其中第二個(gè)和第三個(gè)參數(shù)（flex-shrink本股、flex-basis）是可選參數(shù)。默認(rèn)值為“0 1 auto”
