Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >深入了解 Flex 属性

深入了解 Flex 属性

作者头像
前端小智@大迁世界
发布于 2020-09-22 03:24:22
发布于 2020-09-22 03:24:22
1.7K00
代码可运行
举报
文章被收录于专栏:终身学习者终身学习者
运行总次数:0
代码可运行

你有没有想过 CSS 中的 flex属性如何工作? 它是 flex-growflex-shrinkflex-basis的简写。 开发中最常见的写法是flex:1,它表示 flex 项目扩展并填充可用空间。

接下来,我们来详细看看它表示是什么意思。

flex-grow 属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。flex-grow的值只接受一个整数。考虑下面代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="wrapper">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex-grow: 1;
}

注意:flex-grow会影响宽度或高度,具体取决于flex-direction属性。 对于以下示例,默认的flex-direction的值都是row

在不使用flex-grow的情况下,flex 项目的宽度将默认为其初始宽度。 但是,使用flex-grow: 1时,flex 项目会平均剩余可用的空间。

你可能想知道,flex 项目之间的空间是如何分配的?嗯,这是个好问题,稍后会回答。

在下面的图中,是没有使用flex-grow情况。换句话说,这是它们的自然大小。

要了解 flex 项目宽度的计算方式,可以参考下面的公式。

我们来计算一下文本是 CSS 的项目宽度。

项目宽度 = (( flex-grow / flex-grow 总个数) * 可用空间)+ 初始项目宽度

多个 flex-grow 值

在前面的示例中,所有flex项目的flex-grow值都相同。 现在我们把第一项的flex-grow值改为2。 这们它又是如何计算? 请注意,本示例的可用空间为498px

上图已经解释的很清楚,这里就不在啰嗦了,还不懂的,可以多看几次。

可以用0作为flex-grow的值吗?

当然可以!因为flex-grow属性接受整数值,所以可以使用0,可以防止 flex 项目占用可用空间的一种方式。

这在边界情况下非常有用,我们希望使 flex 项目保持其初始宽度。

flex-grow 不能让 flex 项目相等

有一个常见的误解,使用flex-grow会使项目的宽度相等。这是不正确的,flex-grow的作用是分配可用空间。正如在公式中看到的,每 flex 项目的宽度是基于其初始宽度计算的(应用flex-grow之前的宽度)。

如果你想让项目的宽度相等,可以使用flex-basis,这个在接下来的部分会对此进行讲解。

flex-shrink 属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

