Flex 布局参数分析

Posted 2022-09-23 the-last

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%;  // 嗯，这样合法。