为什么这两个 div 彼此相邻，有人知道为什么这个页脚不起作用吗？

Question

我的意图是显示徽标及其下方的 3 个按钮，其中包含所有社交媒体链接。但是，我不知道为什么，它使我的 2 个 div 显示为内联而不是 flex 或 block。有人知道为什么这不起作用吗？

.foot {
  background-color: #152238;
  width: 100%;
  height: 60vh;
  border-top: solid 2px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.foot h2 {
  font-size: 1.5rem;
  font-family: 'Kdam Thmor Pro', sans-serif;
  color: #ffffff;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">
<footer>
    <div class="foot">
      <div>
        <h2>Shop</h2>
      </div>
      <div>
        <button class="btn btn-info gmail"><i class="fa-regular fa-envelope"></i> Gmail</button>
        <button class="btn btn-info insta"><i class="fa-brands fa-instagram"></i> Instagram</button>
        <button class="btn btn-info tiktok"><i class="fa-brands fa-tiktok"></i> TikTok</button>
      </div>
    </div>
  </footer>

我试过更改显示方法，使用引导行甚至

<br>

.

Answer 1

默认情况下，一个

flex

-box会尝试将它的项目压缩成一个

row

。要改变这一点，你需要

flex-direction: column

：

.foot {
  flex-direction: column;
}

试试看：

.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #152238;
  width: 100%;
  height: 60vh;
  border-top: solid 2px #ffffff;
}

.foot h2 {
  font-size: 1.5rem;
  font-family: 'Kdam Thmor Pro', sans-serif;
  color: #ffffff;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">
<footer>
    <div class="foot">
      <div>
        <h2>Shop</h2>
      </div>
      <div>
        <button class="btn btn-info gmail"><i class="fa-regular fa-envelope"></i> Gmail</button>
        <button class="btn btn-info insta"><i class="fa-brands fa-instagram"></i> Instagram</button>
        <button class="btn btn-info tiktok"><i class="fa-brands fa-tiktok"></i> TikTok</button>
      </div>
    </div>
  </footer>

Answer 2

如果要使用flex，需要指定item的方向。 Flex 有不同的方向：

行 |行反转 |栏目 |列反转；

因为你想把它们显示在彼此之上，只需将这个添加到你的脚类中：

flex-direction: column;