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

最新推荐文章于 2024-04-05 14:47:46 发布
最新推荐文章于 2024-04-05 14:47:46 发布
阅读量916 收藏 1
点赞数
分类专栏： 随笔 HTML基础 文章标签： 前端 css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46703452/article/details/128485576
版权

一、问题

当父元素为flex的时候，且未设置换行，子元素设置宽，不会有作用

二、原因

子元素自动获得了flex-shrink属性，该属性定义了项目的缩小比例，默认为1，就是说，如果空间不足的情况下，所有的子元素会等比例的缩小，如果一个子元素的flex-shrink的属性为0，其他的子元素为1，则为0的子元素不会缩小

三、解决

给子元素添加flex-shrink: 0;属性

如果有什么疑问或建议，欢迎与我交流！

团酱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex布局的使用方法.pdf
05-12
值得注意的是，Flex布局的属性只能在父元素上定义，对子元素无效。例如： ```css .container { display: flex; } ``` 2. **主轴对齐**： Flex布局中，主轴（flex-direction的默认值为row，即水平方向）上的...
flex布局-flex-layout-master.zip
01-03
Flex布局，全称为“Flexible Box”，也常被称为 Flexbox，是一种在CSS3中引入的布局模式，用于处理复杂的网页布局问题。它旨在提供一种更加灵活、动态的方式来组织和对齐内容，尤其适用于单列和多列布局，以及响应式...
子div超出父div部分横向滚动，不换行
weixin_51747462的博客
10-19 3602
子div超出父div部分横向滚动，不换行；overflow：auto失效；flex布局无法出现滚轮效果；
flex布局设置width无效
qq_29965101的博客
11-26 2683
常常我们布局会使用到flex，但布局中存在一些问题，比如无法设置宽度 display: flex; 子元素不能直接设置width: 50px，需要通过flex布局指定宽度， flex: 0 0 50px; flex参数说明 一：放大属性 二：缩小属性 三：项目的长度：可以是px ，等各种单位，%等 一个人参数的含义：initial（0 1 auto），auto（1 1 auto），none（0 0 auto），inherit（继承父元素的） ...
【CSS】flex布局中子元素设置宽度失效
流萤梦的博客
02-18 9220
先来盘一盘我自己遇到的问题场景，大概如图所示： 前提条件：box使用了flex布局，让div1和div2两端对齐，box未设置宽度，其宽度是自适应的，div2的宽度是固定的，div1的宽度理想状态是box的宽度减去div2的固定宽度。 简单来说就是，div2固定宽度，div1宽度自适应占满剩余空间。 问题现状：div1长度没超长的时候，没有问题。但当div1的内容长度超长了，div2设置的宽度失效，会被压缩。 而问题的原因主要在于flex的flex-grow和flex-shrink属性。 先.
flex布局时，文字超长没有换行显示
weixin_41285537的博客
04-04 982
flex布局，文字超长显示不会换行
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。
Flex布局设置内容强制不换行无效的解决方法
u014785859的博客
06-15 3764
使用弹性盒子Flex布局非常方便，比如实现左右布局的时候，简短的两行样式就实现了。不过虽然Flex布局很灵活，但有时候也会出现一些意想不到的效果...
flex布局-仿x程网源码.zip
最新发布
06-15
在Flex布局中，容器（父元素）可以设置为flex容器，这样它的子元素（即盒子）就能沿主轴（默认为水平方向）或交叉轴（垂直方向）进行灵活的排列、对齐和分配空间。主要的Flex属性包括： 1. `display: flex`：这是...
学习微信flex应用程序的布局
08-09
1. **容器（Container）**：包含一个或多个子元素的父元素，需要设置`display: flex`或`display: inline-flex`来启用Flex布局。 2. **子元素（Items）**：在Flex容器内的直接子元素，它们将按照Flex布局规则进行排列...
CSS弹性盒模型flex在布局中的应用详解
09-24
首先，要开启Flexbox布局，需要在父元素上设置`display: flex;`。这将使父元素变为一个“伸缩容器”，其内部的子元素称为“伸缩项目”。通过调整伸缩容器和伸缩项目的属性，我们可以实现各种布局效果。 1. **元素...
flex布局文本不换行
yuyangll的博客
05-16 5554
在使用flex布局进行写页面时，发现如果长文本超出盒子大小不会自动换行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi
CSS——flex 布局设置文字不自动换行（固定元素不被挤压）
qq_43201350的博客
04-05 690
CSS——flex 布局设置文字不自动换行（固定元素不被挤压）
使用flex布局后文字设置文字不自动换行
qq_43689592的博客
10-18 2419
不需要换行的元素设置：flex-shrink: 0;
input 设置flex:1 失效
Mrswater的博客
05-17 4272
问题场景： 最外层的盒子设置为弹性盒子，左边和右边的写成固定宽度，中间的input输入框设置为flex:1，希望input的宽度是所剩下的长度，结果是它比所剩下的长度要大，验证码这三个字就显示成两行了 原因：input兼容弹性盒子有问题，它会有一个自己默认的最小长度，所以会导致验证码显示成两行 解决办法：我们可以给input输入框加一个div父元素，然后这个div设置flex:1,input...
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题：设置了word-break: break-all；和flex: 1；冲突flex不生效问题
G佳伟
12-03 1257
flex布局中英文字符超出宽度不会自动折行的问题，但是设置了word-break: break-all；前面设置的flex: 1；就不生效了。
flex布局文本不换行不显示省略号的解决方法
10年职场两茫茫，35岁凄凉奈若何
11-22 154
flex布局文本不换行不显示省略号的解决方法
父盒子设置flex布局子元素设置高和宽不生效问题
weixin_57011137的博客
06-10 3900
这是因为定义为flex布局元素的子元素，自动获得了flex-shrink的属性，这个属性就是是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度和高度即设置的高度和宽度不生效。当flex-shrink设置为0时，表示大家都不缩小适应即设置的高度和宽度可以生效。所以，倘若给父元素设置了flex布局后，若要其子元素的width和height有效果，必须给子元素设置flex-shrink为0。...
父元素为flex布局，子元素如何不设置为flex?
03-29
子元素不设置为flex，那么它们就会默认为普通的块级元素或内联元素，不受flex布局的影响。可以使用flex布局中的align-self和order属性来对这些子元素进行单独的控制。例如： ``` .parent { display: flex; } .parent .child { /* 不设置为flex */ align-self: center; /* 竖直方向居中对齐 */ order: 1; /* 调整子元素排列顺序 */ } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值