css flex布局,设置flex-wrap:wrap换行后,如何保证子节点被内容撑高后,每一行的子节点高度一致。

flex布局,设置flex-wrap:wrap换行后,如何保证子节点被内容撑高后,每一行的子节点高度一致。

核心:需要设置父节点和子节点:align-items: stretch,两个都要。

代码:

javascript 复制代码
<div class="flex-container">
  <div class="flex-item">短内容(一行)</div>
  <div class="flex-item">中等内容,可能会换行形成两行</div>
  <div class="flex-item">很长的内容,会换行多次,这是导致高度增加的关键内容,需要其他行跟它保持一致</div>
  <div class="flex-item">短内容</div>
  <div class="flex-item">另一行短内容</div>
  <div class="flex-item">中等长度内容</div>
</div>
javascript 复制代码
.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  align-items: stretch; /* 同一行内元素高度一致 */
  gap: 10px;
  width: 100%;
  /* 关键:不设置固定高度,让容器由内容自然撑开(最高行决定总高度) */
}

.flex-item {
  flex: 0 0 calc(33.33% - 10px); /* 三列布局 */
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  
  /* 核心:强制所有子元素最小高度与最高元素一致 */
  /* 方法1:通过 min-height 配合内容自适应(推荐) */
  min-height: 100%;
  
  /* 方法2:若知道最高行高度,可直接固定高度(适用于内容可控场景) */
  /* height: 200px; */
}
相关推荐
Mintopia18 分钟前
🧠 Next.js 还是 Nuxt.js?——当 JavaScript 碰上命运的分叉路
前端·后端·全栈
5pace41 分钟前
Mac Nginx安装、启动、简单命令(苍穹外卖、黑马点评前端环境搭建)
java·前端·nginx·macos·tomcat
Learn Beyond Limits43 分钟前
如何在Mac进行Safari网页长截图?
前端·macos·safari·方法·操作·功能·开发者平台
阿珊和她的猫1 小时前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js
IT_陈寒2 小时前
Vue3性能提升30%的秘密:5个90%开发者不知道的组合式API优化技巧
前端·人工智能·后端
我是华为OD~HR~栗栗呀2 小时前
华为od-22届考研-C++面经
java·前端·c++·python·华为od·华为·面试
老黄编程2 小时前
FireFox如何滚动截屏?
前端·firefox
九皇叔叔2 小时前
HTML与CSS基础入门:从语法到页面结构全解析
css·html·1024程序员节
_殊途3 小时前
HTML-CSS项目练习
前端·css·html
@AfeiyuO3 小时前
el-table 表格嵌套表格
前端·elementui·vue