flex布局子盒子100%完全填充父盒子

原创 已于 2022-04-02 22:29:21 修改 · 10w+ 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #css3 #css #html5 #经验分享

于 2022-04-02 22:29:02 首次发布
本文探讨了在Flex布局中如何使子元素完全填充父元素宽度，通过设置`flex-grow: 1`可以实现子盒子占据100%空间。同时，对于按钮靠右对齐的问题，使用`justify-content: space-between`在实践中未能达到预期效果，可能需要结合其他方法来达成目标。
ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

flex布局子盒子100%完全填充父盒子

flex布局中的子盒子会根据内容的大小调整宽度，但如果想让子盒子占用100%的父盒子，在属性中加入width:100%没有任何作用
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-grow属性为1，则将等分剩余空间，子盒子就能占用100%的父盒子空间。
想让更多按钮靠右，在父盒子中设置justify-content: space-between没有效果，可以看到盒子的宽度是能用多少占多少
在这里插入图片描述
在父盒子中加入了flex-grow:1之后，子盒子就占用了100%的宽度， 更多按钮始终靠最右边。
在这里插入图片描述

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

vue笔记总结
qq_44417271的博客
02-01 1728
VUE vue框架的两大核心： 数据驱动和组件化。 第一周：大家需要转变编程思维的习惯：数据驱动（数据的变化会驱动页面发生变化，不用操作DOM） 第二周：大家需要转变编程思维的习惯：组件化 一、前端开发历史 1994年可以看做前端历史的起点（但是没有前端的叫法） 1995年网景推出了JavaScript 1996年微软推出了iframe标签， 实现了异步的局部加载 1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商模仿实现了 XM
Flutter：基于video_player实现视频相关手势控制、全屏播放(1)
m0_65511992的博客
12-30 2105
4.2. 初始化视频 4.2.1. 初始化 首先我们需要在initState生命周期中对视频进行初始化，对视频是否加载成功显示不同的UI界面：加载中、加载成功、加载失败。 void _urlChange() async { if (widget.url == null || widget.url == ‘’) return; if (_controller != null) { /// 如果控制器存在，清理掉重新创建 _controller.removeListener(_videoListener); _
On the Criteria To Be Used in Decomposing Systems into Modules
07-07
ACM. About system analysis and design.
flex: 0 0 100%；
pig_ning的博客
06-25 1781
【代码】flex: 0 0 100%;
使用flex布局elementui表格在使用百分比被撑开
weixin_42663908的博客
04-29 1368
前言 当我们布局是使用的flex布局，且使用elementui的表格的高度和最大高度设置成百分比的时候，会发现浏览器会出现滚动条，但是我们的需求又不要让最外层盒子有滚动条，我们在查看elementui官方文档发现height和max-height是number或string。 二、使用步骤 1.父组件 代码如下（示例）： <template> <div class="tab-box"> <div class="top-box flex-box">
精选资源
Flex布局
03-29
容器（父元素）通过设置`display: flex`或`display: inline-flex`开启Flex布局，其所有子元素（项目）自动参与Flex布局。容器有两条轴：主轴（main axis）和交叉轴（cross axis）。主轴默认为水平方向，子元素沿着...
小程序-Flex布局详解
chengcheng9876的博客
07-12 1334
小程序-Flex布局详解
父盒子下有三个子盒子，使用flex布局，让这三个盒子平分父盒子的width
最新发布
06-14
我们参考引用内容，特别是引用[1]和引用[4]中关于flex布局子元素平分宽度的描述。根据用户问题：使用flex布局让三个子盒子平分父盒子的宽度。实现步骤：1.父容器设置为flex布局：`display:flex;`2.三个子元素（项目...
CSS设置盒子容器(div)高度(height)始终为100%
11-19
在网页设计中，确保一个元素的高度始终为浏览器窗口的100%是一项常见的需求，尤其在创建全屏布局或者响应式设计时。然而，直接在CSS中为一个元素（如`div`）设置`height: 100%`并不总是有效，因为这涉及到CSS布局中...
如何让flex布局里的子盒子宽高自适应
05-30
默认情况下，Flex 容器中的子元素会拉伸以填充父容器的高度（`align-items: stretch`）。如果希望子元素保持自身高度，可以将 `align-items` 设置为 `flex-start` 或者移除该属性[^3]。 ```css .flex-container { ...
父元素flex:1,子元素宽度100%失效的问题
qq_44741577的博客
02-24 1092
今天做项目时遇见一个问题，父元素在设置。经过尝试发现给父元素及设置。来固定宽度撑满时，子元素设置。
flax布局
maijiecao的博客
09-17 1200
flax布局 flax布局:Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。Webkit 内核的浏览器，必须加上-webkit前缀。注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效 .box{ display: flex; } .box{ display: inline-flex; } .box{ displa
解决flex-direction: column 之后元素宽度自动变为100%
个人博客
07-28 6362
我们知道在flex中align-self和align-items的作用差不多，不过align-self是设置子元素自己的对齐方式，而align-items是设置所有子元素的对其方式。当我们设置父元素flex-direction为column后，他的子元素如果我们没有设置具体宽度（可能我们希望子元素宽度由内容撑开），这时就会发现，所有的子元素宽度默认是100%了。，也就是当我们不设置子元素的宽度时，它就会拉伸子元素填充满父元素。设置除auto和stretch之外的值就行。）而stretch的作用是。...
Flex布局应用---子盒子定宽和子盒子自适应父盒子宽度
wind的博客
12-30 2868
1.实现效果：红色盒子宽度不变，蓝色盒子宽度自适应父盒子宽度 2.实现 html <div class="father"> <div class="box1">1</div> <div class="box2">2</div> </div> css .father { width: 50%; height: 600px;
Flex导致设置的width:100%不生效问题
热门推荐
Johnny Liao的博客
10-15 2万+
因为设置了display: flex; 导致block布局变成了flex布局， 所以如果想要在已经设置了flex布局的基础上，再进行子元素的宽100%设置的话，可以应用下面的样式：（在该子元素上设置） flex-shrink: 0; width: 100%; 这样就可以生效了。 ...
移动端适配以及百分比布局与rem比较
幸福的七种颜色的博客
05-25 5544
pc端网站与移动端(手机)网站区别PC端:屏幕尺寸大,显示内容多,结构复杂,缩小浏览器窗口,页面内容结构并不会发生改变,也并不是响应式移动端(手机网站):屏幕尺寸小,显示的内容有限,结构清晰,简洁,设备类型(ipad,iphone5,6,安卓等)繁多,页面内容结构自适应变化,随着浏览器窗口缩小而缩小,放大而放大,等比例缩放相同点:利用html+css(包括css3)+javascript,pc端性...
flex（弹性盒子）：1的变化，以及flex对width的影响！
钟阿能
10-24 7202
生命不息，学习不止 在今天这个日子，祝愿所有程序员们的世界，永远没有bug 接下来，打开电脑！ 关于疑问： 弹性盒子flex：1的变化？ 弹性盒子对子元素width的影响？ 调试代码： (纯CSS实现手风琴效果) <div class="box"> <ul> <li> <span>谨防三大减肥</span> </li> <l
两个控件布局，占满父亲
qiating7640的博客
12-31 492
我的mainactivity的布局文件，默认的是一个相对布局。我里面就两个控件，一个Button和一个ImageView。我想让Button紧贴着父亲的上面，ImageView占满剩下的区域。Button的高度就普通的就行。我贴上我的代码，老出错。一运行就崩掉。        android:id="@+id/mybtn"        android:layout_alignParentT
CSS技巧：使用flex:1；分配盒子剩余空间
m0_52364694的博客
09-09 2408
一个父盒子包含两个子盒子，父盒子已设置display:flex;和宽高 子盒子1设置宽高，那么子盒子设置flex:1;时会占满剩余空间。 示例代码 Document
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值