设置flex后子元素设置宽度失效问题

最新推荐文章于 2024-05-07 14:01:16 发布

又菜又爱玩a

最新推荐文章于 2024-05-07 14:01:16 发布

阅读量1.4k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/qq_42001961/article/details/111268646

版权

父元素设置为flex布局后，给子元素设置宽度失效
给子元素设置这两个属性就可以了

 flex-grow:0;
 flex-shrink:0;

设置flex布局后发现用after伪元素写的小圆点不见了，发现也是这个原因，给after样式设置如上两个属性后，小圆点就又出来了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

又菜又爱玩a

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设置flex后子元素设置宽度失效问题

父元素设置为flex布局后，给子元素设置宽度失效给子元素设置这两个属性就可以了 flex-grow:0; flex-shrink:0;
复制链接

扫一扫

flex弹性布局基本语法（修改版）.pdf

12-01

Flex 布局可以使子元素成为 Flex 项，但是 float、clear 和 vertical-align 属性将失效。 Flex 项的宽度和高度可以通过设置 display 属性来控制。例如，设置 display: flex 时，Flex 容器的宽度将等于其父容器的...

常见浏览器兼容性问题汇总.doc

10-16

- **自适应高度**：在需要自动扩展高度的场景下，可以使用`display: table-cell`或`display: flex`，使得子元素能够根据内容自动调整高度。 3. **JavaScript兼容性**：JavaScript的兼容性问题主要出现在老版本的IE...

参与评论您还未登录，请先登录后发表或查看评论

[随笔] flex布局设置width无效

zhaoweihao的博客

12-23

1708

父容器设置了 flex 布局，子元素的 width 属性为：240px 会失效解决办法：使用 flex 布局子项属性：flex (flex-basis)属性 flex: 1 1 240px; 参考： CSND flex布局

父盒子设置flex布局子元素设置高和宽不生效问题

weixin_57011137的博客

06-10

3915

这是因为定义为flex布局元素的子元素，自动获得了flex-shrink的属性，这个属性就是是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度和高度即设置的高度和宽度不生效。当flex-shrink设置为0时，表示大家都不缩小适应即设置的高度和宽度可以生效。所以，倘若给父元素设置了flex布局后，若要其子元素的width和height有效果，必须给子元素设置flex-shrink为0。...

探秘Flex布局下子元素宽度超出的那些烦心事

最新发布

ljgllxyz的专栏

05-07

802

嘿，小伙伴们！你们有没有遇到过用Flex布局的时候，子元素的宽度莫名其妙地超出了父元素的情况？别着急，今天我就来给大家揭秘这个问题的来龙去脉，以及一些解决方案。让我们一起来深入探讨！

CSS：flex布局

CSPsy的博客

06-07

1985

CSS flex布局入门，flex布局学习，什么是 flex 布局，flex布局怎么用，flex布局主轴和交叉轴，flex布局的shrink，grow，basis，flex布局around，between和evenly 之间区别

flex 布局中子元素设置宽度无效的解决办法

UserGuan的博客

01-05

1万+

因为父元素设置了【display: flex】所以该父元素下所有的子元素都会默认加上【flex: 0 1 auto】。其中 1 就是 flex 中的 flex-shrink 属性，表示开启元素的收缩功能，所以子元素宽度才会失效。flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。默认值：0 1 auto。

【CSS】flex布局中子元素设置宽度失效

流萤梦的博客

02-18

9268

先来盘一盘我自己遇到的问题场景，大概如图所示：前提条件：box使用了flex布局，让div1和div2两端对齐，box未设置宽度，其宽度是自适应的，div2的宽度是固定的，div1的宽度理想状态是box的宽度减去div2的固定宽度。简单来说就是，div2固定宽度，div1宽度自适应占满剩余空间。问题现状：div1长度没超长的时候，没有问题。但当div1的内容长度超长了，div2设置的宽度失效，会被压缩。而问题的原因主要在于flex的flex-grow和flex-shrink属性。先.

详解微信小程序之scroll-view的flex布局问题

12-08

然后创建一个类名为 `.item` 的元素，将其设置为 `display: inline-block`，并使用计算宽度来实现等分排列。同时，为子元素添加适当的 `margin-right` 以创建间距。在 `wxml` 文件中，使用 `block` 和 `wx:for` 指令...

