Question

我正在为我的网站工作Navbar，我注意到如果我使用float: right在右边有链接，他们会改变订单。我认为我可以通过使用Flexbox来扭转它们 flex-direction: reverse-row。这似乎不起作用？

以下负责重新扭转此效果的代码：

.headerItem {
  display: block;
  padding-left: 7px;
  padding-right: 7px;
  float: right;
  display: flex;
  flex-direction: row-reverse;
}

任何提示/帮助？

Answer 1

float属性不是flex的一部分。这将阻止它做它想象的事情，因为你强迫它向右浮动。 Flex有自己的方式来做到这一点。它被称为对齐 - 内容 - flex-start，flex-end，center，space-between和space-around。尝试哪一个适合你。

Answer 2

好的，所以我找到了答案。 @jmag提供了一些有用的信息，还有一些Googling帮助了。新的导航栏看起来像这样：

<div id="header">
    <span id="headerLogo">XaafCode</span>

    <div id="navbar">
      <a href="/index.html" class="headerItem" id="active">Home</a>
      <a href="#" class="headerItem">Portfolio</a>
      <a href="/contact.html" class="headerItem">Contact me</a>
  </div>
</div>

在CSS中我现在有了这个，很容易修复它：

#navbar, #header { justify-content: space-between; }

Flexbox的行反向属性是不是在逆转这条线？

2 个答案: