我无法让 header 中的链接在 Flex-Row 上沿交叉轴居中，从左到右分配

Question

我正在学习 Odin 项目课程。我在 flex box 部分，有点困惑。我不确定我在 Flex 中从左到右沿交叉轴对齐做错了什么。

所以在代码中，我需要“一二三”和“四五六”以交叉访问为中心。

我尝试了 align-content/items，但我认为我应该使用物品。我试过center，flex-start / flex-end看它动不动，它在十字架上根本不动。

我在谷歌上搜索了很多，尝试了大约一个小时，同时我正在努力尝试不同的东西。似乎没有任何效果。我在将它们间隔开时遇到了问题，但是我能够解决这个问题和让它们离开两侧的边距。

我的假设；我想我可能遗漏了一些关于身高的信息？容器没有足够的积极 space 移动？它在垂直方向上是否太紧以至于我居中但没有看到它因为顶部和底部与内容/链接相对，因为我去掉了填充和边距？

.header {
  font-family: monospace;
  background: papayawhip;
  display: flex;
  justify-content: center;
  align-content: center;
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
  margin: 0em 3em 0em 3em;
}

ul {
  /* this removes the dots on the list items*/
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a {
  font-size: 22px;
  background: white;
  padding: 8px;
  /* this removes the line under the links */
  text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Header</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    <div class="left-links">
      <ul>
        <li><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
      </ul>
    </div>
    <div class="logo">LOGO</div>
    <div class="right-links">
      <ul>
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li><a href="#">SIX</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Answer 1

将 height: 100%; 添加到 ul 以使您已经拥有的居中对其父级的整个高度有效：

.header {
  font-family: monospace;
  background: papayawhip;
  display: flex;
  justify-content: center;
  align-content: center;
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
  margin: 0em 3em 0em 3em;
}

ul {
  /* this removes the dots on the list items*/
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

a {
  font-size: 22px;
  background: white;
  padding: 8px;
  /* this removes the line under the links */
  text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Header</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    <div class="left-links">
      <ul>
        <li><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
      </ul>
    </div>
    <div class="logo">LOGO</div>
    <div class="right-links">
      <ul>
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li><a href="#">SIX</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Answer 2

对于 header class 你已经选择了 display:flex; justify-content: center; align-content: center; 但必须给出 align-items:center; 以便 header class 中的元素] 将来到垂直中心（横轴 - 中心）..

您必须将 header class css 更改为：-

.header  {
  font-family: monospace;
  background: papayawhip;
  display: flex;  
  justify-content: center;
  align-items: center; /* change this line */
  }

Answer 3

如果你想这样： photo

添加align-items：居中； .header

.header 会是这样的：

.header {
font-family: monospace;
background: papayawhip;
display: flex;
justify-content: center;
align-items: center; }

我无法让 header 中的链接在 Flex-Row 上沿交叉轴居中，从左到右分配

I cannot get links in the header to center along the cross axis on a Flex-Row, left to right assignment

html

css

flexbox