爱华Fullstack

主题

爱华Fullstack2021-01-30
579
2.4m

深入理解CSS flex属性 ​

提示

设置display:flex;如何正确使用flex属性

flex的属性值 ​

flex属性是flex-grow，flex-shrink和flex-basis的缩写

  • 宽度的分配逻辑
    • flex-basis就是分配固定的宽度。
    • flex-grow就是宽度仍有剩余的时候该如何分配。
    • flex-shrink就是剩余宽度不足的时候该如何分配。

语法解构 ​

CSS语法中的特殊符号的含义绝大多数就是正则表达式中的含义，例如单管道符|，方括号[]，问号？，个数范围花括号{}等。具体说明：

css
flex: auto;
flex: none;

flex: [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
css
flex: auto;
flex: none;

flex: [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]
css
flex: auto;
flex: none;
/* 3个值 */
flex: 1 1 100px;
css
flex: auto;
flex: none;
/* 2个值 */
flex: 1 100px;
/* 3个值 */
flex: 1 1 100px;
css
flex: auto;
flex: none;

flex: [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]

文字表述 ​

  • 1个值

    如果flex的属性值只有一个值，则：如果是数值，例如flex: 1，则这个1表示flex-grow，此时flex-shrink和flex-basis都使用默认值，分别是1和auto。**更正为：**此时flex-shrink和flex-basis的值分别是1和0%，注意，这里的flex-basis的值是0%，而不是默认值auto。如果是长度值，例如flex: 100px，则这个100px显然指flex-basis，因为3个缩写CSS属性中只有flex-basis的属性值是长度值。此时flex-grow和flex-shrink都使用默认值，分别是0和1。**更正为：**此时flex-grow和flex-shrink都是1，注意，这里的flex-grow的值是1，而不是默认值0。

  • 2个值

    如果flex的属性值有两个值，则第1个值一定指flex-grow，第2个值根据值的类型不同表示不同的CSS属性，具体规则如下：如果第2个值是数值，例如flex: 1 2，则这个2表示flex-shrink，此时flex-basis使用默认值auto。**更正为：**此时flex-basis计算值是0%，并非默认值auto。如果第2个值是长度值，例如flex: 1 100px，则这个100px指flex-basis，此时flex-shrink使用默认值0。

  • 3个值

    如果flex的属性值有3个值，则这长度值表示flex-basis，其余2个数值分别表示flex-grow和flex-shrink。下面两行CSS语句的语法都是合法的，且含义也是一样的：

最近更新