flex布局宽高度设置不成功

最新推荐文章于 2024-04-28 14:47:31 发布
最新推荐文章于 2024-04-28 14:47:31 发布
阅读量2.4k 收藏 3
点赞数 3
分类专栏： web前端 文章标签： flex布局设置宽度无效 flex宽度被压缩 flex不能设置宽度 flex的高度问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42625428/article/details/110190489
版权

flex布局中，会出现是在宽高，但是不起作用，那是因为flex布局当不够的时候自动压缩了

可以选择 - 让其不压缩

 flex-shrink: 0;

然后在设置宽高

或者利用复合属性

flex: 0 0 83rpx;

这篇博客是对flex布局的讲解，以及新老版本的flex的区别

https://blog.csdn.net/qq_42625428/article/details/83755402

哆来A梦没有口袋
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex布局中图片元素宽度确定但高度无法自适应的问题
xiongshiyuan的博客
05-12 8403
今天在使用flex布局中，为了不新增额外的dom元素，直接将img元素放在flex容器的下一层，作为一个flex项目，但是为了横向排列，所以给img元素设置了宽度，但是高度没有随着宽度变化而变化(保持高宽比),情况如下： /*html*/ ... <div class="flexBox"> <img src="image.jpg" alt="img"/> ...
父容器display:flex后，子元素的内部元素height:100%无效解决方法
热门推荐
yb305
05-17 3万+
父容器display:flex后，子元素的内部元素height:100%无效解决方法 解救办法：父类容器position:relative;子元素：position:absolute;width:100%,height:100%; 效果图： 代码如下： * {
flex布局子元素高度设置无效的解决办法
ycg5250的博客
05-26 1万+
父元素代码css代码 关键代码是flex-shrink: 0; 当指定view为flex布局后，给子元素定义width和height是不起效果的。原因：定义为flex布局元素的子元素，自动获得了flex-shrink的属性，这个属性是什么意思呢？就是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时，表示大家都不缩小适应。 所以，倘若给父元素设置了flex布局后，若要其子元素的width和
html flex 的高度,flex布局高度
最新发布
java_dazhuzhu的博客
04-28 1099
width: 25%;width: 70%;
flex布局设置宽度不生效，高度生效
Cool_so_cool的博客
06-24 4930
首先先理解一下这个flex 1 . 原理其实我也不太懂，后来才知道它的内部都是用动态公式进行内部计算的 。具体详细说，就不太懂。 2. 刚开始我是这样用的flex。 .right-aisle-box { display: flex; flex: 1 1 360px; .box-content { flex-wrap: wrap; margin: 2px 10px; width: 175px; height:
55.日常问题整理[2023/01/28]使用flex之后，子元素设置宽高无效
weixin_46876034的博客
01-28 245
使用flex之后，子元素设置宽高无效
当元素使用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布局让子项保持自身高度的实现
01-19
这样设置背景色的时候非常不方便，那么直接在父项上，将align-items设为 flex-start,或者align-items属性的其他值都可以,子项就会保持自身的高度了。 .fat{ display: flex; align-items: flex-start; } 效果如下...
flex布局实现上下固定中间滑动的布局方式
11-20
可以通过CSS的绝对定位或直接设置高度来实现。 6. **中间内容样式设置为`flex: 1; overflow: hidden`或`overflow: auto; -webkit-overflow-scrolling: touch`** 使用`flex: 1`可以让中间内容区域占据剩余的所有...
Flex布局
03-29
容器（父元素）通过设置`display: flex`或`display: inline-flex`开启Flex布局，其所有子元素（项目）自动参与Flex布局。容器有两条轴：主轴（main axis）和交叉轴（cross axis）。主轴默认为水平方向，子元素沿着...
flex布局分享.pptx
11-06
Flex布局是一种现代网页和应用程序设计中的布局模式，它允许开发者更灵活地控制元素在容器内的排列方式，解决了传统布局方式（如盒模型）在处理复杂布局时的诸多不便。Flex布局于2009年由W3C提出，现在已经得到了...
移动web开发实例flex布局案例源码
02-16
容器通过设置`display: flex`或`display: inline-flex`开启Flex布局，并可以控制项目的排列方式、对齐方式以及如何分配多余空间。 2. 主轴与侧轴： Flex布局有两个关键轴：主轴（main axis）和交叉轴（cross axis...
弹性盒子布局
weixin_30879169的博客
03-20 166
CSS中传统的布局方式是，基于盒子模型，依赖display属性+position属性+float属性。但对于特殊的布局非常不方便，比如，垂直居中。因此引入弹性盒子flex的布局。 一.flex布局中6个设置在容器上的属性： 1，flex-direction属性决定项目排列方向。（值：row(默认),row-reverse,column,column-reverse） 2,flex-...
flex布局：父元素设为flex,子元素设置宽度无效
qq_43033251的博客
08-18 3919
<div class='box'> <div class='box2'></div> <div class='box2'></div> <div class='box2'></div> </div> .box { display:flex; } .box2 { // 直接设置width:100px无效 // 需要设置成下面格式
在flex布局中，子元素超过容器宽高时，子元素被压缩的解决办法
用CSS3动画实现loading效果
10-14 2725
问题描述： 当弹性盒子的宽度为500px，子元素的宽度之和超出了弹性盒子的宽度时，会发生什么？ <style> .parent{ width: 500px; height: 200px; background: red; display: flex; padding:100px 100px; } .sub{ background: green; width: 400px;
css常用布局-flex自适应布局
蓑笠翁
06-20 7652
一、 Flex布局简介 flex布局基于盒状模型，原意为弹性布局，用来为盒状模型提供最大的灵活性。为CSS中display的一个属性；常用于我们常见的分布布局，比如说多个块并列，自适应屏幕宽度等；在移动端应用广泛。目前所有的浏览器都支持flex布局。 二、应用 ...
设置div的高度_flex下width的设置原则
weixin_29126497的博客
01-10 848
flex 是个好东西，可以帮助我们解决一般情况下布局问题，作为css3的属性特别适合用于解决一维的布局情况，比如实现 左边固定，右边自适应; 中间固定，两边自适应; 右边固定， 左边自适应, 左右高度同步等情景。今天要讲一下flex 下width的设定的一些情况，默认情况下，flex-basis 是用于设定元素的基本宽度，flex-shrink 用于设定元素的宽度缩小， flex-grow 用于设...
弹性（Flex）宽高
侯仕奇的博客
05-13 863
在ReactNative中, 布局Component有一个使用非常 easy 的属性 - flex, 使用方法如下: containerStyle: { flex: 1, backgroundColor: 'lightgreen', justifyContent: 'flex-end', }, 理解 此属性并非作用于子控件或者父控件, 而是作用于自身; 一般而言我们...
父容器display:flex后，子元素的内部元素height:100%无效的解决方法
Gentle_township的博客
02-11 4700
父容器display:flex后，子元素的内部元素height:100%无效的解决方法
flex布局子项不是设置的高度原因
06-17
可能有以下几个原因： 1. 父容器没有设置高度。在使用 flex 布局时，父容器的高度应该设置为具体的数值或者继承父元素的高度。 2. 子元素设置了 flex 属性。如果子元素设置了 flex 属性，那么它的高度就不会受到设置的影响。可以通过设置 flex-shrink 属性为 0 来解决这个问题。 3. 子元素设置了 position 属性。如果子元素设置了 position 属性，那么它的高度也不会受到设置的影响。可以通过设置 position 属性为 static 或者 relative 来解决这个问题。 4. 子元素设置了 overflow 属性。如果子元素设置了 overflow 属性，并且内容超出了容器的高度，那么容器的高度就会被撑开。可以通过设置 overflow 属性为 hidden 或者 scroll 来解决这个问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值