CSS flex属性的深层次理解

在CSS中,flex属性是使用来设置或检索弹性盒模型对象的子元素如何分配空间,是 flex-grow属性、flex-shrink属性和 flex-basis 属性的简写属性。flex属性针对的是弹性盒模型对象的子元素,对于其它元素,flex属性不起任何作用。但是flex布局要想玩得溜溜溜,还是需要我们对flex属性深入的理解才行,一起来看一下。

flex属性的语法

语法

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

上面这种CSS语法被称为格式化语法,大部分CSS属性值都比较简单,格式化语法看不出有什么优势。但是如果CSS属性值比较的复杂,规则较多,例如CSS渐变或者这里的flex属性,则格式化语法就比较重要了,可以知道一些平时没有注意到的语法上的细节,也能一看就知道语法规则。

有人会反驳,你这是在扯犊子吧,“一看就知道语法规则”,我看上面各种交错的字符,根本就不知道说的什么意思,还不如直接给我展示几个例子实际呢!

这种体验类似使用Markdown语法写文章,在不了解Markdown语法的时候,还是觉得可视化操作来得实用。但是如果Markdown语法很熟悉,对吧,是不是“真香”就来了?

CSS语法规则也是一样的,觉得看起来吃力不方便是因为不理解规则。

所以,要想CSS学得专业且深入,CSS语法规则一定要很熟悉。

回到这里,我们一点点对语法进行解构,顺便带大家了解下CSS语法中的一些特殊符号的含义。

语法解构

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

首先是单管道符|。表示或者。也就是这个符号前后的属性值都是支持的。因此,下面这些语法都是支持的:

flex: auto;
flex: none;

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

接下来是[ … ]这一部分。其中方括号[]表示范围。也就是支持的属性值在这个范围内。我们先把方括号[]内其他特殊字符去除,可以得到下面的语法:

flex: auto;
flex: none;

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

这就是说,flex属性值支持空格分隔的3个值,因此,下面的语法都是支持的。

flex: auto;
flex: none;
/* 3个值 */
flex: 1 1 100px;

然后我们再看方括号[]内的其他字符,例如问号?,表示0个或1个。也就是flex-shrink属性可有可无。因此,flex属性值也可以是2个值。因此,下面的语法都是支持的。

flex: auto;
flex: none;
/* 2个值 */
flex: 1 100px;
/* 3个值 */
flex: 1 1 100px;

然后我们再看双管道符||,也是独立的意思。表示前后可以分开独立合法使用。也就是flex: flex-grow flex-shrink?和flex-basis都是合法的。于是我们又多了2种合法的写法:

flex: auto;
flex: none;
/* 1个值,flex-grow */
flex: 1;
/* 1个值,flex-basis */
flex: 100px;
/* 2个值,flex-grow和flex-basis */
flex: 1 100px;
/* 2个值,flex-grow和flex-shrink */
flex: 1 1;
/* 3个值 */
flex: 1 1 100px;

文字表述

1个值

如果flex的属性值只有一个值,则:

  • 如果是数值,例如flex: 1,则这个1表示flex-grow,此时flex-shrink和flex-basis都使用默认值,分别是1和auto。
  • 如果是长度值,例如flex: 100px,则这个100px显然指flex-basis,因为3个缩写CSS属性中只有flex-basis的属性值是长度值。此时flex-grow和flex-shrink都使用默认值,分别是0和1。

2个值

如果flex的属性值有两个值,则第1个值一定指flex-grow,第2个值根据值的类型不同表示不同的CSS属性,具体规则如下:

  • 如果第2个值是数值,例如flex: 1 2,则这个2表示flex-shrink,此时flex-basis使用默认值auto。
  • 如果第2个值是长度值,例如flex: 1 100px,则这个100px指flex-basis,此时flex-shrink都使用默认值0。

3个值

如果flex的属性值有三个值,则这3个值分别表示flex-grow,flex-shrink和flex-basis。这个顺序该如何记忆,时间久了岂不是很容易忘记。这个告诉大家我的邪恶记忆法,叫做“能大能小的鸡鸡”。grow是增加变大意思,shrink是收缩变小的意思,而basis是基(鸡)础基(鸡)准的意思,于是连起来就是“能大能小的鸡鸡”。

帅气

flex属性值深入

关键字属性值

initial

初始值。flex:initial等同于设置”flex:0 1 auto”。可以理解为flex属性的默认值。任意打开一个页面,我们打开控制台执行下面的代码:

window.getComputedStyle(document.body).flex;
// 结果就是"flex: 0 1 auto"

也就是flex属性默认值是”0 1 auto”,等同于initial关键字的计算值。

该默认值图形示意如下:

初始值分解示意

其行为表现文字描述为:

不会增长变大占据flex容器中额外的剩余空间(flex-grow:0),会收缩变小以适合容器(flex-shrink:1),尺寸根据自身宽高属性进行调整(flex-basis:auto)。

案例

于是如果我们只给容器设置display:flex,同时子项元素内容都很少,就会有下图所示的效果:

flex:initial布局效果

如果子项内容很多,由于flex-shrink:1,因此,会缩小,表现效果就是文字换行。如下:

内容很多时候的表现

关键CSS代码和HTML代码如下:

.container {
    display: flex;
}

<div class="container">
    <item>码云</item>
    <item>笔记</item>
    <item>程序</item>
    <item>前端</item>
    <item>开发</item>
</div>

auto

flex:auto等同于设置”flex:1 1 auto”。

图示如下:

auto关键字分解示意

其行为表现文字描述为:

子项会增长变大占据flex容器中额外的剩余空间(flex-grow:1),会收缩变小以适合容器(flex-shrink:1),尺寸根据自身宽高属性进行调整(flex-basis:auto)。

案例

HTML不变,子项元素的CSS增加flex:auto的设置:

.container {
    display: flex;
}
.container item {
    flex: auto;
}

结果就是下面这样,子项宽度变大填满了剩余空间,由于每一个子项元素的flex-grow的值都是1,因此,5等分填充。

CSS flex:auto布局效果

none

flex:none等同于设置”flex:0 0 auto”。

图示如下:

none的分解示意图

其行为表现文字描述为:

子项会不会增长变大占据flex容器中额外的剩余空间(flex-grow:0),也不会收缩变小以适合容器(flex-shrink:0),尺寸根据自身宽高属性进行调整(flex-basis:auto)。

案例

HTML不变,每个子项内容很多,同时子项元素的CSS增加flex:none的设置:

.container {
    display: flex;
}
.container item {
    flex: none;
}

结果就是下面这样,子项宽度超过了容器的尺寸,由于flex-shrink的值都是0,因此,不会收缩变小导致子项的内容撑爆了容器。

CSS flex:none布局效果

结语

有些人在使用flex实现一些效果的时候,会配合min-width/max-width属性,让规律子项的布局更加智能,实际上,是多余的,多此一举,虽然最终实现的效果看上去不错啊,实际上,只需要一个flex属性就可以搞定了,这个打算在下一篇文章,flex-basis属性深入的时候介绍。

内容学习整理来源:张鑫旭老师《CSS flex属性深入理解

关注web前端开发的个人技术博客,分享前端经验和技巧
码云笔记 » CSS flex属性的深层次理解

发表评论

提供最优质的资源集合

立即查看 了解详情