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

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

所属分类:软件开发 来源: 丁老师原创 更新时间:2025-09-15 09:26 浏览: 1735 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;}


标签:

相关文章

最新微信小程序定制开发报价明细(附避坑指南)

一、开发前期基础费用(一)认证费用微信官方收取小程序认证费用,企业主体为300元/年。若已有认证过的公众号,可免费复用资质进行小程序认证。个人主体认证费用为30元/年,但个人开发者在小程序功能和应用场景上存在较多限制,如无法开通微信支付...

微信公众号获取用户的手机号的方法?

有同学在问,微信公众号,可以获取微信用户的手机号吗?答案是肯定的,当然可以!但是,因为现在越来越注重用户隐私以及数据收集,微信公众号是不能直接任意获取用户手机号的,获取用户的手机号码,也不是任意微信公众号都可以做到的,有一定的要求和限制...

Nginx环境下php下缓存问题的解决

nginx环境下php缓存问题的解决

Javascript复制对象改变原值的解决办...

在进行vue开发中,经常会遇到复制对象,赋值新对象后,原对象值被改变的问题,举个例子:let old={ "a":1, "b":2 } let new=old; new['c']=...

推荐文章

Mysql导入文件,source命令/php...

用phpmyadmin导入大数据库文件时,容易502 bad gateway,可以直接在linux上用mysql原生命令导入。1.上传sql文件到目录用Xshell登录服务器,将迁移过来的 sql 文件移到 home 目录下,方便下一步的...

低成本的政企软件系统维护服务

开源节流,控制生产成本,限制开销,是每个企业和单位都要采取的成本控制和管理措施。其中,人力成本是企业在经营中支出占比较大的一块。以IT信息化部门为例,一个负责企业软件系统运维的IT部门,至少需要配置3个员工,每个员工按照IT工程师3-5年工...

FastAdmin非菜单链接,跳转菜单页面的...

在fastadmin中,一个页面的非菜单链接,想要点击后打开指定页面,并且菜单自动展开,该怎么实现呢?经过丁老师研究后,发现超级简单,废话不多说,直接上代码:<a class="btn-addtabs" href=...

Composer self-update 更...

1. composer版本更新文档版本号:https://getcomposer.org/download中文网:https://docs.phpcomposer.com/03-cli.html#self-update英文网:https:/...

当前在线
免费咨询