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; */
}
相关推荐
小*-^-*九1 天前
Electron vue项目 打包 exe文件
javascript·vue.js·electron
AI视觉网奇1 天前
rknn yolo11 推理
前端·人工智能·python
gplitems1231 天前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡1 天前
React Native 中的 useCallback
javascript·react native·react.js
wyzqhhhh1 天前
less和sass
前端·less·sass
Nan_Shu_6141 天前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel1 天前
Vue3 中的双向链表依赖管理详解与示例
前端
谢尔登1 天前
【Nest】基本概念
javascript·node.js·express
前端小白从0开始1 天前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible1 天前
带有渐变光晕
前端·javascript·css