*CSS-flex布局与单位

基本知识

容器属性：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

项目属性：
order
flex-grow
flex-shrink
flex-basis
flex
align-self

注意点：
1.主轴不一定只有水平方向，也可以有垂直方向。垂直轴也不一定只是垂直方向！
2.如果主轴设置为垂直方向，那么justify-content和align-items，align-content 的对应的属性变化就得变化！！比如。justify-content教程里面只显示了主轴水平方向的属性，其实如果主轴是垂直方向的话，那么他的属性也会随之改变！
3.flex-basis：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
所以如果是父盒子是flex，那么这个子盒子要想加上flex-basis：100%，这样宽度才会和父亲保持一致，不然会按照实际内容来显示。
4.圣杯模型的最大的盒子，主轴为垂直！
5.flex属性：flex-grow，flex-shrink，flex-basis

参考链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html（语法）
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html（实例）
https://blog.csdn.net/DFF1993/article/details/81201773（flex布局实力）

单位

常用单位：px,em.rem.vm.vh.vmax.vmin.

• px:固定单位

一般浏览器，默认16px=1em.

• em:相对单位

这个是相对于父系的，如果父系有字体大小，比如10px，那么1em=10px,相当于一个倍数。不过这个如果嵌套太多层，每个父系又都设置了自己的字体大小。那么就会变得很大很大，所以出现了rem单位。

• rem:相对单位

，这个是相对于根目录的root em。

• vw和vh也是相对单位

根据视窗缩放大小自动调整！取值范围1-100，相当于百分比。

• vmin和vmax
  主要用于手机，width：100vmin，代表宽度以手机屏幕（宽的）一边的百分比作为宽度。vmin代表手机屏幕的宽度，vmax代表手机屏幕的长度。

https://www.bilibili.com/video/BV1d441167e9?from=search&seid=13125004413474845089