https://www.oxxostudio.tw/articles/201501/css-flexbox.html
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;
网友评论