居中弹性项目，行尾有一个[重复]答案

【问题标题】：Center flex items with one at the end of the row [duplicate]居中弹性项目，行尾有一个[重复]
【发布时间】：2016-05-16 23:28:00
【问题描述】：

我正在使用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-end，但无济于事。我需要做什么才能做到这一点？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在您的last-child 或container div 中添加margin-left: auto;。我在这里做以下方式：

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

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

WORKING FIDDLE

【讨论】：

我仍然希望nav 的主要部分像原来的css 一样居中。有什么办法吗？

【解决方案3】：

遵循 Chonchol answer 的想法，并试图保持内容居中，我在容器上添加了一个伪元素

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

我在pseudo a上设置了一个颜色，这样例子可以看懂，当然应该是不可见的。

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

【讨论】：