当前位置: 首页 > news >正文

flex:1详解,以及flex:1和flex:auto的区别

什么是flex:1?

在css中,我们经常可以看到这样的写法:

.box {display: flex;
}.item {flex: 1;
}

这里的flex:1相当于flex: 1 1 0%,它是一个简写属性,表示项目(flex item)在弹性容器(flex container)中如何伸缩。它相当于flex: 1 1 0%,包含了三个子属性:

  • flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
  • flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
  • flex-basis 定义在分配多余空间之前,项目占据的主轴空间(main size),浏览器根据此属性计算主轴是否有多余空间,默认值为 auto ,即项目本身的大小。

flex:1的作用

使用flex:1的作用是让项目能够自动填充剩余空间,实现自适应布局。例如,我们有一个水平排列的三个项目,它们的内容长度不一样,我们想让它们平均占据一行的空间,就可以给它们都设置flex:1\

<div class="container"><div class="item">Hello</div><div class="item">World</div><div class="item">Flex</div>
</div>
.container {display: flex;
}.item {flex: 1;
}

这样,无论容器的宽度如何变化,项目都会自动调整宽度,保持平均分配。

flex:1和其他值的区别

flex属性还可以取其他值,例如:

  • flex: none,相当于flex: 0 0 auto,表示项目不会伸缩,保持原始大小。
  • flex: auto,相当于flex: 1 1 auto,表示项目会根据自身大小和剩余空间进行伸缩。
  • flex: n(n为正整数),相当于flex: n 1 0%,表示项目的放大比例为n,其他值默认。

我们可以通过修改上面的例子来观察不同值的效果:

<div class="container"><div class="item none">Hello</div><div class="item auto">World</div><div class="item one">Flex</div>
</div>
.container {display: flex;
}.item {border: 1px solid black;
}.none {flex: none;
}.auto {flex: auto;
}.one {flex: 1;
}

可以看到,none类的项目保持了原始大小,auto类的项目根据内容长度进行了伸缩,one类的项目平分了剩余空间。

felx:1和flex:auto的区别

  • flex-basis属性定义了项目在分配多余空间之前,占据的主轴空间(main size)。
  • flex:1相当于flex: 1 1 0%,表示项目的基准大小为0%,不考虑项目本身的大小,只根据剩余空间进行伸缩。
  • flex:auto相当于flex: 1 1 auto,表示项目的基准大小为auto,即项目本身的大小,同时也会根据剩余空间进行伸缩。

这样,当容器的大小变化时,两者的表现也不同。

  • 如果容器有足够的空间,flex:1和flex:auto都会平分剩余空间,但是flex:auto会保持项目本身的最小宽度,而flex:1不会。
  • 如果容器没有足够的空间,flex:1会优先压缩内容,使得所有项目都能等分空间,而flex:auto会优先保持内容的完整性,挤压其他项目的空间。

总结

flex:1是一个常用的CSS属性,它可以让项目在弹性容器中自动填充剩余空间。
它是一个简写属性,包含了三个子属性:flex-grow, flex-shrink, flex-basis。
它相当于flex: 1 1 0%,flex:1和flex:auto都会占满剩余空间,我们可以根据合适的需求去选择这两种属性。

http://www.lryc.cn/news/171495.html

相关文章:

  • 在VMware虚拟机中固定CentOS系统ip(使用桥接模式)
  • 怎样才能让百度搜索到自己的博客?--九五小庞
  • 【学习笔记】多模态综述
  • MLAgents (0) Unity 安装及运行
  • typename关键字详解(消除歧义)
  • 设计模式_解释器模式
  • 【算法基础】数学知识
  • PDCA循环
  • Redis 缓存雪崩、缓存穿透、缓存击穿
  • Android Media3 ExoPlayer 开启缓存功能
  • MyBatis注解开发
  • C# Onnx Yolov8 Cls 分类
  • Fiddler常用的快键键
  • 【Linux】生产消费模型 + 线程池
  • 基于springboot+vue的爱心助农网站(前后端分离)
  • “华为杯”研究生数学建模竞赛2019年-【华为杯】D题:汽车行驶工况构建(附获奖论文和MATLAB代码实现)
  • v-cloak的作用和原理
  • pip pip3安装库时都指向python2的库
  • 和逸云 RK3229 如何进入maskrom强刷模式
  • 防静电离子风扇的应用及优点
  • git中无法使用方向键的问题
  • 负载均衡中间件---Nginx
  • Linux硬链接、软链接
  • React面试题总结(一)
  • 一句话设计模式12:适配器模式
  • iOS加固保护技术:保护你的iOS应用免受恶意篡改
  • 阿里云产品试用系列-云桌面电脑
  • vue3使用vue-virtual-scroller虚拟滚动遇到的问题
  • c#用Gnuplot画图源码
  • 【前端设计模式】之工厂模式