使用display:flex后div出现多余空白的问题求助

问题根源 #

你的.container设置了height:100vh且为flex容器，flex布局默认的align-items: stretch属性会让所有子项（.box）在交叉轴（垂直方向，因flex-direction:row）上自动拉伸，填满容器的整个高度，这就是文本周围出现大量空白的核心原因。

解决方案 #

以下三种方式任选其一即可：

方案1：修改父容器的交叉轴对齐方式

给.container添加align-items: flex-start，让子项在垂直方向上仅根据内容高度展示：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
  max-width: 650px;
  height: 100vh;
  padding: 0.3em;
  background-color: #7A7A7A;
  border-left: 5px solid;
  align-items: flex-start; /* 添加此行 */
}

方案2：单独设置子项的交叉轴对齐

给.box添加align-self: flex-start，仅让子项自身不被拉伸：

.box {
  background-color: #000;
  border: 1px solid #fff;
  padding: 1rem;
  width: 100%;
  align-self: flex-start; /* 添加此行 */
}

方案3：移除父容器的固定高度

如果不需要.container占满整个视口高度，直接去掉height:100vh，让父容器高度由子项内容决定：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
  max-width: 650px;
  /* 移除 height:100vh */
  padding: 0.3em;
  background-color: #7A7A7A;
  border-left: 5px solid;
}

修改后完整代码示例（以方案1为例） #

body {
  background-color: #C2C2C2;
  color: #fff;
  margin: 0;
  display: flex;
  justify-content:flex-end;
  align-items:center;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
  max-width: 650px;
  height: 100vh;
  padding: 0.3em;
  background-color: #7A7A7A;
  border-left: 5px solid;
  align-items: flex-start;
}

.box {
  background-color: #000;
  border: 1px solid #fff;
  padding: 1rem;
  width: 100%;
}

内容的提问来源于stack exchange，提问作者neira