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

最新推荐文章于 2024-05-12 21:03:21 发布
最新推荐文章于 2024-05-12 21:03:21 发布
阅读量9.7k 收藏 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适用于元素充分利用剩余空间，比如头部导航文字多少不一致时使用

zc自由飞~
关注
  • 12
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
面试题之：flex:1什么意思
Bynine9的博客
05-27 485
flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果容器没有足够的空间，flex:1会优先压缩内容，使得所有项目都能等分空间，而flex:auto会优先保持内容的完整性，挤压其他项目的空间。如果容器有足够的空间，flex:1和flex:auto都会平分剩余空间，但是flex:auto会保持项目本身的最小宽度，而flex:1不会。flex:auto相当于flex: 1 1 auto，表示项目的基准大小为auto，即项目本身的大小，同时也会根据剩余空间进行伸缩。
一文搞懂flex:0,1,auto,none
程序员小明1024
12-20 2591
.markdown-body { color: rgba(56, 56, 56, 1); font-size: 15px; line-height: 30px; letter-spacing: 2px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open...
“flex: auto；”是什么意思？
前端小白的博客
12-20 929
的简写，即元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但在尺寸不足时会优先最大化内容尺寸。flex:auto 多用于内容固定，或者内容可控的布局场景，例如导航数量不固定，每个导航文字数量也不固定的导航效果就适合使用 flex:auto 效果来实现。flex 是复合属性，是flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个属性可选。当希望元素充分利用剩余空间，但是各自的尺寸按照各自内容进行分配的时候，适合使用 flex:auto。
flex：auto含义
包磊磊的博客
03-06 2693
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布局中 flex:1和flex:auto的区别
weixin_50809560的博客
02-25 276
flex布局中 flex:1和flex:auto的区别
flex: 1 和 flex: auto 的区别
Chloeeeeeeee的博客
04-13 1188
flex: 1 将会根据可用空间**平均分配**剩余空间，而 flex: auto 将会**根据内容大小来分配**剩余空间。
浅谈CSS3中display属性的Flex布局的方法
09-24
本文将深入探讨CSS3中`display`属性的`flex`布局方法，这是一种极具灵活性的页面布局技术，广泛应用于现代网页和应用开发，包括微信...在实际项目中，熟练掌握`Flex布局`的方法和技巧，将大大提高开发效率和代码质量。
flex布局实现上下固定中间滑动的布局方式
11-20
在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于拥有头部、底部固定内容，中间区域需要根据内容多少滚动的场景。以下是如何...
Flex布局
03-29
例如，要实现一个子元素在父元素中水平垂直居中，传统方法需要通过相对定位和绝对定位配合多行CSS代码，而使用Flex布局，只需要设置`display: flex`，`justify-content: center` 和 `align-items: center`，就能快速...
微信小程序控件学习：view的flex布局《下》
03-29
上一章即微信小程序之view的flex布局(1)里，我们学习了flex容器的属性，总结一下它里面包括 (1)flex-direction 设置容器内子元素即flex-item的排列方向。 (2)flex-warp 设置容器内子元素是否换行。 (3)justify-...
移动web开发实例flex布局案例源码
02-16
在现代Web开发中，Flex布局（Flexible Box Layout）已经成为创建响应式、动态和灵活的用户界面的首选方法，尤其在移动设备上。本实例聚焦于使用Flex布局进行移动Web开发，通过具体的源码分析，我们可以深入理解并...
基本布局_flex基本布局模板_flex_
09-30
在前端开发中，Flex布局（Flexible Box）是一种强大的盒模型布局方式，允许开发者轻松地创建响应式和动态的用户界面。这个"基本布局_flex基本布局模板_flex_"项目旨在介绍和提供一个基础的Flex布局模板，帮助开发者...
flex布局Flex实现常见布局的汇总
04-11
先简单介绍一下，要使用flex布局，需要先给一个容器元素设置display:flex让它变成flex容器。 然后其所有的直接子元素就变成flex子元素了，在flex里存在两根轴，叫主轴和交叉轴，互相垂直，主轴默认水平，flex子元素...
详解解决flex布局的justify-content: space-between对齐方式的一个BUG的两种方法
12-13
在CSS布局设计中，Flexbox（弹性盒布局）是一种强大的工具，可以轻松实现各种复杂的排列和对齐方式。然而，在实际应用中，开发者有时会遇到一些预期之外的问题，其中之一就是`justify-content: space-between`对齐...
css3 flex布局 justify-content:space-between 最后一行左对齐
11-21
在CSS3的Flex布局中，`justify-content: space-between`是一种常见的水平分配方式，它将元素之间的空白均匀分布，首尾元素紧贴容器边界。然而，当你试图通过`justify-self: start`使最后一行的元素左对齐时，你会...
flex:auto元素内容超出显示省略号设置无效 解决方案
苍老师背后的男人
10-13 4718
举个例子：content元素的 width 为 200px（即下图 黄色背景），中间有两层div，分别是 aaa 和 bbb，都是flex布局，且没设置width，最里面一层有个p 元素。要求： p 元素的 宽度 根据 内容的长度 自适应； 若 p 元素内容超长，则显示为省略号； 问题：从上图可以看出，内容超出时，虽然设置了css样式，但并没有变成 省略号。 解决方案：p元素加多一个 width: 0 即可。如下图： 注意：width的值可以随便设置，只要不是百分比类的单位( 如vw，%..
彻底搞懂flex: 1，flex: auto，flex: 0
最新发布
程序员成长指北
05-12 748
大厂技术高级前端Node进阶 点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群我们在日常使用flex布局的时候，经常会用到 flex 缩写。flex简写设置了项目如何增大或缩小以适应在容器中可用的空间。flex简写属性在下面有三个值的定义 默认值为 0 1 auto;flex-grow :定义项目的放大比例，默认为0flex-shrink :定义项目的缩小比例,默认为 ...
flex:1 和 flex:auto 的区别
05-01
flex:1和flex:auto是CSS3中Flexbox布局模式中两种不同的属性。其中，flex:1是指元素在Flex容器中会自动填充可用空间，占据剩余的所有空间，而flex:auto则是指元素会根据内容自动调整自身大小，不会主动占据剩余空间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值