tnblog
首页
视频
资源
登录
原

设置了flex后 ，子元素的高度全部都一样了，没有自适应内容。flex 布局导致子项高度相同

1259人阅读 2024/7/15 16:17 总访问：846025 评论：0 收藏：0 手机
分类: 前端


原因：Flex 布局的默认是：
把所有子项变成水平排列。
默认不自动换行。
让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。

解决方法：
直接在flex容器上，将align-items设为 flex-start,或者align-items:center ,或者align-items属性的其他值都可以,子项就会保持其自身的高度了。
如果是使用了flex-wrap，则应该使用align-content，而不是align-items


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

css弹性盒子，flex布局
css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

flex布局常见问题
flex布局中内容div自适应高度<divclass="content"> <divclass="text-center"style="...

flex好看的相册
先让大家看看效果图吧：需要引入外来插件：https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magni...

一点flex布局的运用
水平分割：html:<divclass="flex-container"> <divclass="flex-item">flexitem1</div...

css div水平居 。文字垂直居中 。flex的方式实现div的垂直与水平居中。布局模板
DIV等元素水平居中定宽度+margin:top auto可以让一个块级别元素在外层居中例如这样：效果：可以看到这个div已经居中了但是...

uni-app 基础view，flex布局使用
代码如下： <template> <view > <view style="display: flex;flex-direction:row-reve...

flex布局多行自适应间隔
//父盒子，设置为： .templateItem { width: 100%; text-align: center; display: flex; align-content: fl...

css实现左边div固定宽度，右边div自适应撑满剩下的宽度。左边定宽，左边固定，右边自适应。flex 占剩下的宽度
这是一道面试题，你有多少种办法呢？这里我们假设左边名为 left，宽度为 200 px，右边名为 right。即默认 .left { widt...

flex 每行3个。flex一行显示3个。flex 每行显示4个自适应排列。flex每行固定几个布局。css 格子栏效果，css实现框框效果。模板。小屏下一行显示4个，大屏下一行显示5个
[TOC]效果如下，每行显示3个自适应排列 其实也很简单，只需要设置父元素flex布局，然后设置一下换行排列，flex-wrap: wrap...

flex子元素靠右。flex让某个子元素靠右或靠左显示
以下以块元素的Flex布局为示例：只需要两句代码，轻松搞定！ 代码1：在父元素里面加入以下代码：（父盒子加了display: fle...

flex平分宽度。flex宽度自适应，均分宽度
html: <div class="parent"> <div class="item"> 测试1 </div&g...

vue布局模板，前端布局模板，flex布局应用
设计图效果： 代码： <!-- 学习活跃度 --> <template> <div class="learnActivityContainer&q...

flex布局一行显示多个。flex布局固定显示n个，自适应布局
在前端开发的时候，对页面布局的时候，经常遇到固定的一行显示多个，这个经常遇到，所以我想做个记录，等到下次遇到的时候...

flex flex-gorw不等分的问题
flex flex-gorw不等分的问题今天在练习flex 栅格布局的时候， 明明设置了项目元素都是flex-gorw:1;但是发现有个地方 ，因为...
这一生多幸运赶上过你.
博主信息
排名
8
文章
231
粉丝
7
评论
7
文章类别
最新文章
最新评价
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术