详解解决flex布局的justify-content: space-between对齐方式的一个BUG的两种方法

12-13

当我们将`display`属性设置为`flex`并使用`justify-content: space-between`，Flexbox会将子元素沿主轴方向均匀分布，首尾元素贴紧容器边缘，而剩余空间平均分配到各个元素之间。这对于创建整齐的多列布局非常有用。...

HTML+CSS相对宽度和绝对宽度冲突时的div解决方法

11-19

当一个元素同时设置这两种宽度时，浏览器通常会优先考虑绝对宽度，导致相对宽度失效。本篇文章将探讨在相对宽度和绝对宽度冲突时如何解决div的布局问题。首先，我们通过一个示例来说明这个问题。假设我们有一个...

flex布局：父容器设为flex,子项目再设置flex-grow、flex-shrink、flex-basis时，子项目宽度可能无效

EmotionComputer

01-08

3021

<div class='box'> <div class='box2'></div> <div class='box2'></div> <div class='box2'></div> </div> .box { display:flex; } .box2 { // 设置width:100px无效 // 需要设置成下面格式 fle

flex布局设置width无效

qq_40952352的博客

09-17

1万+

困扰了我半天的flex布局我通过设置元素不换行，然后子元素分别设置了50px的宽度和高度，但是无法生效，要通过如下方式设置 flex: 0 0 85px; 下列是我项目中遇到的问题 <div class="c_ddresseeaDetails mtp10"> <div class="left">收货地址</div> ...

解决父元素display:flex布局下的子元素宽度无效问题

热门推荐

礼拜八的博客

05-23

2万+

因为设置了display: flex; 导致block布局变成了flex布局，所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多，此时宽度会比实际宽度小，所以如果想要在已经设置了flex布局的基础上，再进行子元素宽度的设置，可以应用下面的样式：（在该子元素上设置） width: 120px; flex-shrink: 0; ...

父元素display:flex布局下的子元素宽度无效问题

weixin_40365953的博客

11-09

1万+

因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性。该属性介绍: 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。根据上述介绍可以理解为默认 1 为开启收缩所以可以将display:flex;下的子元素的flex属性设置为flex:0 0 auto; 解决了display:flex下的子元素设置宽度无效的问题。...

flex布局中设置宽度被压缩的问题

weixin_43990297的博客

01-07

5888

flex布局中设置宽度被压缩的问题当父级使用了flex布局，当内部子元素总宽度大于它的宽度时，就会等比例压缩子元素宽度，解决方法就是 1、给所有的子元素设置flex-shrink：0； 2、将所有子元素的width属性更改为min-width； ...

flex布局中子元素宽度失效的问题

qq_36437172的博客

11-27

3685

在弹性布局中，用上flex后发现会上瘾，因为这个属性实在太好用了。有一种情况是左边我设置一个子元素固定宽度，右边设置自适应占满剩余空间，但有时候会发现左边固定元素的宽度竟然失效了，被右边的元素挤占空间了，所以仔细查看flex属性的特点后，发现少设置了一些属性样式。父元素设置完 display:flex 属性后；子元素设置固定宽度：这里加上另外一个属性可防止宽度变化，就是flex-grow;此属...

display:flex布局下的子元素宽度无效

Bright2017的博客

09-03

821

加上 flex-shrink: 0; width: 120px; flex-shrink: 0;

flex布局子元素高度设置无效的解决办法

ycg5250的博客

05-26

1万+

父元素代码css代码关键代码是flex-shrink: 0; 当指定view为flex布局后，给子元素定义width和height是不起效果的。原因：定义为flex布局元素的子元素，自动获得了flex-shrink的属性，这个属性是什么意思呢？就是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时，表示大家都不缩小适应。所以，倘若给父元素设置了flex布局后，若要其子元素的width和

display:flex 为什么无效

01-25

如果子元素的flex属性设置不正确，可能会导致宽度失效。默认情况下，子元素的flex属性为flex: 0 1 auto，其中1表示开启了元素的收缩功能，可能会导致宽度失效。因此，需要根据实际需求调整子元素的flex属性，以使其...