Flex布局容器内邮件地址锚点div定位异常问题求助

问题核心原因 #

你设置了.container为display: flex且默认flex-direction: row（横向排列），flex容器的所有直接子元素都会自动成为独立flex项横向排列：

• 第一个flex项是包裹图片的<p>标签
• 第二个是中间纯文本+<br>组成的匿名flex项
• 第三个是装邮箱链接的<div class="anchor">
  三个元素横向挤在同一行，所以邮箱链接会跑到容器最右侧，和div是否开启新flex无关，是flex容器默认排列规则导致的。另外你原有代码里图片外层的<a>标签多写了一个无效闭合，导致图片没有被包裹进跳转链接里，也可以同步修正。

可行解决方案 #

方案1（最符合原本图文并排的需求） #

把所有文字内容统一放到同一个独立容器中，让flex容器只有「图片容器」和「文字容器」两个横向排列的子项即可，修改后的代码如下：

HTML部分

<div class="container">
  <!-- 第一个flex项：图片部分 -->
  <p>
    <a target="_blank" href="static/about.jpg">
      <img src="../static/about.jpg" alt="aboutpic" width="200" height="100">
    </a>
  </p>
  <!-- 第二个flex项：所有文字内容统一放在这个容器内 -->
  <div class="text-content">
    blah blah blah<br><br>
    blah blah blah<br><br>
    blah blah blah<br><br>
    blah blah blah<br><br>
    For appointments please contact blah blah blah directly at:<br><br>
    Phone: blah blah blah<br><br>
    Email:<div class="anchor"><a href="mailto:blah blah blah@gmail.com"> blah blah blah.com</a></div>
  </div>
</div>

可选补充样式

可以给文字容器加左边距调整和图片的间距：

div.text-content {
  padding-left: 20px;
}

方案2（仅适合需要内容纵向排列的场景） #

如果不需要图文并排，要所有内容纵向排列，直接修改.container的flex方向即可：

div.container {
  align-content: flex-start;
  display: flex;
  justify-content: flex-start;
  flex-wrap: no-wrap; 
  flex-direction: column; /* 新增这一行 */
}

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