Flex布局之等高等列布局

Flex 布局默认使子元素等高，配合相关属性可实现各种等高等宽效果。

默认等高特性

Flex 容器的 align-items 默认值为 stretch，子元素自动拉伸至等高。

.container {
  display: flex;
  /* align-items: stretch; 默认值 */
}

.item {
  /* 自动拉伸到最高元素的高度 */
}

<div class="container">
  <div class="item" style="height: 100px;">内容较短</div>
  <div class="item">内容较长，高度自适应拉伸至等高</div>
</div>

等宽布局

固定等宽

.container {
  display: flex;
}

.item {
  flex: 1;  /* 所有子元素等宽 */
}

按比例分配

.container {
  display: flex;
}

.item-primary {
  flex: 2;  /* 占 2 份 */
}

.item-secondary {
  flex: 1;  /* 占 1 份 */
}

等高卡片布局

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px;  /* 最小宽度300px，自动等高 */
  display: flex;
  flex-direction: column;
}

.card-content {
  flex: 1;  /* 内容区域自动填充剩余空间 */
}

.card-footer {
  margin-top: auto;  /* 底部固定 */
}

<div class="card-container">
  <div class="card">
    <div class="card-content">卡片内容</div>
    <div class="card-footer">按钮</div>
  </div>
  <div class="card">
    <div class="card-content">较长内容...</div>
    <div class="card-footer">按钮</div>
  </div>
</div>

等高不等宽布局

.container {
  display: flex;
}

.item {
  align-self: stretch;  /* 显式声明等高 */
  /* 各自宽度独立 */
}

等宽不等高布局

.container {
  display: flex;
  align-items: flex-start;  /* 顶部对齐，不等高 */
}

.item {
  flex: 1;  /* 等宽 */
}

常见布局场景

三栏等高

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 200px;
}

.main {
  flex: 1;
}

导航菜单等宽

.nav {
  display: flex;
}

.nav-item {
  flex: 1;
  text-align: center;
}

要点总结

• align-items: stretch（默认）使子元素等高
• flex: 1 使子元素等宽
• flex-direction: column + flex: 1 实现内部等高
• margin-top: auto 将元素推至底部