css flex 容器盒子总结

css flex 容器盒子总结(很有用，工作中经常用到)

1. display: flex (块布局)| inline-flex(行内布局);
2. flex-direction: row(默认值) | row-reverse | column | column-reverse;决定主轴的方 向(即项目的排列方向)
3. flex-wrap: nowrap(默认值) | wrap | wrap-reverse; 决定容器内项目是否可换行
4. flex-flow: 这个属性基本没啥用
5. justify-content： flex-start(左对齐-默认值) | flex-end(右对齐) | center(居中) | space-between(两端对齐)|space-around(每个项目两侧的间隔相等); 定义了项目在主轴的对齐方式。
6. align-items：flex-start(交叉轴起点对齐)| flex-end(交叉轴终点对齐) | center (交叉轴中点对齐)| baseline(项目的第一行文字的基线对齐) | stretch(若子项目无设置高度，则100%占满容器高度, (默认值)); 定义了项目在交叉轴上的对齐方式
7. align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值); 多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用(即当flex-wap 设置为wap 可换行的情况下， align-content才有效，即在交叉轴上的对齐方式)

先总结这么多， 有时间了增加图例解释