flex布局中flex:1和flex:auto的区别

最新推荐文章于 2024-12-14 22:51:43 发布
最新推荐文章于 2024-12-14 22:51:43 发布
阅读量9.9k 收藏 28
点赞数 12
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39808181/article/details/114102051
版权

在flex:1 时在尺寸不足时会优先最小化尺寸，flex:auto在尺寸不足时优先最大化内容尺寸。

效果如下所示：

flex：1 的尺寸是较长的尺寸优先牺牲自己的尺寸，而flex:auto 中是较长的尺寸优先扩展自己的尺寸。

所以，flex:1 更适合在等比例列表时使用，flex：auto适用于元素充分利用剩余空间，比如头部导航文字多少不一致时使用

flex布局布局之flex:1属性详解
一梦晓三生的博客
12-25 9290
弹性布局基本概念 采用Flex布局的元素，称为 Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main
flex: 1 和 flex: auto 的区别
Chloeeeeeeee的博客
04-13 1666
flex: 1 将会根据可用空间**平均分配**剩余空间，而 flex: auto 将会**根据内容大小来分配**剩余空间。
彻底搞懂 flex: 1，flex: auto，flex: 0
最新发布
程序员成长指北
12-14 57
点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群我们在日常使用flex布局的时候，经常会用到 flex 缩写。flex简写设置了项目如何增大或缩小以适应在容器中可用的空间。flex简写属性在下面有三个值的定义 默认值为 0 1 auto;flex-grow :定义项目的放大比例，默认为0flex-shrink :定义项目的缩小比例,默认为 1flex-basis :定义项目在分...
flex布局中 flex:1和flex:auto的区别
weixin_50809560的博客
02-25 317
flex布局中 flex:1和flex:auto的区别
彻底搞懂flex: 1，flex: auto，flex: 0
程序员成长指北
05-12 3910
大厂技术高级前端Node进阶 点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群我们在日常使用flex布局的时候，经常会用到 flex 缩写。flex简写设置了项目如何增大或缩小以适应在容器中可用的空间。flex简写属性在下面有三个值的定义 默认值为 0 1 auto;flex-grow :定义项目的放大比例，默认为0flex-shrink :定义项目的缩小比例,默认为 ...
Flex布局之flex：1
J1756465965的博客
03-07 2307
flex布局。flex:1
Flex布局
03-29
例如，要实现一个子元素在父元素中水平垂直居中，传统方法需要通过相对定位和绝对定位配合多行CSS代码，而使用Flex布局，只需要设置`display: flex`，`justify-content: center` 和 `align-items: center`，就能快速...
flex
wushiqinwu的博客
07-05 432
flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况： flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。同理，如下是等同的：.item {flex: 2333 3222 234px;} .item { flex-grow: 2333; flex-shrink
flex:1和flex:auto的区别 （面试题）
m0_59472149的博客
09-14 375
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .container{ display: flex; } .div{ width: 300px; border: 1px solid #f00; /* 无宽度均分 */ /* flex:1; *//* 无宽度可以均分 */ /* flex: 0.
flex:1详解，以及flex:1和flex:auto的区别
seimeii的博客
09-14 2726
flex:1详解，以及flex:1和flex:auto的区别
flex：auto含义
包磊磊的博客
03-06 2758
flex设置成1和auto有什么区别 首先明确一点是，flex是flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况： flex的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则flex的默认值是 0 1 auto。同理，如下是等同的： .item {flex: 2333 3222 234px;} .item { flex-grow: 2333; flex-shrink: 3222; flex-basis: 234px; } ...
flex:1是什么意思?flex:1和flex:auto有什么区别?
w1060436872的博客
09-12 439
flex:1是什么意思?flex:1和flex:auto有什么区别?
flex:1和flex:auto详解
道理我都懂的专栏
10-13 4388
首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写。 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主...
flex:1 和 flex:auto 的区别
05-01
flex:1和flex:auto是CSS3中Flexbox布局模式中两种不同的属性。其中，flex:1是指元素在Flex容器中会自动填充可用空间，占据剩余的所有空间，而flex:auto则是指元素会根据内容自动调整自身大小，不会主动占据剩余空间。 具体来说，flex:1会将剩余空间均分给Flex容器中的每个元素，这个均分的比例是根据每个元素的flex-grow属性来分配的。而flex:auto则会根据元素自身内容的大小来调整元素的大小，不会主动占据剩余空间。 举个例子，如果一个Flex容器中有两个子元素，第一个子元素设置为flex:1，第二个子元素设置为flex:auto。那么第一个子元素会占据剩余的所有空间，并且根据其flex-grow属性的值来分配这些空间；而第二个子元素则会根据其自身内容的大小来调整自己的大小，不会主动占据剩余空间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值