深入解析 CSS Flexbox

display

display:flex;

display:inline-flex;

flex-direction 排列方向

row：预设值，由左到右，从上到下

row-reverse：与 row 相反

column：从上到下，再由左到右

column-reverse：与 column 相反

justify-content 水平对齐

flex-start：预设值，对齐最左边的 main start

flex-end：对齐最左边的 mainend

center：水平置中

space-between：平均分配內容元素，左右元素将会与 main start 和main end 对齐

space-around：平均分配內容元素，間距也是平均分配

align-items 垂直对齐

flex-start：对齐最上面的 cross start

flex-end：对齐最下面的 crossend

center：垂直置中

stretch：预设值，将內容元素全部撐开至 Flexbox 的高度

baseline：以所有內容元素的基线作为对齐标准

align-self 针对子元素

align-content 多行的元素

flex-start：对齐最上面的 cross start

flex-end：对齐最下面的 crossend

center：垂直置中

space-between：将第一行与最後一行分別对齐最上方与最下方

space-around：每行平均分配間距

stretch：预设值，內容元素全部撐开

flex-wrap 元素換行

nowrap：预设值，单行

wrap：多行

wrap-reverse：多行，但內容元素反轉

order 由小到大的排列順序

order:5;

flex

flex-grow：数字，无单位，当子元素的 flex-basis 长度「小」于它自己在父元素分配到的长度，按照数字做相对应的「伸展」比例分配，预设值为0，不会进行弹性变化，不可为负值，设为1 則会进行弹性变化。

flex-shrink：数字，无单位，当子元素的 flex-basis 长度「大」于它自己在父元素分配到的长度，按照数字做相对应的「压缩」比例分配，预设值为1，设为0 的话不会进行弹性变化，不可为负值。

flex-basis：子元素的基本大小，作为父元素的大小比较基准，预设值为0，也因为预设值为0，所以沒有设定此属性的時候，会以直接採用 flex-grow 属性，flex-basis 也可以设为auto，如果设为 auto，就表示子元素以自己的基本大小为单位。。

flex:1 2 200px;