居中展示项目末尾有一个

Question

我正在创建一个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
}

以下是目前的情况：

我希望mailbox div位于flex container的末尾。我希望它看起来更像这样。

我在该flex项目上尝试过flex-end无济于事。我需要做些什么才能实现这一目标？

Answer 1

可以使用弹性auto边距和不可见的弹性项目来实现布局。

.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对齐通过在容器中分配可用空间来工作，因此添加了一个不可见的弹性项目以在两侧创建相等的平衡。
• 幻像项目与最后一项（邮箱）的宽度非常重要。否则，将没有平衡，中间项目将不会完全居中。

点击此处了解详情：Methods for Aligning Flex Items

Answer 2

在margin-left: auto; last-child container的{​​{1}}中添加div。我在这里做的是：

＆＃13;

＆＃13;

.container {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  /* width: 100%; */
  height: 50px;
  background: #333;
  padding: 15px;
  color: #ddd;
  padding: 10px;
}
.container> .leftone {
  margin-left: 20px;
}
.container div:last-child {
  margin-left: auto;
}

＆＃13;

<div class="container">
  <div class="leftone">Project</div>
  <div class="leftone">About the Project</div>
  <div class="leftone">Contact Us</div>
  <div>Mailbox</div>
</div>

＆＃13;

＆＃13;

＆＃13;

<强> WORKING FIDDLE

Answer 3

按照Chonchol回答的想法，并试图保持内容居中，我在容器上添加了一个伪元素

.container {
  display: flex;
  border: solid 1px blue;
  margin-top: 60px;
}

.container div {
  margin: 10px;
  border: solid 1px red;
}

.container .right {
  margin-left: auto;
  width: 150px;
  text-align: right;
}

.container:before {
  content: "";
  width: 150px;
  margin-right: auto;
  margin-left: 10px;
  background-color: yellow;
}

<div class="container">
    <div>Project</div>
    <div>About the Project</div>
    <div>Contact Us</div>
    <div class="right">Mailbox</div>
</div>

我设置了伪颜色，以便可以理解这个例子，当然它应该是不可见的。

要使元素完全居中，您需要为伪元素赋予与最后一个元素相同的宽度。如果您知道，请这样做。如果没有，请使用更大的宽度和文本对齐，如片段中所示。当然，如果你不需要中心是完美的，那不是必要的