css 网格单元格中的 Flexbox 项目似乎换行了

Question

我是使用 css 网格的新手，我正在尝试使用 flexbox 在单个网格单元格中定位两个项目来定位项目。左侧有一个徽标，右侧有一个导航栏，但导航栏不在单元格“a”内居中，它似乎低于单元格“a”的下边界（我尝试上传 jpeg 图像，但 Stack Overflow 目前在接受图片上传时遇到问题，请参阅 Image upload fails with "imgur is rejecting the request")。

这里是html代码：

<div class="a">

<div class="a_left">
Logo for Project
</div>

<div class="a_right">
<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>
</div>

</div>

这是css代码：

.a{
    display: grid;
    font-family: sans-serif;
    color: green;
    font-size: 16pt;
}

.a_left{
    display: flex;
    text-align: left;
    vertical-align: left;
    flex-wrap: nowrap;
}

.a_right{
    display: flex;
    height: 100%;
    flex-wrap: nowrap;
    justify-content: right;
    vertical-align: right;
}

.topnav {
    align-content: right;
    justify-content: center;
    overflow: hidden;
    background-color: #333;
    height: 100%
}

网格容器是“a”，导航栏在 a_right 弹性框中。我已经尝试了很多可能的高度、宽度和居中属性，但没有成功，但我不知道该属性是否应该应用于 a 或 a_right。

感谢您在此导航栏居中提供的任何帮助。

Answer 1

因此，您将元素 .a 设置为网格容器：

.a {
    display: grid;
}

...您想知道为什么孩子们（.a_left 和.a-right）垂直堆叠而不是在同一行。

原因是您没有使用grid-template-columns 或grid-template-areas 定义显式 轨道。因为您还没有定义显式列，grid-auto-columns 开始发挥作用来创建 implicit 列。

grid-auto-columns 的默认值为auto，这实质上允许每个网格项占据一整行。这就是你所看到的；就像块元素堆叠一样。

试试这个：

.a {
  display: grid;
  grid-template-columns: auto 1fr; /* define explicit columns */
  color: green;
  font-size: 16pt;
}

.a_left {
  display: flex;
}

.a_right {
  display: flex;
  justify-content: center;
}

.topnav {
  background-color: yellow;
}

<div class="a">
  <div class="a_left">Logo for Project</div>
  <div class="a_right">
    <div class="topnav">
      <a class="active" href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>
  </div>

您可能还想阅读这篇关于在具有其他元素的行上居中元素的帖子：Center and right align flexbox elements

Answer 2

如果你想在左边有徽标，在右边有菜单，你可以这样做：

.a {
  display: flex;
  justify-content: space-between;
}

<div class="a">
  <div class="a_left">
    Logo for Project
  </div>
  <div class="a_right">
    <div class="topnav">
      <a class="active" href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>
  </div>
</div>

Answer 3

Flexbox 是一个用于将其子元素居中的容器 - 现在看起来您正在将子元素放入 flexbox 中，这对您没有多大用处。

如果您需要维护“网格”显示属性，请为您的徽标和导航栏添加一个容器。这是您想要使用display:flex 的容器，它将是您应用与 flex 相关的对齐属性的容器。

此外，要垂直对齐 flexbox 中的内容，请使用 align-items。水平对齐需要justify-content。