flex布局设置flex后容器被内容撑开

最新推荐文章于 2024-07-03 12:00:38 发布
最新推荐文章于 2024-07-03 12:00:38 发布
阅读量4.8k 收藏 6
点赞数 10
分类专栏： 前端学习 文章标签： 容器 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43610311/article/details/121029908
版权

在这里插入图片描述
就和图片中的效果一样。容器大小是不确定的，要根据内容来决定。但是被内容撑开，使用word-wrap:break-word;强制换行文字和字母无效
这时将盒子的width设置为 0 ，然后使用 flex样式，将宽度交给 flex 布局来决定，容器就不会被撑开

 width: 0;
 flex: 1

如果内容大小确定，

flex-grow:0;//是否自动增长空间
flex-shrink:0;//是否自动缩小空间
累了要吃肉丶
关注
  • 10
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex内容撑大容器(flex布局之一)
wenbintian的博客
03-20 849
flex布局相关问题 子项已经设置flex-shrink flex-grow，但是内容过大时还会撑大容器，如下图： <div class="zoehis_complex_item"> <div title="所在科室代码" class="zoehi_complex_item_label">所在科室代码：</div> <div class="zo...
div动态宽度_解决flex布局内容超出盒子宽度问题
weixin_39997311的博客
11-27 1836
在移动端，flex 布局很好用，它能够根据设备宽度来自动调整容器的宽度，用起来很方便，已经越来越离不开它，但是最近在做项目的时候发现一个问题。 就是在一个设置了 flex:1 的容器中，如果文字很长，这时候文字就会超出容器，而不是呆在设置好的动态剩余的空间中。 例子：大致是有一个main容器是flex布局，左边一个logo固定宽高，右边content动态宽度。<.notice可能会非常长，一...
flex布局被内容被撑开及flex布局下定宽元素被压缩
meimeib的博客
07-20 4846
实现效果 使用flex进行左右布局，左边定宽200排序，右边自适应，当右边内容过多，造成右边盒子被撑开，会造成两种问题 左边定宽盒子被压缩 解决办法： flex-grow:0;//是否自动增长空间 flex-shrink:0;//是否自动缩小空间 右边自适应的盒子被撑开 解决办法： flex:1; width:0; 将右边自适应的盒子的宽度设置为 0 ，然后使用 flex：1 样式，将宽度交给 flex 布局来决定，最终子元素不会被内容撑开，达到想要的效果。 ...
父元素设置display:flex后，子级元素高会跟随其他元素自动撑开问题
油墨香^-^的博客
06-05 93
子级元素增加：align-self:baseline。
flex:1 内容高的时候撑开容器问题
assassin_0302的博客
04-04 526
如果是横向 就在父元素中有使用flex：1的地方加上 min-width:0, 如果不行，就父元素的依次往上加。如果是纵向 就在父元素中有使用flex：1的地方加上 min-height:0，如果不行，就父元素的依次往上。
缩小浏览器窗口后，右边出现空白（flex布局导致，需设min-width）
sunshineTing2的博客
02-20 1660
页面中的安全宽度为1130px，若浏览器宽度小于1130会出现空白 因为使用了flex布局导致的， 需要设置一个最小宽度 min-width: 1130px;
记录一个flex布局下宽度溢出且不会换行的问题
百岁如流富贵冷灰的博客
09-17 3986
最近在开发当中遇到了一个属于浏览器的bug： 在flex元素下，如果子元素使用display：table并且设置宽度为100%时会出现超出flex元素的情况，并且设置flex-wrap：wrap属性也不会产生换行 <div style="display: flex;"> <div>left</div> <div style="flex: 1;display: table;width: 100%;background: red;">righ
Flex布局之关于组件的大小
07-27
在Flex布局中，当多个宽度相关的属性同时被设置时，Flex框架有一套内置的逻辑来解决这些属性之间的冲突。例如，如果*percentWidth*和*explicitWidth*同时被设置，且它们的值不一致，那么最终的宽度将取决于这两个...
DIV设置float后父容器无法定位高度的问题解决方法
12-13
但是，当多个浮动元素在同一个父容器内时，它们会脱离文档流，导致父容器的高度不再由这些浮动元素撑开，而是仅根据非浮动内容的高度来计算，这就是所谓的“浮动塌陷”。 为了解决这个问题，我们可以采用以下几种...
CSS设置盒子容器(div)高度(height)始终为100%
11-19
在这个例子中，`html`和`body`元素被设置为100%高度，确保了`div`可以基于这些父级元素计算其高度。同时，由于`body`元素默认可能有边距，所以将其`margin`设为0以避免额外的空间影响。 除了上述方法，还有其他策略...
浅析两列自适应布局的3种思路
09-27
如果表格的`table-layout`属性未设置为`fixed`，其宽度会由内容自动撑开。在这个方法中，我们可以将父容器设置为`display: table`，左侧栏的外层包裹一个具有极小宽度（如`width: 0.1%`）的`display: table-cell`...
css中间自适应布局的5种解法详解
12-14
优点是兼容性好，但缺点是需要清除浮动以防止影响其他元素，并且当高度不固定时，中间内容被撑开会导致左右两栏不变。 2. **方案二：绝对定位（Absolute Positioning）** 通过设置元素的`position: absolute`，...
css flex 子元素溢出时，父元素被撑开解决方案
最新发布
weixin_48230016的博客
07-03 888
3.无论多少层子元素，只要不想给限制的宽高，想让元素flex：1；自适应宽高，都一层层给flex为1时的元素 宽或高 为0限制下去。可以用于解决子元素溢出，撑大父元素，父元素不出现滚动条等问题。自适应填满时，子元素内容溢出，父元素内容撑大，导致页面显示问题，或设置了overflow 为scroll 的元素没出现滚动条等问题。2.同上，如果是纵向排列，flex: 1;的元素是高度铺满的，那就加上height: 0;则元素高度自适应的同事，高度不会被撑大。1.如果是横向排列，flex: 1;
关于用了flex 之后父级不会被子盒子撑开
heartandwater的博客
05-11 3046
我发现有个盒子的高度不会被子盒子撑开，即便加了 height: initial; min-height: fit-content; 也不行，除非给个最小高度数值， 我没有用浮动，显然不是浮动的问题， 后来发现原来是因为这个盒子的父级用了flex 就是.template-row的父级，原先写的是display:flex;flex-direction:colunm;去掉之后，.template-row就正常了， 弹性盒模型会自动缩放(主轴方向)内部盒子， 所以说能用标准流就用标准流，不行再考虑其他，
智能布局（ 弹性盒 ）
AI-fisher的博客
10-27 782
文章目录一、开启弹性盒布局（display）——父容器二、伸缩换行 (flex-wrap)——父容器三、排列方式(flex-direction)——父容器四、伸缩流方向与换行(flex-flow)——父容器五、主轴横向对齐 (justify-content)——父容器六、主轴纵向对齐 (align-content)——父容器七、侧轴对齐（align-items/align-self）——父容器/子...
flex：1的容器会被内部元素撑开的解决方法
weixin_42274805的博客
04-07 1263
.main { flex: 1; } 改为： .main { flex: 1; overflow: hidden; }
CSS 如何将盒子宽度设置为里面的文字所占宽度
不知名人士的博客
05-16 4042
HTML： <div class="box"> 文字宽度 </div> CSS： .box { padding: 4px 16px; font-size: 26px; font-weight: 400; color: #196FFA; line-height: 38px; border-radius: 8px; background-color: #DFE7F5; } 展示效果： 这里会发现整个盒子宽度是占满的，怎么样能实现盒子宽度跟里面的文字相
flex-wrap 后内容高度被撑开
serious_na的博客
06-30 2292
问题： 布局时出现换行后 高度异常 .box{ height: calc(100vh - 100px); background: #fff; overflow: auto; padding: 76px 0 0 17px; display: flex; flex-wrap: wrap; } 解决办法： align-content: flex-start 这样高度正常了 (＾－＾)V ...
关于flex布局中,父元素设置display：flex；flex-direction:row；子元素1高度撑开400px，子元素2、子元素3高度40px,如何设置全部自适应撑开?
Dilemma_me的博客
08-22 804
关于flex布局中,父元素设置display：flex;flex-direction:row;子元素1高度撑开400px，子元素2、子元素3高度40px,如何设置全部自适应撑开?
flex布局后，盒子的高度被均分不自己撑开该怎么办
06-01
如果一个Flex容器中的子项的高度被均分，而不是根据自身内容撑开高度，这可能是由于子项的`align-items`属性值引起的。`align-items`属性用于设置Flex容器中所有子项在交叉轴上的对齐方式，默认值为`stretch`，表示子项会被拉伸填充整个交叉轴。如果子项的内容不足以填充整个容器，它们的高度就会被均分。 如果希望子项的高度根据自身内容撑开，可以将`align-items`属性设置为`flex-start`、`flex-end`或`center`。这样子项的高度就会根据自身内容来确定，而不是被均分。 另外，还可以在子项的样式中设置`align-self: auto`，这样它会继承父容器的`align-items`属性，从而根据自身内容撑开高度。 以下是一个例子，其中Flex容器有三个子项，它们的高度根据自身内容撑开： ```html <div class="flex-container"> <div class="item">Lorem ipsum dolor sit amet...</div> <div class="item">Consectetur adipiscing elit...</div> <div class="item">Sed do eiusmod tempor incididunt...</div> </div> ``` ```css .flex-container { display: flex; flex-direction: column; align-items: flex-start; } .item { padding: 10px; border: 1px solid #ccc; align-self: auto; } ``` 在上面的例子中，Flex容器的`align-items`属性被设置为`flex-start`，而子项的`align-self`属性被设置为`auto`，这样子项的高度就会根据自身内容撑开。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值