如何使用flexbox实现首个子元素占满两行高度且适配多端的布局

开发者阿泽

2026-10-9

Flexbox 双行对齐布局实现方案

实现思路

核心是利用flex容器的换行属性，配合首个元素的固定高度、剩余元素的高度比例控制，再通过媒体查询适配移动端布局：

桌面端：开启flex容器换行，首个元素高度设为其余子元素的2倍，宽度占容器的指定比例，剩余子元素宽度设置为可均分剩余空间，自动折为两行，高度和首个元素的半高对齐
移动端：取消多列排布，所有子元素宽度设为100%，按正常流垂直排列

代码实现

<div class="container">
  <div class="item first">首个子元素</div>
  <div class="item">子元素2</div>
  <div class="item">子元素3</div>
  <div class="item">子元素4</div>
  <div class="item">子元素5</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 可自定义间距 */
  width: 100%;
}

.item {
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid #eee;
}

/* 桌面端样式，断点可根据需求调整 */
@media screen and (min-width: 768px) {
  .first {
    /* 宽度占比可自定义，这里设为40% */
    flex: 0 0 40%;
    /* 高度为其余子元素的2倍 */
    height: 200px;
  }
  .item:not(.first) {
    /* 自动填充剩余宽度，最小宽度设为25%保证两行排列 */
    flex: 1 1 25%;
    height: 95px; /* 减去gap的高度，刚好和两行总高对齐 */
  }
}

/* 移动端样式 */
@media screen and (max-width: 767px) {
  .item {
    flex: 1 1 100%;
    height: auto;
    min-height: 80px;
  }
}