flex布局 常用属性

以下内容算是属性的一个总结笔记，并没有写 如何应用、会遇到的问题、以及深入原理。 嗯，以后会从这三个方面整理。

1. flex-direction: 定义主轴方向

   • row 水平方向，从左到右排布
   • row-reverse 水平方向，从右往左排布
   • column 重置方向，从上往下排布
   • column-reverse 重置方向，从下往上排布

2. justify-content： 主轴对齐方式

   • flex-start 左对齐|上对齐
   • flex-end 右对齐|下对齐

3. flex-flow: flex-direction flex-wrap 默认: row nowrap

4. align-items: 定义交叉轴对齐方式

   • flex-start 起点对齐
   • flex-end 终点对齐
   • center 终点对齐
   • baseline 项目对第一行文字基线对齐
   • stretch 如果设置具体高度，则占满整个容器高度

5. align-self 允许某个项目与其他项目有不一样对对齐方式

   • auto 继承父元素对align-items属性，如果没有父元素，即为stretch
   • flex-start
   • flex-end
   • center
   • baseline
   • stretch

6. flex-wrap 如何换行

   • nowrap 不换行
   • wrap 一行摆不下就换行
   • wrap-reverse 换行，换行的内容在上

7. order 定义排列顺序，数值越小，排列越前（默认0）

8. flex-grow 定义放大比例，默认0 （有剩下空间也不放大）

9. flex-shrink 定义缩小比例，默认1，设置为0，表示不进行缩放

10. flex-basis 在分配多余空间之前，占据对主轴空间大小

11. flex:flex-grow flex-shrink flex-basic; 默认 0 1 auto