This question already has answers here:
Right or left align one flex item, while keeping the others centered

(10个答案)


4年前关闭。




我正在使用flexbox创建一个导航栏。这是我的html:
<div class="container">
    <div>Project</div>
    <div>About the Project</div>
    <div>Contact Us</div>
    <div>Mailbox</div>
</div>

还有我的css:
.container {
  display: flex,
  justify-content: center
}

这是当前的样子:

html - 将 flex 元素居中,并在行尾放置一个-LMLPHP

我希望mailbox divflex container的末尾。我希望它看起来像这样。

html - 将 flex 元素居中,并在行尾放置一个-LMLPHP

我已经在该 flex 元素上尝试flex-end无效。我需要怎么做才能做到这一点?

最佳答案

可以使用flex auto边距和不可见的flex元素来实现布局。

.container {
  display: flex;
}
.container > div:first-child {
  margin-right: auto;
  visibility: hidden;
}
.container > div:last-child {
  margin-left: auto;
}
<div class="container">
  <div>Mailbox</div><!-- invisible flex item -->
  <div>Project</div>
  <div>About the Project</div>
  <div>Contact Us</div>
  <div>Mailbox</div>
</div>


jsFiddle

笔记:
  • Flex auto margins用于对齐flex元素。
  • 由于flexbox对齐是通过在容器中分配可用空间来进行的,因此添加了一个不可见的flex元素以在两侧均等地创建平衡。
  • 重要的是,幻像元素的宽度必须与最后一个元素(邮箱)的宽度完全相同。否则,将不会有相等的平衡,中间的物品也不会完美地居中。

  • 在此处了解更多信息:Methods for Aligning Flex Items

    关于html - 将 flex 元素居中,并在行尾放置一个,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35250367/

    10-12 13:00
    查看更多