首页 > 原创文章 > 软件开发 > 查看文章

Css中Flex布局下两边高度不一致的解决方法

所属分类:软件开发 来源: 丁老师原创 更新时间:2025-09-15 09:26 浏览: 2349 IP属地: 深圳

在css中,flex弹性布局可以实现内部对象左右、垂直的对齐,在多个html对象中,设置flex后一般情况下,内部的对象高度是保持一致的。比如一个div设置了flex,内部有3个div,这3个div的高度以最高的一个div高度值为准保持一致,如图。

image.png

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style>
        .flex {display:flex;}
        .left {background-color:#fa0;width:100px;}
        .middle {background-color:#3af;width:200px;}
        .right {background-color:#cddc39;width:300px;height:200px;}
    </style>
</head>
<body>
    <div class="flex">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
</body>
</html>

但是有时候也会发生高度不一致的情况,如图:

image.png

经过代码检查后,发现是align-items设置所引起的。如果设置align-items:normal,就会使div高度保持一致,如果不是normal,div的高度就不一致。

#使内部div的高度不一致,以各自高度为准
.flex {display:flex;align-items:flex-start;}

#使内部div的高度一致,以最高高度为准
.flex {display:flex;align-items:normal;}


标签:

相关文章

微信小程序开发者工具上传版本失败的解决方法

在开发微信小程序的过程中,开发完毕上传版本时出现提示“上传失败”,具体内容为“非法的文件,错误信息:invalid file”等等,如图:代码在本地运行的好好的,怎么就无法上传,是怎么回事呢?经过丁老师仔细的研究分析,发现这个问题很好解...

小程序想升级,是二次开发好还是重做划算?

有同学咨询丁老师,他们公司之前开发的微信小程序,已经运行了四年多,不管是从UI界面上来说,还是功能使用上,都不太理想,想对小程序进行升级改造,那么是对小程序进行二次开发好呢,还是重新做好呢?今天丁老师针对这个问题,从小程序升级所涉及的开...

目前有可以替代JetBrains的AI ID...

目前AI应用飞速发展,国内外各大厂商都推出了AI IDE(用于编程开发的编辑器),比如Cursor、Trae、Qoder、Copliot等。但就我们常用的开发工具来说,比如JetBrains旗下的Intellij IDEA、Websto...

Css的Calc函数怎么使用?

有做前端的同学在问,css的calc函数到底怎么使用啊,一直搞不清楚,糊里糊涂的,丁老师你能给我讲解一下吗?其实,calc是css样式表中,一个非常简单的函数,是计算数值用的,常用来作为宽度、高度等长度单位来使用。例子一,宽度自适应,两...

推荐文章

小程序开发的流程费用以及需要什么准备材料?

小程序定制开发的流程和费用,以及需要准备的材料,(包括但不限于微信小程序、百度小程序、支付宝小程序、抖音小程序、小红书小程序)具体如下:一、小程序开发的行政流程1.确定软件开发公司,和开发公司签订合同2.甲方支付首期开发费用3.乙方开始进行...

Uniapp开发小程序和app时,根据登录状...

在使用uniapp开发app和小程序时,经常会用到打开app/小程序时,根据登录状态判断是显示首页还是跳转登录页的功能。此功能在app.vue的onlaunch方法中定义,方法如下:onLaunch: function() { const ...

您的nahimic驱动程序似乎已经过期的解决...

打开电脑的Nahimic软件,提示“您的nahimic驱动程序似乎已经过期,无法启动”,然后需要点击链接更新驱动,但点击进去后,也找不到什么驱动。经过研究发现解决办法:1.使用SDI安装,即Snappy Driver Installer 1...

微信小程序提示“手机号快速验证组件”资源包用...

微信小程序自2023年8月起,开始对《手机号快速验证组件》进行收费,每个小程序有1000次的免费额度,超过额度就要收费。说白了就是以后在使用微信小程序获取用户手机(用户主动授权)的时候,需要按次数收费了。那么,在当前的经济状况下,如何做到轻...