css探究flex容器内部元素无法弹性变化原因

最新推荐文章于 2024-05-06 15:36:33 发布
最新推荐文章于 2024-05-06 15:36:33 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： 开发遇到的问题 文章标签： flex无效 无法弹性伸缩 元素大小不自动改变 元素无法自适应变宽 flex的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A6107907/article/details/86317460
版权

弹性盒子使用非常灵活，但是有次开发遇到一个问题：外部div已经设置了display:flex但是还是不能使内部元素自动伸缩。

像这种情况

不断地减少外层（黄色边框）div的width,内部（红色边框）的4个div左边的那一个一直保持着最小宽度不变

因为里面有个min-width：xxx,这个xxx的值就确定了这个元素的最小宽度，且不受外层配置了display:flex元素的伸缩控制。特别是有时候嵌套的div等元素多了，其中有一个父元素设置了这个属性值，其所有子元素都不会随着页面大小变化而变化。

就像这种情况，发现有一个元素无法随着父元素改变，多半就是设置了min-width

A6107907
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解CSS中的flex容器与flex属性
12-13
flex容器是flex元素的的父元素。 通过设置display 属性的值为flex 或 inline-flex定义。 注旧版本的属性值： box：将对象作为弹性容器显示。（最老版本）inline-box：将对象作为内联块级弹性容器显示。（最老版本）...
flex布局中子元素宽度失效的问题
qq_36437172的博客
11-27 3692
在弹性布局中，用上flex后发现会上瘾，因为这个属性实在太好用了。有一种情况是左边我设置一个子元素固定宽度，右边设置自适应占满剩余空间，但有时候会发现左边固定元素的宽度竟然失效了，被右边的元素挤占空间了，所以仔细查看flex属性的特点后，发现少设置了一些属性样式。 父元素设置完 display:flex 属性后；子元素设置固定宽度：这里加上另外一个属性可防止宽度变化，就是flex-grow;此属...
3分钟入门：Flex 布局
weixin_45138590的博客
04-26 958
开启 flex 布局的元素，称为 flex 容器（flex container），其子元素成为容器成员，称为 flex 项目。属性值为一个数字，用于设置弹性盒子的扩展比例，即盒子占剩余空间的份数，默认为 0。属性值为一个数字，用于设置盒子的收缩比例，当子盒子的宽度之和大于父盒子时才会收缩。默认不换行，若子盒子宽度和大于父盒子，则会收缩！单独设置某个子盒子在侧轴的排列方式，它会覆盖。设置子元素在侧轴上的排列方式（子元素单行）设置子元素在侧轴上的排列方式（子元素多行），来控制盒子的位置和排列方式。
flex动态变化失效
最新发布
IT_moshang的博客
05-06 297
问题：父级设置了display:flex，子级下面的dom节点个数会动态变化，每个子节点都是flex:1，会出现flex:1失效的问题。
flex 子元素固定宽度_css3系列之弹性盒子 flex
az44yao的专栏
06-07 8770
作者：杨耿 https://www.cnblogs.com/yanggeng/p/11212526.html 弹性盒子(伸缩盒) 注意，本篇会很长，非常长， 因为弹性盒子的知识点比较多 搜索 弹性盒子的属性ctrl + F如果觉得图太小， ctrl + +键 主要的属性有：(主要分两部分讲， 一部分讲 设置在父元素上的属性，一部分讲 设置在子元素上的属性， 还有最后一些简单的应用) 　　flex 　　flex-grow 　　flex-shrink 　　flex-basis ...
flex布局不缩放不自适应
weixin_35751194的博客
01-24 2053
Flex 布局默认是会缩放和自适应的。如果你不希望其缩放和自适应，可以将容器的 flex-shrink 属性设为 0，flex-basis 设为 auto，flex-grow 设为 0。
css中flex布局固定宽度盒子被压缩问题解决
weixin_44801790的博客
04-06 2718
css中flex布局固定宽度被压缩问题
css display:flex 弹性布局 子标签设置宽度无效的问题
weixin_41897680的博客
05-02 6685
css display:flex 弹性布局 子标签设置宽度无效的问题
关于flex布局中子元素宽度失效的问题
热门推荐
weixin_44703304的博客
04-04 1万+
在弹性布局中，用上flex后发现会上瘾，因为这个属性实在太好用了。有一种情况是左边我设置一个子元素固定宽度，右边设置自适应占满剩余空间，但有时候会发现左边固定元素的宽度竟然失效了，被右边的元素挤占空间了，所以仔细查看flex属性的特点后，发现少设置了一些属性样式。 父元素设置完 display:flex 属性后； 子元素设置固定宽度： width:50px; height:50; 这里加上另外一...
css3 flex布局实现平均分配元素的示例代码
11-20
在CSS3中，Flex布局（Flexible Box）是一种强大的布局模型，用于处理复杂的网页布局问题，尤其是在响应式设计中。它允许开发者更容易地控制容器内的子元素的排列、对齐和大小调整。本篇文章将深入探讨如何使用Flex...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
css使用flexbox布局容器内多元素水平居中
12-13
在CSS布局中，Flexbox（ Flexible Box，弹性盒布局）是一种强大的工具，它允许开发者轻松地处理复杂的容器内元素的对齐、排列和分布。在本文中，我们将深入探讨如何使用Flexbox实现容器内多元素的水平居中，并讨论...
关于弹性盒布局子盒子的宽度失效问题
qq_44161722的博客
10-28 1274
因为设置了display: flex;导致block布局变成了flex布局， 所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多，此时宽度会比实际宽度小，所以如果想要在已经设置了flex布局的基础上，再进行子元素宽度的设置，可以应用下面的样式：（在该子元素上设置）
css - 解决绝对定位和弹性布局同时出现时弹性布局flex失效的问题
qq_43886365的博客
09-07 4390
解决绝对定位和弹性布局同时出现时弹性布局flex失效问题
前端开发遇到的flex布局子元素未设置宽，但宽度不能自动随着内容宽度变化bug
qq_40868156的博客
07-09 3621
css类型bug记录 项目场景： 父容器使用flex布局，子元素也使用了flex布局，父容器，子元素未设置宽，目的是子元素宽度随着文本内容自动变化，但子元素宽度始终等于父元素宽度 问题描述： 想让会员所在子元素随着文本内容增加，自动撑宽，但子元素始终等于父容器.h-info宽度，随着父容器自动变宽 原因分析： flex布局影响，需要在影响宽度的水平轴方向，因为父容器是列排列，所以水平轴及交叉轴align-items给定一个位置值即可（justify-content是主轴，此时为垂直方向） 解决方案： 给
min-width作用及效果
h316635446的博客
04-30 1629
当浏览器缩小到一定程度时，元素中的布局可能会发生变化。如果想要保持布局不变，可以给该元素（如div)设置最小宽度属性。 把浏览器宽度缩小到min-width以下像素的时候，这个div不会再缩小，而浏览器就会产生滚动条 ...
flex伸缩布局
yyy_wj的博客
10-24 757
重要性：布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 1、重要属性 display:flex:如果父容器设置了这个属性，那么这个盒子里面的所有直接子元素都会自动的变...
解决fixed固定定位同时出现时弹性布局flex失效问题
a666666000的博客
02-07 5863
解决fixed固定定位同时出现时弹性布局flex失效问题
【FlexBox】display : flex 布局下，父元素宽度不能自适应子元素宽度
InkingWT的博客
09-23 4815
最近闲来无事准备写个后台管理的前端模板，顺便拿 FlexBox 练手。 一、概述： <div class="menu-box"> <ul class="menu-group"> <li class="menu-item"> ... </li> <li class="menu-item"> ... </li> <li class="menu-item"> ... &
CSS Flex弹性布局详解：方向与换行控制
CSS Flex弹性布局详解深入解析 在现代前端开发中，Flex布局（Flexible Box Layout）是一种强大的工具，特别适合用于响应式设计，特别是在移动设备上实现灵活且易于管理的布局。本文将通过一个基础案例来讲解如何...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值