如何解决flex布局下‘Links:’与链接无法分行显示的问题？

问题出在父容器div使用了flex布局，默认的flex-direction: row会让子元素横向排列，导致h1和链接处于同一行。只需调整flex布局的方向，并修正HTML中的语法错误即可实现垂直排列：

步骤1：修正HTML的语法错误 #

原代码中div的内联样式写法错误，把{ text-align: center; }改成标准的style="text-align: center;"，同时可以移除多余的<br>标签：

<div id="lols" style="text-align: center;">
  <h1>Links:</h1>
  <a style="color:white; font-family:verdana;" href="https://bobjoerules.github.io/DarkMode-sheet" title="Home"><img src="img/darkmode sheet.png" alt="DarkMode-sheet-logo" width="192" height="108"></a>
</div>

步骤2：调整CSS的flex布局方向 #

给目标div添加flex-direction: column，让子元素垂直排列：

div {
  display: flex;
  flex-direction: column; /* 改为垂直排列主轴 */
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  width: 100%;
  height: 100vh;
}

h1 {
  color: white
}

div:nth-child(3) {
  background-image: url(img/bbground.jpeg);
  background-size: contain;
  background-position: center;
}

原理说明 #

• flex-direction: column会将flex容器的主轴方向改为垂直，子元素会从上到下依次堆叠，自然实现“Links:”在链接上方的效果。
• 保留align-items: center和justify-content: center，可以让整体内容在容器中保持水平和垂直居中。

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