display：flex | inline-flex
彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。
row：橫向從左到右排列（左對齊），預設的排列方式。
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。
flex-start:彈性專案向行頭緊挨著填充。
flex-end:彈性專案向行尾緊挨著填充。
space-between:彈性專案平均分布在該行上。如果剩餘空間為負或者只有乙個彈性項，則該值等同於flex-start。
space-around:彈性專案平均分布在該行上，兩邊留有一半的間隔空間。如果剩餘空間為負或者只有乙個彈性項，則該值等同於center。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與』flex-start』等效。其它情況下，該值將參與基線對齊。
stretch：(預設值)如果指定側軸大小的屬性值為』auto』，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照』min/max-width/height』屬性的限制。
nowrap - 預設， 彈性容器為單行。該情況下彈性子項可能會溢位容器。
wrap - 彈性容器為多行。該情況下彈性子項溢位的部分會被放置到新行，子項內部會發生斷行
wrap-reverse -反轉 wrap 排列。
stretch - 預設。各行將會伸展以占用剩餘的空間。
flex-start - 各行向彈性盒容器的起始位置堆疊。
flex-end - 各行向彈性盒容器的結束位置堆疊。
center -各行向彈性盒容器的中間位置堆疊。
space-between -各行在彈性盒容器中平均分布。
space-around - 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。
auto：如果』align-self』的值為』auto』，則其計算值為元素的父元素的』align-items』值，如果其沒有父元素，則計算值為』stretch』。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與』flex-start』等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為』auto』，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照』min/max-width/height』屬性的限制。
以下例項演示了彈性子元素上 align-self 不同值的應用效果：
auto: 計算值為 1 1 auto
initial: 計算值為 0 1 auto
none：計算值為 0 0 auto
inherit：從父元素繼承
[ flex-grow ]：定義彈性盒子元素的擴充套件比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的預設基準值。
css 彈性布局
什麼是彈性布局？flex布局，是h5新出的布局方式，主要代替傳統float浮動布局。注意 布局要給父元素設定，子元素按照布局方式排列，他會使塊級元素不獨佔一行。特點 當沒有給彈性布局設定換行時，子元素不會自動換行會在一行顯示。display flex 設定彈性布局 flex direction 設定...
CSS 彈性布局
box box box 基本概念 row 預設值 主軸為水平方向，起點在左端。row reverse 主軸為水平方向，起點在右端。column 主軸為垂直方向，起點在上沿。column reverse 主軸為垂直方向，起點在下沿。nowrap 預設 不換行 wrap 換行，第一行在上方 wrap r...
Css 彈性布局
彈性布局 display flex 要發生彈性布局的子元素，他們的父元素，成為容器需設定display flex flex將塊級元素設定為容器 inline flex將行內元素設定為容器 元素設定為flex容器後，容器的text align，vertical align失效設定主軸的方向 flex ...