flex布局中关键词整理

flex布局

container属性：

1. flex-direction 主轴方向

   • row|row-reverse|column|column-reverse

2. flex-wrap 项目一行排不下时，如何换行

   • nowrap|wrap|wrap-reverse

3. flex-flow 以上两项合并写法，以空格分开

4. justify-content 定义items在主轴上对齐方式

   • flex-start(往start处堆) | flex-end | center
   • space-between | space-around

5. align-item 定义items在纵轴上对齐方式

   • flex-start(往纵轴起点堆) | flex-end | center
   • baseline(以文字基线对齐)
   • stretch：如果items未设置高度或设为auto，将填满整个container高度

6. align-content 定义多根主轴线的对齐方式

items属性：

1. order 定义items排列属性，根据设置的值，值越小越靠前，默认0
2. align-self 可覆盖container的align-item，默认继承align-item，若无父元素则等同于stretch
3. flex-grow 定义items放大比例
   • 默认0，含义不放大
   • 若属性都为1，则它们等分剩余空间
   • 若其中一个为2，则它占的空间比1的大一倍
4. flex-shrink 定义items缩小比例
   • 默认1，含义若空间不足，项目将缩小
   • 设置为0，含义不缩小
5. flex-basis 定义项目占据的主轴空间。
   • 默认auto，含义项目本来大小
6. flex 以上三项集合