三个 flex 属性对元素的影响
首先我们需要了解,flex 是三个属性 flex-grow
、flex-shrink
、flex-basis
的简写,可以使用一个、两个、或者三个值指定 flex 属性。具体语法可以参考MDN-flex
接下来我们逐一拆解这三个属性对元素的影响
flex-basis
flex-basis 定义了空间分配发生之前初始化 flex 子元素的尺寸,属性默认值 auto
; flex 子元素未伸张和收缩之前,它的大小是多少。
如果 flex-basis 设置为 auto , 浏览器会先检查 flex 子元素的主尺寸是否设置了 flex 子元素的初始值。
比如说你已经给你的 flex 子元素设置了 150px 的宽,则 150px 就是这个 flex 子元素的 flex-basis;如果没有设置,则 auto 会解析为其内容的大小。这个例子中,给第一个元素设置宽度150px,第二、三个元素不设置宽度。
:first-child {
width: 150px;
}
效果如下:
如果你想 flexbox 完全忽略 flex 子元素的尺寸就设置 flex-basis 为 0。这样就算元素一设置了宽度,它最终的宽度也是内容宽度。
正负自由空间
在介绍剩下两个属性前先看两个概念 positive free space
正向自由空间和 negative free space
反向自由空间:
-
正向自由空间
比如说,现在有 500px 宽的 flex 容器,flex-direction 属性值为 row, 三个 100px 宽的 flex 子元素, 那么没有被填充的 200px 的 就是正向自由空间(positive free space)。
-
反向自由空间
当子元素的宽度总和大于容器宽度时,溢出的尺寸100px就是反向自由空间。
那么用什么属性分配正负自由空间呢?
flex-grow
- flex-grow
默认值 0
,若被赋值为一个正整数, flex 元素会以 flex-basis 为基础,沿主轴方向增长尺寸,并占据可用空间。flex-grow 按比例分配增长空间。
初始状态:我们给三个元素都设定宽度,并且总和不大于主轴宽度
.flex-grow-father {
width: 500px;
div:nth-child(1) {
width: 50px;
}
div:nth-child(2) {
width: 100px;
}
div:nth-child(3) {
width: 150px;
}
}
增加的宽度计算方法:假设元素的 flex-grow
值为 x
,正向自由空间宽度为l,则每个元素增加的宽度=xx的总和∗l\frac{x}{x的总和}*l ,元素最终宽度 = 元素初始宽度 增加的宽度元素初始宽度 增加的宽度 ;
- 相同比例增长:当给每个子元素的都设定相同的 flex-grow 值,每个元素就会增长相同的宽度
.with-same-flex-grow {
* {
flex-grow: 1;
}
}
效果如下:
本例中第一个元素宽度的计算 11 1 1∗200 50=116.67px\frac{1}{1 1 1}*200 50 = 116.67px
;第二个元素宽度宽度计算 11 1 1∗200 100=166.67px\frac{1}{1 1 1}*200 100 = 166.67px
;第三个同理为216.67px216.67px
- 不同比例增长:给每个子元素的都设定不同的 flex-grow 值
.with-different-flex-grow {
div:nth-child(1) {
flex-grow: 2;
}
div:nth-child(2) {
flex-grow: 1;
}
div:nth-child(3) {
flex-grow: 1;
}
}
效果如下:
本例中第一个元素宽度的计算22 1 1∗200 50=150px\frac{2}{2 1 1}*200 50 = 150px
;第二个元素宽度的计算12 1 1∗200 100=150px\frac{1}{2 1 1}*200 100 = 150px
;第三个同理是200px200px
- 如果想让开始时尺寸不同的元素内容宽度相等(平分容器宽度),可以将 flex-basis 设置为 0(完全忽略 flex 子元素的尺寸) flex-grow 为 1(等比例分配)
.average {
* {
/* flex: 1 1 0; */
flex-basis: 0;
flex-grow: 1;
}
}
效果如下:
flex-shrink
flex-shrink 属性指定了 flex 元素的缩小值,默认值为 1
; 它确定在分配 negative free space 时,flex 子元素相对于 flex 容器中其余 flex 子元素收缩的程度。默认值 1。用于减少盒子空间使盒子适应容器而不溢出(为了避免 border 干扰去掉边框)
我们给三个元素都设定宽度,并且总和大于主轴宽度;这里我们将元素的flex-shrink值设置为 0 (元素宽度不变,不需要吸收溢出的宽度),目的是观察一下反向自由空间。
.flex-shrink-wrapper {
display: flex;
div:nth-child(1) {
width: 100px;
background: gold;
}
div:nth-child(2) {
width: 200px;
background: tan;
}
div:nth-child(3) {
width: 300px;
background: gold;
}
}
.zero {
* {
flex-shrink: 0;
}
}
吸收的宽度计算:假设每个 flex-shrink 的值为 xnx_n
,元素的初始宽度为 lnl_n ,反向自由空间为LL 那么每个元素吸收的宽度为: xn∗lnx1∗l1 ... xn∗ln∗L\frac{x_n*l_n}{x_1*l_1 ... x_n*l_n}*L- 给子元素相同的 flex-shrink 值,这里以默认值 1 为例
.with-same-flex-shrink {
* {
flex-shrink: 1;
}
}
这时第一个元素的吸收宽度为:1∗1001∗100 1∗200 1∗300∗100=16.67px\frac{1*100}{1*100 1*200 1*300}*100 = 16.67px
,最终元素宽度为 100−16.67=83.37px100-16.67=83.37px这时第一个元素的吸收宽度为:1∗2001∗100 1∗200 1∗300∗100=33.33px\frac{1*200}{1*100 1*200 1*300}*100 = 33.33px
,最终元素宽度为 200−33.33=166.67px200-33.33=166.67px这时第一个元素的吸收宽度为:1∗3001∗100 1∗200 1∗300∗100=50px\frac{1*300}{1*100 1*200 1*300}*100 = 50px
,最终元素宽度为 300−50=250px300-50=250px- 给子元素不同的 flex-shrink 值
.with-different-flex-shrink {
div:nth-child(1) {
flex-shrink: 1;
}
div:nth-child(2) {
flex-shrink: 2;
}
div:nth-child(3) {
flex-shrink: 0;
}
}
这时第一个元素的吸收宽度为: 1∗1001∗100 2∗200∗100=20px\frac{1*100}{1*100 2*200}*100 = 20px
,最终元素宽度为 100−20=80px100-20=80px这时第二个元素的吸收宽度为:2∗2001∗100 2∗200∗100=80px\frac{2*200}{1*100 2*200}*100 = 80px
,最终元素宽度为 200−80=120px200-80=120px这时第三个元素的 flex-shrink 值为 0,不吸收宽度,最终元素宽度即为元素本身的宽度 300px300px
flex 的简写值
一般我们很少见上述属性单独使用,都是用flex这一个简写属性来表述元素的伸缩。
Flex
简写形式允许你把三个数值按这个顺序书写 flex-grow
,flex-shrink
,flex-basis
。以下是常见的几种取值:
flex: initial
的扩展为 0 1 auto (不可放大、可缩小、大小与容器元素大小一致)flex: auto
的扩展为 1 1 auto (可放大、可缩小、大小与容器元素大小一致)flex: none
的扩展为 0 0 auto (不可放大、不可缩小、大小与容器元素大小一致)flex: <positive-number>
的扩展为<positive-number> 1 0
flex: <positive-number>
的应用:
两栏布局
.two-grid-wrapper {
display: flex;
margin-top: 20px;
height: 200px;
.left {
width: 200px;
background-color: gold;
}
.right {
flex: 1;
background-color: tan;
}
}
效果如下:左侧宽度不变,右侧自适应
三栏布局
.three-grid-wrapper {
display: flex;
margin-top: 20px;
height: 200px;
.left {
width: 200px;
background-color: gold;
}
.right {
width: 200px;
background-color: gold;
}
.center {
flex: 1;
background-color: tan;
}
}
效果如下:左右宽度不变,中间自适应
PS.flex 子元素没有 positive free space 就不会增长;没有 negative free space 就不会缩小。
结束语
学习八股文的时候发现自己对flex布局很不熟悉,基本概念都说不上来,只会无脑用,于是去学习,然后就诞生了这篇文章。欢迎指正。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfcfbe
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01