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

Posted 2023-03-05

【中文标题】居中弹性项目，行尾有一个[重复]

【英文标题】：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，但无济于事。我需要做什么才能做到这一点？

【参考方案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。当然，如果你不需要中心是完美的，那就没有必要了