Flexbox项目对齐与等高布局问题排查

问题1：图片下方的额外空白 #

图片默认是行内替换元素，会和文字基线对齐，导致底部出现间隙。只需给图片设置 display: block，就能消除基线对齐带来的空白。

问题2：标题项与图片等高并设置浅灰背景 #

当前代码里子元素的 align-self: center 会覆盖flex容器的 align-items: stretch 属性，导致标题无法拉伸填满容器高度。需要移除这个属性，同时把标题背景色改为浅灰色（比如 #f5f5f5）。另外要确保flex容器的高度能正常生效，可给html和body设置高度，让容器高度继承视口高度。

CSS 代码 #

/* 让html和body占满视口高度，确保flex容器的height:100%生效 */
html, body {
  height: 100%;
  margin: 0;
}

.flex-container {
  display: flex;
  align-items: stretch; /* 强制子元素拉伸填满容器高度 */
  flex-direction: row;
  border: 1px solid blue;
  height: 100%;
}

.flex-container>div {
  background-color: yellow;
  color: #555;
  width: 50%;
  margin: 0;
  text-align: center;
  /* 移除align-self: center，恢复拉伸效果 */
  font-size: 30px;
  display: flex; /* 用于居中标题文字 */
  align-items: center; /* 垂直居中标题 */
  justify-content: center; /* 水平居中标题 */
}

.title-wrapper {
  background-color: #f5f5f5; /* 设置浅灰色背景 */
}

.imgx {
  width: 100%;
  display: block; /* 消除图片下方空白 */
  height: 100%; /* 让图片填满容器高度 */
  object-fit: cover; /* 可选：保持图片比例，裁剪超出部分 */
}

@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-container>div {
    width: 100%;
    margin: 0;
  }
}

HTML 代码 #

<div class="flex-container">
  <div class="image-wrapper"><img class="imgx" src="https://dummyimage.com/600x400/000/add413&text=IMAGE"></div>
  <div class="title-wrapper">This is the title</div>
</div>

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