居中弹性项目,行末尾有一个

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

在此处了解更多信息:调整Flex项目的方法

Answer 2

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

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

工作小提琴