flex：1

最新推荐文章于 2024-07-16 10:45:52 发布
最新推荐文章于 2024-07-16 10:45:52 发布
阅读量121 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43135489/article/details/132516998
版权

当希望元素充分利用剩余空间，同时不会侵占其他元素应有的宽度的时候，适合使用flex:1，这样的场景在Flex布局中非常的多。例如所有的等分列表，或者等比例列表都适合使用flex:1或者其他flex数值

当希望元素充分利用剩余空间，但是各自的尺寸按照各自内容进行分配的时候，适合使用flex:auto。例如导航栏。整体设置为200px，内部设置flex:auto,会自动按照内容比例进行分配宽度。

文文的小仓库
关注
Flex的使用场景
liya_nan的博客
09-12 1840
1.固定宽度 代码实现（某一侧固定，另一侧自适应）： <!DOCTYPE html> <html> <head> <title>Flex布局-一侧固定，另一侧自适应</title> <style> .parent { display: flex; width: 500px; ...
解析flex属性：flex：1究竟是什么
weixin_43554584的博客
02-17 4万+
成功搞懂了flex:1呢！
flex:1是什么，适用什么场景
最新发布
m0_75247890的博客
07-16 276
flex:1是什么，适用什么场景
flex弹性布局的用法及场景（网页构建详解）
ct5211314的博客
11-16 1264
前端在进行页面的构建时，应该尽量的减少固定的死值，以免出现不同分配率中出现页面错乱的问题，减少定位的使用，多使用flex进行弹性布局，弹性布局，会附带很多属性的默认值，并不是属性不加就代表不存在了，下面讲解一下常用的弹性布局的属性，也分享一下关于页面布局中我的心得，希望能给大家带来帮助共同进步。 一、页面布局心得（直接上干货） 1.简单说明 在最初接触css的时候，写的页面都是通过宽高，margin、padding、position来进行...
什么时候会是用treeset?_flex:1 到底代表什么?
weixin_39922147的博客
11-29 61
今天在做项目的时候遇到一个关于布局的问题, 就是 flex: 1; 我一直以为 flex: 1; 代表的是 flex: aoto; 后来发现结果并不是这样, 所以写一篇博客来讲解一下 flex: 1; 代表什么代码第一版<div class="container"> <div class="div">我是一个div</div> <div class...
Flex 使用场景(一）
分享我的点点滴滴，在成长路上与你同行！
07-22 845
一、左右固定布局 <style type="text/css"> .box{ display: flex; width: 500px; height: 300px; } .left{ width: 100px; background:lavender; } .right{ flex: 1; background: antiquewhite; } </style>
flex:1的三种使用方法
爱游戏爱学习的博客
04-05 575
设置子元素中有固定宽度的元素，利用flex：1，表示其余子元素可以占用的剩余空间。注意给父元素添加display：flex；width;height;;margin;width;height;;flex;height;;width;height;;</</</</</优点：缩放时，固定宽度的元素不会改变，自适应元素会随着屏幕的缩小而缩小。
flex布局中flex:1和flex:auto的区别
Xu_lin_peng的博客
03-10 877
flex:0 1 auto;(默认值) 默认有空间时不放大，空间不够时能缩小，长度自适应。 flex:1 1 auto; 简写为 flex:auto; 有空间是会放大，空间不够时，大家一起缩小，长度自适应。 flex:1 1 0; 简写为 flex:1; 有空间时会放大，空间不够时优先缩小，项目长度可以为0 flex:0 0 auto; 简写flex:none; 有空间时不放大，空间不够时不缩小，项目长度自适应
flex布局布局之flex:1属性详解
一梦晓三生的博客
12-25 9182
弹性布局基本概念 采用Flex布局的元素，称为 Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main
flex:1 | 0 | auto | none
qq_45059405的博客
04-02 1127
flex: 1 | 0 | auto | none
微信小程序 flex:1表示什么
qq_26764331的博客
08-26 1283
flex是flex-grow,flex-shrink和flex-basis的简写。 除了auto（1 1 auto）和none(0 0 auto)这两个快捷值外，还有以下设置方式： 当flex取值为一个非负数字，则该数字为flex-frow值，flex-shrink取1，flex-basis取0%，如下是等同的： .item{flex:1;} .item{flex-grow:1; flex-shrink:1; flex-basis:0% } 当flex取...
弹性盒中 flex详解及flex：1的用法解析
Hr_ving的博客
08-05 1万+
在写弹性盒布局的时候，实现上下两栏固定，中间部分自适应的时候都会使用flex=1这个样式，但这个样式具体是什么呢，接下来我将讲解一下我对这个flex=1的理解
css3中 flex:1的使用
肖帅的博客
01-08 1万+
案例1：设置div的flex:1 会得到剩余的宽度 假设a是父组件，用flex布局设置子控件左右居中，width:400px；display:flex; b是子控件，居左。width：150px; c是子控件，居右。width不给，设置flex：1； 那么c.width = a.width-(a的margin和padding[左右])-b.width–(b的margin和padding[左右])-...
弹性布局flex:1详解
热门推荐
weixin_38289699的博客
01-11 6万+
在最初学习flex布局的时候,局限于使用flex的属性来布局,但是实际的详细刨铣却很少,最近在一些大厂的面试中被闻到一些细节,感觉自己学的有些粗糙,这里好好整理下 首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写 flex-grow 属性定义弹性盒子项（flex item）的拉伸因子 举个例子: HTML代码
css中flex: initial、flex:0、flex:1、flex:none、flex:auto的区别和使用场景
朝阳39的博客
10-19 4831
flex:initial flex: initial【默认值】等同于flex: 0 1 auto ，flex容器有剩余空间时其尺寸不会增长（flex-grow:0），在flex容器尺寸不足时尺寸会收缩变小（flex-shrink:1），同时当前应用flex:initial的元素的尺寸自适应于内容（flex-basis:auto） 使用场景 flex:0 flex:0等同于设置flex:0 1 0%，元素尺寸不会弹性增大（flex-grow:0）,但是会弹性收缩(flex-shrink:1），考虑.
flex设置成1和auto有什么区别
weixin_34270606的博客
04-25 5893
首先明确一点是，flex是flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况： flex的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则flex的默认值是 0 1 auto。同理，如下是等同的： .item {flex: 2333 3222 234px;} .item { flex-grow: 2333; ...
FlexBox的特点及使用场景分析
sweet___smile的博客
09-03 2947
Flex Layout是在CSS3中出现的一种新的布局模式，它是为展示出更加复杂的app或者网页而设计的，W3C官方称其为CSS弹性盒子布局。它与块样式布局相似，（缺点：）但缺少对于更加复杂的文字或者文档布局等需求的实现，反过来，它可以简单实现web网页和app中经常需要的空格均分以及内容对齐的需求。特性如下：可以在垂直或者水平方向以任意一种对齐方式进行样式布局可以在单一轴线上布局也可以在多行内布...
flex布局应用场景
露露
03-05 3525
flex布局应用场景 （一）骰子布局参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html （二）网格布局 （1）基本网格布局 最简单的网格布局，就是平均分布。在容器里面平均分配空间，骰子布局很像，但是需要设置项目的自动缩放。 实...
flex:1,flex:2
08-20
根据引用和引用的内容，flex:1和flex:2都是flex属性的取值形式。在flex布局中，flex属性用于指定一个项目在弹性容器中的伸缩比例。具体来说，flex:1表示项目将根据可用空间平均分配剩余空间，而flex:2表示项目将获得比flex:1更多的剩余空间。这意味着flex:2的项目将相对于其他具有较低flex值的项目获得更多的空间。总之，flex:1和flex:2都用于调整项目在弹性容器中的大小分配比例，具体的效果取决于其他项目的flex值和可用空间的情况。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [flex:1及flex取值的理解](https://blog.csdn.net/weixin_38241212/article/details/108468241)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值