​使用Css3弹性布局给子div平均分配宽度

最新推荐文章于 2024-03-21 10:24:23 发布
最新推荐文章于 2024-03-21 10:24:23 发布
阅读量395 收藏
点赞数
分类专栏： Css 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52191385/article/details/134825232
版权

父级给定宽度display:flex;flex-direction:row;

子元素全部设置flex:1; 不要刻意给子div设置宽度。

​

_江屿_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3弹性盒模型开发笔记（三）
12-03
**CSS3弹性盒模型**，也称为Flexbox，是一种现代的布局模式，它允许开发者更加灵活地处理元素的排列和对齐方式，特别是在响应式设计中。本文将深入讲解两个关键属性：`box-pack` 和 `box-align`，以及它们在处理弹性...
css多种方式实现等高布局的示例代码
09-22
- 为子元素（如`li`元素）设置适当的宽度，并通过`flex-grow`属性让它们在剩余空间上平均分配高度。 - 同样，可以使用`:first-child`伪类来处理边框。 示例代码： ```html <li class="flex-item">... ...
实现CSS等分布局的5种方式
xcj_20160810的博客
05-08 1952
　等分布局是指子元素平均分配父元素宽度的布局方式下面列出6种常见的方式，仅供参考 float 【思路一】float 　　缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差 【1】float + padding + background-clip 　　使用padding来实现子元素之间的间距，使用background-clip使子元素padding部分不显示背...
flex布局实现子元素在父元素中均匀分布
遇见小美好
06-18 5172
首先认识一下flex子元素的三个属性,这三个属性控制一个flex子元素的以下几个方面: flex-grow: 这个flex子元素得到（伸张）多少positive free space? flex-shrink: 从这个flex子元素要消除（收缩）多少negative free space? flex-basis: 在flex子元素未伸张和收缩之前，它的大小是多少? 以上属性通常用一个简写属性flex 表达. 下面的代码设置 flex-grow 属性值为 2, flex-shrink 属性值为 1 ，fle
css3宽度平均分配,CSS3 灵活分配宽度的格子 - 踏得网
weixin_39822629的博客
08-03 397
Grid : Flex is a dead-simple, bare bones grid to help you get your layouts looking sharp very quickly. It only cares about laying out your content, so you can style your website or application however...
并列的两个盒子，一个有固定宽度，让另一个占满剩余宽度(grid、calc、外边距、flex)
Likkobest的博客
06-17 1081
grid：通过 grid-template-columns:(固定盒子的宽度)px auto 和 grid-column-gap:0 来实现。1.第一个盒子设置flot:left,第二个盒子设置flot:right,同时第二个盒子的宽度使用计算函数计算。外边距：给第一个的盒子设置flot:left，给第二个盒子设置一个左外边距，值为第一个盒子的宽度，第二个盒子宽度为auto。2.父级设置flex的情况下，第二个盒子的宽度直接使用计算函数即可。
css3 子元素平均宽度
蓝翔顶级电脑技工
03-10 1928
sass代码.statistics_box { width: 100%; height: 100px; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; display: -webkit-box; display: -moz-
CSS flex如何均匀排列子元素
A13330069275的博客
03-10 1万+
高级justify-content: space-between;法 直接使用list的before和after伪元素参与布局 ul class="share-list"> li class="share-item">li> li class="share-item">li> li class="share-item">li> ul>
DIV+CSS例子
12-13
然后，我们有两个子 `DIV`，`.left` 和 `.right`，它们作为弹性盒的子元素，自动分配空间。通过 `flex: 1;`，两个子元素将平均占据容器的宽度。我们还设置了不同的背景颜色和内边距，以便区分两个栏目。 这个例子...
详解flex多列布局遇到的问题和解决方案
12-14
这是因为`space-between`会确保每对相邻元素之间的空间相等，而最后一行由于元素较少，无法平均分配间距，从而产生视觉上的不协调。 为了解决这个问题，一种常见的方法是通过添加伪元素（`:after`）来模拟一个空白...
css等比例分割父级容器（完美三等分）的实现
11-19
在Bootstrap中，12列栅格系统意味着将12个单位平均分配给子元素，实现等分。这种方法适合快速开发和响应式布局，但可能需要对框架有一定的了解。 在实际应用中，应根据项目需求、兼容性要求以及对精确性的需求来...
display:flex下两个div,导致div宽度发生变化
Aa12364567的博客
07-04 800
class= 'a’宽度为100，但是b长度被拉伸，导致a宽度不足100。如果自身高度或者宽度被拉伸了，直接把自己的高度或者宽度设置为0即可。
css之flex布局
laizhenghua的博客
07-04 364
flext弹性局部 1、传统布局与flex布局 1.1、传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 1.2、flex弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持 建议： 如果是PC端页面布局，我们还是传统布局。 如果是移动端布局或者是不考虑兼容性问题的 PC端页面布局，我们还是使用flex弹性布局。 1.3、flex布局初体验 1、子元素水平显示 代码实现 ： <!DOCTYPE html>
【CSS】flex弹性盒保持均分
最新发布
owo_ovo的博客
03-21 942
【CSS】flex弹性盒保持均分
弹性盒子模型
ddd2501的博客
11-13 814
弹性盒子，是一定要学会的！
两个div平分左右的布局样式怎么写
weixin_35757531的博客
01-03 3635
在网页布局中，使用 CSS 可以很方便地将两个 div 平分左右。可以使用如下的 CSS 样式： .container { display: flex; justify-content: space-between; } .left { width: 48%; } .right { width: 48%; } 使用这种方式，将容器元素(如 div)的 display 属性设为...
使用flex布局平分宽度
热门推荐
parhat的博客
08-13 7万+
css3 父元素 display:flex； 子元素给定flex占比 1的时候子元素平分 .color_container { width: 100%; height: 22px; display: flex; flex-direction: row } .color_container&gt;div{ height: 22px; fl...
常见的弹性盒子布局
Hannaaa的博客
07-27 553
常见的弹性盒子布局 1.等分布局 所谓等分布局就是指一行被分为若干行，每一列的宽度是相同的值。 代码实现如下： body主体部分代码如下： <!-- 父级盒子 --> <div class="container"> <!-- 子集盒子 --> <div class="content">天猫</div> <div class="content">淘宝</di.
css3 flex 布局实现平均分配元素
且听风吟的博客
12-05 4万+
css3 flex 布局实现平均分配元素
css平均分配盒子空间
07-28
在CSS中，可以使用flex布局来实现平均分配盒子空间。在给父盒子设置display:flex;后，子盒子可以使用flex属性来控制它们在父盒子中的分布。当子盒子设置flex:1;时，它会占据剩余的空间，实现平均分配。\[1\] 例如，在下面的示例代码中，父盒子.container设置了display:flex;，子盒子.box1设置了固定的宽度100px，而子盒子.box2设置了flex:1;。这样，子盒子.box2会占据剩余的空间，实现平均分配盒子空间。 ```html <div class="container"> <div class="box1"></div> <div class="box2"></div> </div> ``` ```css .container { display: flex; width: 400px; height: 200px; background-color: aqua; } .box1 { width: 100px; height: 200px; background-color: blue; } .box2 { flex: 1; background-color: brown; } ``` 在这个例子中，子盒子.box2会占据剩余的空间，使得子盒子.box1和子盒子.box2平分父盒子.container的宽度。\[1\] 另外，还可以使用flex布局的justify-content属性来控制子盒子的水平分布方式。例如，可以使用justify-content: space-around;来实现弹性项目的平均分布，并在两边留有一半的间隔空间。\[2\] ```css .container { display: flex; justify-content: space-around; } ``` 在这个例子中，弹性项目会平均分布在父盒子中，并在两边留有一半的间隔空间。如果剩余空间为负或只有一个弹性项，则该值等同于center。\[2\] 总结起来，可以使用flex布局的flex属性和justify-content属性来实现CSS中的盒子空间的平均分配。 #### 引用[.reference_title] - *1* [CSS技巧：使用flex:1；分配盒子剩余空间](https://blog.csdn.net/m0_52364694/article/details/120193731)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Css3 弹性盒子布局](https://blog.csdn.net/qqlibo205/article/details/103007886)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [css3 flex 布局实现平均分配元素](https://blog.csdn.net/HH18700418030/article/details/103411787)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值