考虑下面的例子:中间的项目宽度为300pxflex-shrink的值为`。如果没有足够的空间来容纳所有的项目,则允许项目缩小宽度。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.item-2 {
    width: 300px;
    flex-shrink: 1;
}

在下列条件下,浏览器会保持项目宽度为300px:

  • 所有项目宽度的总和小于包装器宽度
  • 视窗宽度等于或小于项目

下面是项目在不同视口大小下的行为。

如图所示,在视口宽度大于300px时,宽度为300px,少于 300px,该项目的宽度就被压缩成跟视口一样的宽度。

大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】

flex-basis 属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

flex-basis可以设为跟widthheight属性一样的值(比如350px,默认值为 auto),则项目将占据固定空间。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
}

在上面的例子中,第一项的宽度为50%。这里需要将flex-grow重置为0,以防止项目宽度超过50%

如果将 flex-basis 设置为 100%,会怎么样?该项目单独占一行,其他项目将换行。

flex 属性

flex属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。这也说 flex 项目会根据其内容大小增长

flex 项目相对大小
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.item {
    /* 默认值,相当于 flex:1 1 auto */
    flex: auto;
}

flex 项目的大小取决于内容。因此,内容越多的flex项目就会越大。

flex 项目绝对大小

相反,当flex-basis属性设置为0时,所有flex项目大小会保持一致。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.item {
    /* 相当于  flex: 1 1 0% */
    flex: 1;
}

我喜欢 flex 属性的几个点!

顾名思义,此属性可以灵活使用其值。 请看下面的例子。

一个值的情况
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.item {
    flex: 1;
}

上面默认对应的值是 1 1 0,也就是 flex-grow: 1,flex-shrink:1, flex-basic: 0

两个值的情况
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.item {
    flex: 1 1;
}

上面对应的值是 1 1 0,也就是 flex-grow: 1,flex-shrink:1, flex-basic: 0

一个长度值

如果 flex 值是一个长度值,这会作用于flex-basisflex-growflex-shrink默认为1

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.item {
    flex: 100px;
    /* flex: 1 1 100px */
}
使用无单位0

有时,你想把 felx-basis 设置为 0,你可能会这样写:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.item {
    flex: 0;
}

不建议这样做,因为让开发人员和浏览器感到困惑。 你到底是要把 flex-grow 或者 flex-shirnk 设置为 0,还是将 flex-basis 设置为 0

所以,你应该添加一个单位,如px%

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.item {
    flex: 0%;
    /* flex: 1 1 0% */
}

建议使用 flex 简写属性

当你需要设置growshrinkbasis时,最好使用flex属性来实现这个目的。

根据 CSS 规范:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
建议开发者使用 `flex` 简写来控制灵活性,而不是直接使用它的普通属性,因为简写的可以正确地重置任何未指定的组件以适应常见情景。

flex 用例

用户头像

flexbox 的一个常见用例是用户组件,头像和文本内容应该在同一行。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="user">
    <img class="user__avatar" src="shadeed.jpg" alt="" />
    <div>
        <h3>Ahmad Shadeed</h3>
        <p>Author of Debugging CSS</p>
    </div>
</div>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.user__avatar {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
}

上面为 头像 添加了 flex:0 0 70px。 如果这里不这样设置,在某些旧版浏览器,图像看起来像被压缩的一样。 除此之外,flex 的优先级高于width属性(flex-direction: row)或height(flex-direction: column)。

如果我们仅通过调整flex属性来改变头像的大小,那么width将被浏览器忽略。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.user__avatar {
    /* width 是 100px, 不是 70px */
    flex: 0 0 100px;
    width: 70px;
    height: 70px;
}

大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】

头部

如果想让一个标题填满所有可用的空间,使用flex: 1非常适合这种情况。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.page-header {
    display: flex;
    flex-wrap: wrap;    
}

.page-header__title {
    flex: 1;
}
输入框
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
form {
    display: flex;
    flex-wrap: wrap;    
}

input {
    flex: 1;
    /* Other styles */
}
在两张卡片上对齐最后一项

假设CSS grid具有两列布局。这里的问题是日期没有对齐,它们应该在同一条线上(红色那条)。

我们可以使用flexbox做到这一点。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="card">
    <img src="thumb.jpg" alt="">
    <h3 class="card__title">Title short</h3>
    <time class="card__date"></time>
</div>

通过设置flex-direction: column,我们可以在标题上使用flex-grow使其填充可用空间,这样,即使标题很短也将日期保留在末尾。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.card {
    display: flex;
    flex-direction: column;
}

/* 第一个解决方案 */
.card__title {
    flex-grow: 1;
}

同样,无需使用flex-grow也可实现,我们使用margin-top: auto

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* 第二个解决方案*/
.card__date {
    margin-top: auto;
}

用例 - 多个 flex 属性

这里的意思是使用flex-growflex-shrink,但值不为1。在本节中,我们会探讨一些可以将其合并的想法。

footer

像上面这样的布局, 我们可以这样写:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.actions {
    display: flex;
    flex-wrap: wrap;
}

.actions__item {
    flex: 2;
}

.actions__item.user {
    flex: 1;
}
扩展动画

我们可以做的一件有趣的事情是在悬停时为flex项目设置动画。 这很有用的,下面是一个简单的例子:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.palette {
    display: flex;
    flex-wrap: wrap;
}

.palette__item {
    flex: 1;
    transition: flex 0.3s ease-out;
}

.palette__item:hover {
    flex: 4;
}
增加的用户体验

源码:https://codepen.io/shshaw/pen...

当内容大于其包装器时

不久前,我收到一个读者的问题,他的问题如下。 如图所示,两个图像应保留在其包装的边界内。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.wrapper {
    display: flex;
}

.wrapper img {
    flex: 1;
}

这里,即使 使用了 flex: 1,图像仍然会溢出。 根据CSS规范:

默认情况下,flex 项目不会缩小到其最小内容大小(最长的单词或固定大小的元素的长度)以下。 要更改此设置,请设置min-widthmin-height属性。

上面情况,是由于图片太大,flexbox不会缩小图片。 要更改此行为,我们需要设置以下内容:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.wrapper img {
    flex: 1;
    min-width: 0;
}

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://ishadeed.com/article/...

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
看完这篇,对flex布局还不熟悉,那就来找我(flex布局最全详解)
传统的页面布局,基于盒子模型margin + border + padding + content,依赖 display + position + float。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
javascript艺术
2021/05/28
11.2K0
看完这篇,对flex布局还不熟悉,那就来找我(flex布局最全详解)
你们等了很久的弹性布局(flex),还不快来~!
传统的布局方案中,我们基本都是在基于盒模型,依赖dispaly(显示)、position(定位)以及float(浮动)等属性来操作。但是这些操作需要用到一些特殊的布局上就会显得不方便了,比如,我们最常见的模块垂直居中的实现就不是很容易。而正是针对这些不易实现的布局,我们今天就跟大家分享一种简单好用的布局方式——弹性布局(flex),一起来学习吧~~~ flex布局的由来 flex是flexible box的缩写,意思是“弹性布局”,用来为操作盒模型提供丰富的灵活性。早在2009年,W3C就已经提出这种简单、
HTML5学堂
2018/03/13
1.1K0
你们等了很久的弹性布局(flex),还不快来~!
Flex入坑指南
弹性布局flex是一个几年前的CSS属性了,说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局,什么postion: absolute+margin,float+padding,各种都可以使用flex来取代之。 早两年在使用的时候,还是会担心有兼容性问题的,某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。 好在现在已经是2018年了,不必再担心那些老旧的设备,希望这篇文章能帮你加深对flex的认识。
贾顺名
2019/12/05
6820
flex布局详细
Flex 是 Flexible Box 的缩写,意为“弹性布局”或者“弹性盒子”,是 CSS3 中的一种新的布局模式,可以简便、完整、响应式地实现各种页面布局,当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前,几乎所有的浏览器都支持 Flex 布局。
FGGIT
2024/10/15
1730
flex布局详细
30分钟彻底弄懂flex布局
在这篇文章里,想说说flex布局的属性语法及其细节。那么网上也有不少flex布局的教程,为什么又要再写一篇?
elson
2018/10/13
11.3K5
30分钟彻底弄懂flex布局
深入 CSS 中的弹性盒子 Flexible Box
弹性布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间,或将其收缩来避免溢出。
IT技术小咖
2019/07/09
1.2K0
Flex 布局教程(语法)
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
botkenni
2022/01/10
4220
Flex 布局教程(语法)
CSS3的flex布局
flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 自适应子元素(flex item,又称伸缩项目)的宽度 伸缩项目的float,clear,vertical-align属性失效 不能继承flex框,但可以依次设置 可以修改flex流的方向以及布置规则          现在就大体讲述下这个具体属性的表示含义。 设置flexbox的兼容性   将一个容器设置为flexbox(又称伸缩容器)很简单,但是却存在一些兼容性的问题,比如
欲休
2018/03/15
1.5K0
CSS3的flex布局
CSS 布局_2 Flex弹性盒
弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为,弹性盒属于 CSS 3 部分,IE9 以下不支持,现代浏览器指的就是 IE9 及以上的浏览器
Nian糕
2018/08/21
1.6K0
CSS 布局_2 Flex弹性盒
网页布局之flex布局的使用
Flex布局方案很早都提出来了,然后可以简便、完整、响应式地实现各种页面布局。随着浏览器的发展,目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。.
天天_哥
2018/09/29
1K0
CSS弹性布局(Flex) 详解
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
田小檬
2023/08/24
1.4K0
「译」Flexbox 基本原理
整理自 MDN web docs 的笔记,同时参考了 Web Bos 上的什么是 Flexbox系列视频。
Chor
2019/11/08
2.1K0
CSS Flex 布局
给元素添加display: flex,该元素变成了一个弹性容器(flex container),它的直接子元素变成了弹性子元素(flex item)。
Cellinlab
2023/05/17
1.4K0
CSS Flex 布局
CSS Flexbox 可视化手册 [每日前端夜话(0x1E)]
Flexbox是 Flexible Box Module(弹性盒模型)的缩写。 是一种可以轻松控制html元素之间的空间分布和对齐的布局模型。
疯狂的技术宅
2019/03/27
3.3K0
CSS Flexbox 可视化手册 [每日前端夜话(0x1E)]
css3 flex弹性布局详解
2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
忆愿
2024/07/30
2660
css3 flex弹性布局详解
Flex 布局相关用法
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中 就不容易实现。
书童小二
2018/09/03
1.5K0
Flex 布局相关用法
这次带大家彻底搞懂 flex 布局
flex 布局,即弹性布局,是前端开发中非常常用的布局方式。主要是馋它很简单就能让容器内元素水平垂直居中的能力。
前端西瓜哥
2022/12/21
1.4K0
这次带大家彻底搞懂 flex 布局
CSS-flex 布局
原文链接:https://note.noxussj.top/?source=cloudtencent 为什么要使用 flex 布局? flex 布局是目前比较流行的一种布局,因为它十分简单灵活,区区简
菜园前端
2023/04/16
4410
Flex布局
注:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
且陶陶
2023/04/12
1.5K0
Flex布局
Flex布局
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
超然
2018/08/03
1.7K0
相关推荐
看完这篇,对flex布局还不熟悉,那就来找我(flex布局最全详解)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验