对齐项目正在做调整内容的工作，但调整内容不起作用

Question

为什么此代码中的对齐项目将子元素集中在 x 轴而不是 y 轴上，并且对齐内容中心不执行任何操作，当我删除对齐内容时，它仍然在 x 轴上对齐将项目在 x 轴上对齐：

/* HTML: */

<div class="page">
    <div class="navbar">
      <div class="leftSide">
        <img src="./assets/images/logo.png">
      </div>
      <div class="rightSide">
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">What's New</a></li>
        <li><a href="#">Contact Us</a></li>
      </div>
    </div>

    <div class="content">
      <h1>It's not just Coffee</h1>
      <h1>It's <span>Starbucks</span></h1>
    </div>
  </div>

/* CSS：*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.page {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  position: sticky;
  top: 0;
}

.rightSide {
  display: flex;
  list-style: none;
}

.rightSide li{
  margin-right: 30px;
}

.rightSide li a {
  text-decoration: none;
  color: black;
  position: relative;
  transition: all 0.5s;
}

.rightSide li a::before {
  content: '';
  width: 0%;
}

.rightSide li a:hover::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: #000;
  bottom: 0;
  left: 0;
}

.leftSide img {
  width: 80px;
  height: 80px;
  margin-left: 15px;
}

我尝试了所有方法并进行了搜索，但找不到如何修复它。这不是我第一次遇到这种事

Answer 1

这两个问题没有直接联系。

第一个问题是你对Flexbox如何工作的误解。我强烈建议您阅读 Chris Coyier 撰写的“Flexbox 完整指南” 的前 3 部分。尤其是“背景”部分是你搞错的部分。

引用 Chris Coyier 的话：

主轴 – Flex 容器的主轴是 Flex 项目布局的主轴。请注意，它不一定是水平的；它不一定是水平的。这取决于 flex-direction 属性（见下文）。

这意味着主轴始终等于弯曲方向。这意味着

justify-content

解决

main-axis

和

align-items

cross-axis

。

justify-content

和

align-items

并未专门针对

Y-axis

或

X-axis

！

默认情况下，

flex-direction

设置为

row

，这将沿水平轴对齐项目：

body {
  margin: 0;
}

.flex-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center; 
}

.flex-item {
  width: 50px;
  height: 50px;
  border: 2px dashed blue;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

如果将

flex-direction

更改为

column

，主轴将是垂直的（Y 轴），因此

justify-content

将沿 Y 轴对齐项目：

body {
  margin: 0;
}

.flex-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.flex-item {
  width: 50px;
  height: 50px;
  border: 2px dashed blue;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

第二个问题是一个纯粹的逻辑问题，你无法直接看到。默认情况下，元素的高度为

auto

，这意味着浏览器将计算高度以完全适合内容。如果您查看此代码片段，您会发现该元素（蓝色边框）与父元素（红色边框）完美契合：

body {
  margin: 0;
}

.flex-container {
  display: flex;
  align-items: center; 
  border: 2px dotted red;
}

.flex-item {
  width: 50px;
  height: 50px;
  border: 2px dashed blue;
}

<div class="flex-container">
  <div class="flex-item"></div>
</div>

逻辑会告诉你，要使元素在视觉上居中，该元素的父元素必须高于该元素本身。您无法将元素与紧密配合的容器居中。如果将容器的高度提高到大于内容的高度，您将看到居中工作正常：

body {
  margin: 0;
}

.flex-container {
  display: flex;
  align-items: center; 
  border: 2px dotted red;
  height: 80vh;
}

.flex-item {
  width: 50px;
  height: 50px;
  border: 2px dashed blue;
}

<div class="flex-container">
  <div class="flex-item"></div>
</div>