标签：sel 数字 弹性 定位 效果 value prope lock auto
flex布局很好用，优点很多：静态流文件，空间概念，主流样式可以简单调整，同时支持bfc，空间可以动态分配，专业一维空间布局
这么多优点，所以要提倡使用弹性布局。
空间设置：flex的方向、定位这些可以再父节点设置。
内部单项设置：可扩展，可压缩，占比，剩余空间占比，独立对齐。这些需要在子节点设置。
就需要学会配置，可以简写的flex-item的属性：flex-grow | flex-shrink | flex-basis | order | align-self 。
数字和auto，举个例子：
flex: 1 auto; // flex: auto 效果一样
浏览器解析后是这样： 两个可变属性，被定为1，最后的基本宽高 设置为auto，说明flex的优先级最高的属性是 flex-basis，以此值为点做调整。
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
none，一类特殊设置：
flex: none; // 失去弹性效果，和 display：block; width: auto; 效果一样， 注意：设置有 none 再加其他值不合法。
浏览器解析后：
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
一个数字的情况：
flex: 1;
浏览器解析后： 平时喜欢非子节点都是这上flex: 1，就是这样的情况，所有item子节点同时参数收缩和增长空间的处理，所以可以按比例划分。
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
两个数字的情况：
flex: 2 1;
浏览器解析后：
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;
三个数字的情况
flex: 2 1 2; // 不合法，基础值必须是可用的单位，如百分比，px，em这些具体单位。
flex: 2 2 5%; // 嗯，这样合法。
标签：sel 数字 弹性 定位 效果 value prope lock auto
原文地址：https://www.cnblogs.com/the-last/p/11448120.html
