flex为1代表什么

最新推荐文章于 2023-08-22 15:19:37 发布
最新推荐文章于 2023-08-22 15:19:37 发布
阅读量1.2k 收藏 3
点赞数 1
文章标签： 前端 html css html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/furygdk/article/details/131030473
版权

 flex是弹性布局里面的3个项目属性的缩写:flex:1等价于flex-grow:1;flex-shrink:1;flex-basis:auto

flex-grow:默认为0，意思是当有剩余空间时，该flex元素也不扩大

flex-shrink: 默认为1，意思是当内存空间不够时，该flex元素将缩小

flex-basis:默认为auto,意思是在分配多余的内存空间时，该flex项目的大小，默认是该项目原本体积大小

furygdk
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
移动端前端适配方案(总结)
01-19
在网上搜了一下，很多面试都会被问到移动端适配方法的问题，最近看了一些文章，这里总结一下。 首先，谈一下目前为止出现的一些关于移动端适配的技术方案： （1）通过媒体查询的方式即CSS3的meida queries （2）以天猫首页为代表的 flex 弹性布局 （3）以淘宝首页为代表的 rem+viewport缩放 （4）rem 方式 1.Media Queries meida queries 的方式可以说是我早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是： @media screen and (max-w
flex第一部 源代码(1-17章) 第III部分
06-26
每一章用“Chapter_N”来区分，其中，N代表章的序号，比如Chapter_2/HelloWorld表示的是第二章的示例程序HelloWorld，程序的主程序文件与程序名相同，HelloWorld文件夹下的HelloWorld.mxml即为主程序文件。...
前端常见面试题---flex:1 是什么？
idiot_MAN的博客
09-27 2937
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。含义：将剩下得600-100-200=300px 平分为3份，flex-grow :1 占1份 、flex-grow :2 占2份。flex-shrink:定义了项目得缩小比列，默认值为1，即如果空间不足，将该项目缩小。
flex:1什么意思
树上骑个猴的博客
12-24 4万+
结论 flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。 原理 flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。 推荐使用此简写属性，而不是单独写这三个属性。 flex-grow：定义项目的的放大比例； 默认为0，即 即使存在剩余空间，也不会放大； 所有项目的flex-grow为1：等分剩余空间（自动放大占位）； flex-
flex：1 到底什么意思 它是哪些属性的简写属性
weixin_45836027的博客
08-22 4047
flex：1
flex:1的含义 (超级详细)
weixin_53541596的博客
07-20 2317
flex：1超级详细的解释
flex：1代表什么意思
热门推荐
aliven1的博客
12-20 6万+
flex：1代表什么
夏天的博客
03-11 7711
1.定义和用法 flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。 2.CSS 语法： flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; 默认值： 0 1 auto 属性值 3.flex：1代表什么 先看代码 <div class="con
flex值为1解释
qq_52666510的博客
10-19 796
flex:1!==flex:1 1 auto 而是，flex:1===flex:1 1 0。即flex:1===flex:1 1 任意数字+任意长度单位 所以最重要的是在第三个参数flex-basis上。 其属性的作用为：在给两个属性分配多余空间之前，计算项目是否有多余的空间，默认值为auto，即项目本身的大小。 auto 为表示项目本身的大小,如果设置为 auto, 那么这三个盒子就会按照自己内容的多少来等比例的放大和缩小, 所以出现了上图中三个盒子不一样大的情况 若随便设置一个其他带有长度单.
flex：1是什么？
CSDN_156的博客
12-06 5593
说起左侧固定，右侧自适应；或者左右固定，中间自适应，大家想到的可能最多的就是通过flex弹性盒布局中的flex：1吧，那么flex：1究竟是什么呢？ flex：1是由flex-grow，flex-shrink与flex-basic组成，那么这三个属性对应的功能又是什么呢？ ①flex-grow：代表子元素占弹性盒的比例 <!-- HTML部分 --> <div class="grow"> <!-- flex-gr...
css中flex设置为1是什么意思
画画的贝贝的博客
08-01 1551
flex-shrink默认值为1,代表元素的缩小比例,当空间不足时,多个元素会按照比例同样缩小,如果设置某个元素这个值为0,代表空间不足时该元素不缩小。flex-grow默认值为0,代表元素的放大比例,当一个容器有多余的空间时,设置容器内某个元素的放大比例,该元素会对多余空间根据设置的比例分配大小。flex设置为1等同与flex-grow设置为1,元素分配剩余空间时按照设置的值进行等比例分配。flex包含三个属性flex-grow,flex-shrink,flex-basis。...
Flex内存管理及相关内容
02-28
flex内存管理机制 垃圾回收 弱引用 FLEX内存释放优化原则 1. 被删除对象在外部的所有引用一定要被删除干净才能被系统当成垃圾回收处理掉； 2. 父对象内部的子对象被外部其他对象引用了，会导致此子对象不会被删除，...
flex第一部 源代码(1-17章) 第II部分
06-26
每一章用“Chapter_N”来区分，其中，N代表章的序号，比如Chapter_2/HelloWorld表示的是第二章的示例程序HelloWorld，程序的主程序文件与程序名相同，HelloWorld文件夹下的HelloWorld.mxml即为主程序文件。...
flex第一部 源代码(1-17章) 第I部分
06-26
每一章用“Chapter_N”来区分，其中，N代表章的序号，比如Chapter_2/HelloWorld表示的是第二章的示例程序HelloWorld，程序的主程序文件与程序名相同，HelloWorld文件夹下的HelloWorld.mxml即为主程序文件。...
flexible.js实现移动端rem适配方案
11-20
设备独立像素：也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。 设备像素比：简称为dpr，其定义了物理像素和...
flex:1是什么？
LueLueLue77的博客
05-19 3万+
理解下flex: 1，以及flex中的值的作用😆
flex:1 到底代表什么?
weixin_43758377的博客
07-17 233
https://zhuanlan.zhihu.com/p/136223806
flex:1是什么意思
包磊磊的博客
01-16 4495
flex-grow : 1; // this means that the div will grow in same proportion as the window-size flex-shrink : 1; // this means that the div will shrink in same proportion as the window-size flex-basis : 0...
flex:1 到底代表什么
y1815151的博客
10-25 451
代码第一版 利用flex: 1; 确实实现了三个不同内容的 div 平分空间, 所以按我以前的想法来说: flex: 1; === flex: 1 1 auto; 这是完整写法, 详见mdn, 它还有另外两种完整写法, 分别是initial (0 1 auto)和none (0 0 auto) 第一个参数表示:flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 第二个参数表示:flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩...
flex:1代表什么
最新发布
02-24
在CSS中，flex: 1是一种用于设置弹性容器中子元素的属性。它表示子元素将根据可用空间平均分配剩余空间。具体来说，flex: 1将子元素的flex-grow属性设置为1，这意味着子元素将根据需要扩展以填充剩余空间。 当父容器的宽度或高度发生变化时，子元素的大小也会相应调整，以保持平均分配剩余空间的效果。如果有多个子元素都设置了flex: 1，它们将平均分配剩余空间。 使用flex: 1可以方便地实现弹性布局，使得子元素能够自适应父容器的大小变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值