flex CSS简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

  1. /* 关键字值 */
  2. flex: auto;
  3. flex: initial;
  4. flex: none;
  6. /* 一个值, 无单位数字: flex-grow */
  7. flex: 2;
  9. /* 一个值, width/height: flex-basis */
  10. flex: 10em;
  11. flex: 30px;
  12. flex: min-content;
  14. /* 两个值: flex-grow | flex-basis */
  15. flex: 1 30px;
  17. /* 两个值: flex-grow | flex-shrink */
  18. flex: 2 2;
  20. /* 三个值: flex-grow | flex-shrink | flex-basis */
  21. flex: 2 2 10%;
  23. /*全局属性值 */
  24. flex: inherit;
  25. flex: initial;
  26. flex: unset;

此属性是以下CSS属性的简写：

可以使用一个，两个或三个值来指定 flex属性。
单值语法: 值必须为以下其中之一:

  • 一个无单位数(): 它会被当作flex: 1 0; 的值被假定为1，然后 的值被假定为0。
  • 一个有效的宽度(width)值: 它会被当作 的值。
  • 关键字none，auto或initial.

双值语法: 第一个值必须为一个无单位数，并且它会被当作 的值。第二个值必须为以下之一：

  • 一个无单位数：它会被当作 的值。
  • 一个有效的宽度值: 它会被当作 的值。

三值语法:

  • 第一个值必须为一个无单位数，并且它会被当作 的值。
  • 第二个值必须为一个无单位数，并且它会被当作 的值。
  • 第三个值必须为一个有效的宽度值， 并且它会被当作 的值。

取值

initial
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为”flex: 0 1 auto”。
auto
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 “flex: 1 1 auto”.
none
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为”flex: 0 0 auto”。
<’flex-grow’>
定义 flex 项目的 flex-grow 。负值无效。省略时默认值为 1。 (初始值为 0)
<’flex-shrink’>
定义 flex 元素的 flex-shrink 。负值无效。省略时默认值为1。 (初始值为 1)
<’flex-basis’>
定义 flex 元素的 flex-basis 属性。若值为0，则必须加上单位，以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)

image.png