2021/03/17 flex布局后，div不能设置宽度

最新推荐文章于 2023-04-18 15:45:16 发布
原创 最新推荐文章于 2023-04-18 15:45:16 发布 · 497 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文探讨了一个关于Flex布局中子元素设置宽度但显示效果不佳的问题，并详细解析了解决方案。通过理解Flex布局的工作原理，特别是子项宽度的处理方式，能够帮助开发者避免类似的布局问题。
  • 背景
    –失败代码
    在这里插入图片描述
    –失败效果 给子项设置了宽度 但是没有效果
    在这里插入图片描述
    在这里插入图片描述
    —解决原因

-在这里插入图片描述
–附阮一峰flex讲解网页图
在这里插入图片描述

–参考链接
解释清晰明了
有一点点深度
–纪念七点二十三办公室等待朋友吃饭的同胞👬

【HTML/CSS】弹性盒子 flex布局制作一个动画卡片
m0_49442965的博客
11-10 874
可以自己去找动画人物纯色背景，这样抠图比较容易。 字体是我随便找的 下面是代码（看不懂没事）： 图片素材： 里面用到的知识： 1.弹性盒子 2.CSS transform 属性 3.translateY() 在页面垂直移动元素 4.CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 推荐一个博主的文章：几个好看的CSS渐变色 5.CSS3利用-webkit-background-clip: text;实现文字渐变效果 6.box-sizing属性用于定义盒子的
display:flex下两个div,导致div宽度发生变化
Aa12364567的博客
07-04 1297
class= 'a’宽度为100，但是b长度被拉伸，导致a宽度不足100。如果自身高度或者宽度被拉伸了，直接把自己的高度或者宽度设置为0即可。
flex弹性布局
温柔雨哥的博客
12-26 753
1. 传统布局和flex布局 1.1 传统布局 兼容性好 布局繁琐 局限性，对移动端的支持不好 1.2 flex弹性布局 操作方便，布局极为简单，移动端应用广泛 PC段浏览器支持情况较差 IE11或更低版本，不支持或部分支持 建议： PC端页面，使用传统布局 移动端页面或者不考虑兼容性问题的PC端页面布局，使用flex弹性布局 2. 体验flex弹性布局带来的变化 html 代码 &l...
使用flex布局导致width无效
Tanjc518的博客
04-18 829
添加这个属性到不生效的盒子上。
【CSS】flex布局中子元素设置宽度失效
流萤梦的博客
02-18 9929
先来盘一盘我自己遇到的问题场景，大概如图所示： 前提条件：box使用了flex布局，让div1和div2两端对齐，box未设置宽度，其宽度是自适应的，div2的宽度是固定的，div1的宽度理想状态是box的宽度减去div2的固定宽度。 简单来说就是，div2固定宽度，div1宽度自适应占满剩余空间。 问题现状：div1长度没超长的时候，没有问题。但当div1的内容长度超长了，div2设置的宽度失效，会被压缩。 而问题的原因主要在于flex的flex-grow和flex-shrink属性。 先.
display:flex布局下的子元素宽度无效
Bright2017的博客
09-03 902
加上 flex-shrink: 0; width: 120px; flex-shrink: 0;
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局的主要思想是使容器能根据可用空间调整其子项目的宽度、高度和顺序。容器会分配剩余空间，或者在必要时收缩项目以适应容器。`flex-direction`属性定义了主轴的方向，可设置为`row`（默认，水平方向）或`...
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
详解flex实现左右布局中按钮溢出隐藏效果
09-22
我们将之前应用于`<span>`的样式移至`.box`上，并设置`max-width: 100%`以确保其宽度不超过父元素`<div id="left">`。同时，将边框、圆角和背景色等样式应用到`.box`上，保持按钮的视觉效果。 最终的HTML结构变为：...
CSS 实现div宽度根据内容自适应
09-24
总结来说，CSS实现div宽度根据内容自适应主要有`display: inline-block`、Flexbox和Grid布局等方法。选择哪种方法取决于项目需求、浏览器兼容性和个人喜好。在实际开发中，通常会结合使用这些技术，以实现最佳的跨...
flex布局设置width无效
qq_40952352的博客
09-17 1万+
困扰了我半天的flex布局 我通过设置元素不换行，然后子元素分别设置了50px的宽度和高度，但是无法生效，要通过如下方式设置 flex: 0 0 85px; 下列是我项目中遇到的问题 &lt;div class="c_ddresseeaDetails mtp10"&gt;        &lt;div class="left"&gt;收货地址&lt;/div&gt;        ...
vue：flex布局产生宽度丢失
qq_44429079的博客
11-22 1307
flex布局产生宽度丢失 今天在写一个页面的时候发现使用flex布局产生了宽度丢失，审查元素查看主体宽度后发现，flex下套二级元素后，宽度会没掉，这时候要么直接指定目标容器宽度，要么一层一层往上找。 最外部的flex根元素他因为本身是一个div，所以宽度是符合块元素设定的，width=100%，然后这个根元素的子元素宽度已经不会填满了，只会被内容撑开，所以子元素的子元素没有宽度，子元素的子元素的子元素也没有 ...
【display:flex】弹性布局，父元素设置display:flex后子元素的宽度太大撑大了父元素的宽度
热门推荐
weichun
03-20 2万+
最近做一个现货平台的项目，需要展示的数据超多，不是table就是chart，布局需要弹性自适应，所以使用了css3的flex布局方案。 先看下界面： 就上边界面来说，主要分左右两大部分，各部主体都是table，用的是ant-design的table插件。主要需求是页面布局要弹性，右边表格的中间部分（如果所示，其中的“1月可买卖”，“2月可买卖”，......“11月可买卖”，“12月可买卖”）...
flex布局中设置宽度被压缩的问题
weixin_43990297的博客
01-07 6659
flex布局中设置宽度被压缩的问题 当父级使用了flex布局，当内部子元素总宽度大于它的宽度时，就会等比例压缩子元素宽度，解决方法就是 1、给所有的子元素设置flex-shrink：0； 2、将所有子元素的width属性更改为min-width； ...
div宽度设置无效问题解决
08-24 3381
问题描述： 要设置两个div在同一行显示，都加入了display:inline样式，但是其中一个div的宽度设置无效，在浏览器显示它的宽度始终是1003px。 解决办法： 方法1/给div加入样式：float:left;//向左浮动，宽度设置有效，不能在目标位置显示。 方法2/给div加入样式：display:inline-block;//宽度设置有效，可设置任意位置显示。 ...
当元素使用flex布局，子级无法设置高度怎么办？
林楠楠的脚趾有点咸的博客
03-02 1万+
1.使用绝对定位html <div class="wrap"> <div class="header">头部</div> <div class="main"> <div class="container">内容</div> </div> <div class="footer">尾部</d
flex布局设置不了宽度
最新发布
03-26
在Flexbox布局中，当尝试为子项（`flex-item`）设置固定宽度时可能会遇到一些问题。这是因为Flexbox中的容器和子项之间存在特定的行为模式，这些行为可能会影响宽度的实际表现。 #### 子项宽度受 `flex-grow`, `...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值