Flexbox容器图片垂直对齐异常问题求助

问题根源分析 #

1. Flex容器默认flex-direction: row，元素会横向排列，不符合垂直竖列的需求
2. align-items属性不支持left/right值，正确对齐值应为flex-start（左对齐）或flex-end（右对齐）
3. <p>标签自带默认margin，会导致图片间出现莫名间隙
4. 第一个容器中的<h4>会打乱垂直排列结构，建议移出容器单独布局

修改后的代码 #

CSS 部分

/* 重置p标签默认margin，消除图片间隙 */
p {
  margin: 0;
}

.flexcontainer-1 {
  display: flex;
  flex-direction: column; /* 设置为垂直排列 */
  justify-content: flex-start;
  align-items: flex-start; /* 子元素左对齐 */
  height: auto;
  width: auto;
}

.flexcontainer-2 {
  display: flex;
  flex-direction: column; /* 设置为垂直排列 */
  justify-content: flex-start;
  align-items: flex-end; /* 子元素右对齐 */
  height: auto;
  width: auto;
}

HTML 部分

<!-- 将标题移出Flex容器，避免干扰垂直排列结构 -->
<h4>Unsere Immobilien</h4>

<div class="flexcontainer-1">
  <p>
    <a href="db_immobilien_desc_b.php?id=2">
      <img src="../images/haus2.jpg" alt="Beschreibung Haus2"></a>
  </p>
  <p>
    <a href="db_immobilien_desc_b.php?id=3">
      <img src="../images/haus3.jpg" alt="Beschreibung Haus3"></a>
  </p>
  <p>
    <a href="db_immobilien_desc_b.php?id=4">
      <img src="../images/haus4.jpg" alt="Beschreibung Haus4"></a>
  </p>
</div>
<div class="flexcontainer-2">
  <p>
    <a href="db_immobilien_desc_b.php?id=5">
      <img src="../images/haus5.jpg" alt="Beschreibung Haus5"></a>
  </p>
  <p>
    <a href="db_immobilien_desc_b.php?id=6">
      <img src="../images/haus6.jpg" alt="Beschreibung Haus6"></a>
  </p>
  <p>
    <a href="db_immobilien_desc_b.php?id=7">
      <img src="../images/haus7.jpg" alt="Beschreibung Haus6"></a>
  </p>
</div>

额外优化建议 #

• 若要让两个容器分别分布在页面左右两侧，可在外层添加父容器：

  .parent-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  

• 若图片尺寸不一致，可给图片设置固定宽高，确保竖列对齐更整齐：

  img {
    width: 200px;
    height: auto;
  }
  

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