彈性盒子是 CSS3 的一種新的布局模式
1.?flex-direction?屬性指定了彈性子元素在父容器中的位置。
flex-direction: row | row-reverse | column | column-reverse
2.?內(nèi)容對(duì)齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項(xiàng)沿著彈性容器的主軸線（main axis）對(duì)齊
justify-content: flex-start | flex-end | center | space-between | space-around
3.?align-items?設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式。
align-items: flex-start | flex-end | center | baseline | stretch
4.?flex-wrap?屬性用于指定彈性盒子的子元素?fù)Q行方式。
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
5.?align-content?屬性用于修改 flex-wrap 屬性的行為。類似于 align-items, 但它不是設(shè)置彈性子元素的對(duì)齊，而是設(shè)置各個(gè)行的對(duì)齊。
align-content: flex-start | flex-end | center | space-between | space-around | stretch
6.?align-self?屬性用于設(shè)置彈性元素自身在側(cè)軸（縱軸）方向上的對(duì)齊方式。
align-self: auto | flex-start | flex-end | center | baseline | stretch
display:flex詳解
（1）flex-direction的值有:
row：橫向從左到右排列（左對(duì)齊），默認(rèn)的排列方式。
row-reverse：反轉(zhuǎn)橫向排列（右對(duì)齊，從后往前排，最后一項(xiàng)排在最前面。
column：縱向排列。
column-reverse：反轉(zhuǎn)縱向排列，從后往前排，最后一項(xiàng)排在最上面。
（2）justify-content 屬性
flex-start：
彈性項(xiàng)目向行頭緊挨著填充。這個(gè)是默認(rèn)值。第一個(gè)彈性項(xiàng)的main-start外邊距邊線被放置在該行的main-start邊線，而后續(xù)彈性項(xiàng)依次平齊擺放。
flex-end：
彈性項(xiàng)目向行尾緊挨著填充。第一個(gè)彈性項(xiàng)的main-end外邊距邊線被放置在該行的main-end邊線，而后續(xù)彈性項(xiàng)依次平齊擺放。
center：
彈性項(xiàng)目居中緊挨著填充。（如果剩余的自由空間是負(fù)的，則彈性項(xiàng)目將在兩個(gè)方向上同時(shí)溢出）。
space-between：
彈性項(xiàng)目平均分布在該行上。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于flex-start。否則，第1個(gè)彈性項(xiàng)的外邊距和行的main-start邊線對(duì)齊，而最后1個(gè)彈性項(xiàng)的外邊距和行的main-end邊線對(duì)齊，然后剩余的彈性項(xiàng)分布在該行上，相鄰項(xiàng)目的間隔相等。
space-around：
彈性項(xiàng)目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于center。否則，彈性項(xiàng)目沿該行分布，且彼此間隔相等（比如是20px），同時(shí)首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
（3）align-items 屬性
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與’flex-start’等效。其它情況下，該值將參與基線對(duì)齊。
（4）flex-wrap 屬性
stretch：如果指定側(cè)軸大小的屬性值為’auto’，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照’min/max-width/height’屬性的限制。
nowrap?- 默認(rèn)， 彈性容器為單行。該情況下彈性子項(xiàng)可能會(huì)溢出容器。
wrap?- 彈性容器為多行。該情況下彈性子項(xiàng)溢出的部分會(huì)被放置到新行，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行
（5）align-content 屬性
wrap-reverse?-反轉(zhuǎn) wrap 排列。
stretch?- 默認(rèn)。各行將會(huì)伸展以占用剩余的空間。
flex-start?- 各行向彈性盒容器的起始位置堆疊。
flex-end?- 各行向彈性盒容器的結(jié)束位置堆疊。
center?-各行向彈性盒容器的中間位置堆疊。
space-between?-各行在彈性盒容器中平均分布。
space-around?- 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。
（6）align-self屬性
auto：如果’align-self’的值為’auto’，則其計(jì)算值為元素的父元素的’align-items’值，如果其沒有父元素，則計(jì)算值為’stretch’。
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與’flex-start’等效。其它情況下，該值將參與基線對(duì)齊。
stretch：如果指定側(cè)軸大小的屬性值為’auto’，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照’min/max-width/height’屬性的限制。
引用自http://t.csdn.cn/BR5Qv
