flex布局的flex为1到底是什么

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

参考博客：flex:1什么意思_公孙元二的博客-CSDN博客

 flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

今天写样式的时候，碰到这样一个问题：子盒子①和②的父盒子设置了display。子盒子①设置了固定宽度，如果子盒子②不想设置calc计算的话，可以设置子盒子②样式display为1

设置②display：1后 ，②则沾满剩下所有空间

 

长相思979
关注
display: flex; Flex布局的详细介绍
weixin_46399753的博客
03-13 1070
前言 display：flex Flex布局在页面布局中应用的非常广泛，它能轻易的实现某些效果，但相对来说属性概念较多，想要掌握Flex布局并在项目中灵活运用也不是那么容易，在此我就来总结一下Flex布局的常用属性概念和用法，希望对你学习掌握有帮助。 一、什么是Flex布局？ Flex布局是2009年W3C提出了一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持...
flex布局Flex实现常见布局的汇总
04-11
先简单介绍一下，要使用flex布局，需要先给一个容器元素设置display:flex让它变成flex容器。 然后其所有的直接子元素就变成flex子元素了，在flex里存在两根轴，叫主轴和交叉轴，互相垂直，主轴默认水平，flex子元素...
flex为1代表什么
furygdk的博客
06-04 1744
flex是弹性布局里面的3个项目属性的缩写:flex:1等价于flex-grow:1;flex-basis:默认为auto,意思是在分配多余的内存空间时，该flex项目的大小，默认是该项目原本体积大小。flex-shrink: 默认为1，意思是当内存空间不够时，该flex元素将缩小。flex-grow:默认为0，意思是当有剩余空间时，该flex元素也不扩大。
弹性布局中的 flex 到底如何影响布局？
最新发布
m0_66970349的博客
07-23 956
做手机端项目时，我们经常遇到flex弹性布局，使用flex:1的作用是让项目能够自动填充剩余空间，实现自适应布局。flex:1是flex-grow:1,flex-shrink:1,flex-basis:0%的缩写。flex 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。（n为正整数）：相当于 flex: n 1 0%，表示项目的放大比例为n，其他值默认。的相对比例,剩余空间是 flex 容器的大小减去所有 flex 项加起来的大小。1.flex:n (n为数字)
flex:1什么意思
树上骑个猴的博客
12-24 5万+
结论 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代表什么意思
热门推荐
aliven1的博客
12-20 6万+
【css】flex弹性布局中的flex：1 到底是什么意思？
呆呆狗
01-30 8410
flex弹性布局中的flex：1 到底是什么意思？ flex-basis flex-shrink flex-grow
Flex布局
03-29
Flex布局，全称为Flexible Box，是W3C在2009年提出的一种新的网页布局方案，旨在解决传统CSS布局模式在处理复杂和动态内容时的局限性。它特别适用于移动设备上的H5页面和微信小程序等场景，能轻松实现各种复杂的页面...
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
flex:1 是什么意思
臧小川的博客
09-05 279
让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容： div { flex:1; }
flex：1是什么？
CSDN_156的博客
12-06 5736
说起左侧固定，右侧自适应；或者左右固定，中间自适应，大家想到的可能最多的就是通过flex弹性盒布局中的flex：1吧，那么flex：1究竟是什么呢？ flex：1是由flex-grow，flex-shrink与flex-basic组成，那么这三个属性对应的功能又是什么呢？ ①flex-grow：代表子元素占弹性盒的比例 <!-- HTML部分 --> <div class="grow"> <!-- flex-gr...
flex:1是什么？
LueLueLue77的博客
05-19 3万+
理解下flex: 1，以及flex中的值的作用😆
flex: 1到底是什么意思？
guizi0809的博客
05-24 1043
语法： auto | none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] 定义： flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 。 flex-shrink: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 。 flex-basis: 定义了在分配多余空间之前，项目占据的空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本.
flex：1是什么含义及flex弹性布局详解
weixin_43342105的博客
04-21 4991
flex：1 阮一峰flex教程
flex:1
qq_43487084的博客
02-25 1413
在H5+CSS3的开发中，我们经常会实用弹性布局来进行页面的布局。 在谷歌内核的浏览器中的代码示例： display: -webkit-box; -webkit-box-flex: 1; 经常使用到的该属性常用为两种情况： 1、子元素之间的等比例空间分配； 2、子元素所占剩余空间分配； 此博文只分析第二种剩余空间分配的情况，一种是水平剩余空间，一种是垂直剩余空间； css3中关于"flex:1"的...
flex:1是什么
y3616104980的博客
05-19 966
是一个缩写属性，用于在一个使用Flexbox布局的容器内的子元素上。: 定义当容器空间不足时，该flex项目的缩小比率。时，你告诉浏览器这个flex项目应该能够伸展来占据任何额外的空间，并且在需要时也可以缩小，而且不考虑它的初始大小。: 定义flex项目的扩展比率。设置为1意味着flex项目会扩展以填充任何剩余的空间。: 设置flex项目在分配剩余空间之前的默认大小。当设置为0%时，它会根据项目的内容大小来确定基础大小，但是实际上，由于。是1，所以项目会扩展以填充多余的空间，而不仅仅是依据它的内容大小。
Flex的flex-grow：1与flex-shrink1，0
世界既不黑也不白，而是一道精致的灰。
12-25 2280
Flex的flex-grow：1与flex-shrink1，0 flex-grow: 0; / 0表示正常状态，不放大 / flex-grow: 1; / 1表示一旦发生变化，弹性子元素的宽度也会做出相应的调整。 flex-shrink: 0; / 因为弹性盒子display:flex设置之后，当盒子个数过多时，小盒子会自动缩放，当拉着浏览器的右侧伸缩时，盒子会跟着伸缩，一起缩放。但是加了flex-shrink之后，盒子就不会跟着缩放了，实实在在的有多宽就是多宽，会出现水平滚动条 /
display:flex 纵向沾满
08-26
要将一个元素的子元素垂直方向上沾满，可以使用CSS的flexbox布局。 首先，设置父元素的display属性为flex，这将使父元素成为一个flex容器。然后，添加flex-direction属性并将其值设置为column，以使子元素在垂直方向上排列。 接下来，可以使用flex属性来控制子元素的占比。将子元素的flex属性设置为1，表示子元素将会占据剩余的空间。 以下是一个示例的HTML和CSS代码： HTML代码： ```html <div class="container"> <div class="child">子元素1</div> <div class="child">子元素2</div> <div class="child">子元素3</div> </div> ``` CSS代码： ```css .container { display: flex; flex-direction: column; } .child { flex: 1; } ``` 在上面的示例中，父元素具有class为"container"，子元素具有class为"child"。通过将父元素的display属性设置为flex，子元素将会在垂直方向上排列，并且通过设置子元素的flex属性为1，实现了子元素在垂直方向上沾满父元素的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值