居中柔性项目，其中一个位于行的末尾 [英] Center flex items with one at the end of the row

问题描述

我使用 flexbox 创建了一个导航栏。这是我的 html ：

I am creating a navbar with flexbox. Here is my 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
}

以下是目前的样子：

我想要邮箱 div 位于 flex容器的末尾。我想让它看起来更像这样。

I want the mailbox div to be at the end of the flex container. I want it to look more like this.

我已尝试 flex-end 在该flex项目无效。

I have tried flex-end on that flex item to no avail. What do I need to do to make that happen?

推荐答案

布局可以通过flex auto 边界和不可见的flex项。

The layout can be achieved with flex auto margins and an invisible flex item.

.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>

注意：

• Flex auto 边距用于对齐弹性项目。


• 由于flexbox对齐方式是通过分配容器中的可用空间，


• 重要的是，幻影项与最后一项（邮箱）的宽度完全相同。

• Flex auto margins are used for aligning the flex items.
• Since flexbox alignment works by distributing free space in the container, an invisible flex item is added to create equal balance on both sides.
• It's important that the phantom item be exactly the same width as the last item (Mailbox). Otherwise, there won't be equal balance and the middle items will not be perfectly centered.

在这里了解更多：对齐Flex项目的方法

这篇关于居中柔性项目，其中一个位于行的末尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！