flex:1和flex属性的简单理解

🤔今天在写项目的时候遇到一个关于布局的问题, 就是 flex: 1;

很多人都知道，这是一个简写属性。是 flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
开发中最常见的写法是flex：1，它表示 flex 项目扩展并填充可用空间。

它们各自的属性为：

flex-grow属性

☑️定义 flex 项目的 flex-grow 。负值无效。省略时默认值为 1。 (初始值为 0)
✅解析：flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-grow的值只接受一个整数。

flex-shrink属性

☑️定义 flex 元素的 flex-shrink 。负值无效。省略时默认值为1。 (初始值为 1)
✅解析：flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-basis属性

☑️定义 flex 元素的 flex-basis 属性。若值为0，则必须加上单位，以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)
✅flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

数值语法

可以使用一个，两个或三个值来指定 flex属性。

单值语法: 值必须为以下其中之一:

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

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

• 一个无单位数：它会被当作 <flex-shrink> 的值。
• 一个有效的宽度值: 它会被当作 <flex-basis> 的值。

三值语法:

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

语法示例

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;

/* 一个值, 无单位数字: flex-grow */
flex: 2;

/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/* 两个值: flex-grow | flex-basis */
flex: 1 30px;

/* 两个值: flex-grow | flex-shrink */
flex: 2 2;

/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;

取值：

所以flex属性的默认值为：0 1 auto （不放大会缩小）
flex为1 : 1 1 0%（放大且缩小）
flex为none：0 0 auto （不放大也不缩小）
flex为auto：1 1 auto （放大且缩小）

CSS的规范是：
建议开发者使用 `flex` 简写来控制灵活性，而不是直接使用它的普通属性，因为简写的可以正确地重置任何未指定的组件以适应常见情景。

简而言之：

当你需要设置grow、shrink和basis时，建议使用 flex 简写属性来实现这个目的。

这是w3上关于flex属性的解释：https://www.w3.org/TR/css-flexbox-1/#flex-common