Html 在 flexbox 中左、中、右对齐元素

Aligning elements left, center and right in flexbox

提问by Dave Mikes

I'm trying to create this top header using flexbox.

我正在尝试使用 flexbox 创建这个顶部标题。

Basically I would like to center the <div class="header-title">(Institution institution 1) on the line with the 3 other elements you see. (Institutioner, Ledere and Log ud) like you see on the image.

基本上，我想将<div class="header-title">（机构 1）与您看到的其他 3 个元素放在一起。（Institutioner、Ledere 和 Log ud）就像您在图像上看到的那样。

.nav {
    background: #e1e1e1;
}
ol, ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.header-title {
  justify-content: center;
    align-self: center;
    display: flex;
}
.nav ul li.logout {
      margin-left: auto;
}
.nav ul li a {
    text-decoration: none;
    padding: 0px 20px;
    font-weight: 600;
}

<div class="nav mobilenav">
  <div class="header-title">
    Institution institution 1
  </div>
  <ul>
    <li><a href="/institutions/">Institutioner</a></li>
    <li>
      <a href="/leaders/">Ledere</a>
    </li>
    <li class="logout">
      <a class="button-dark" href="/user/logout">Log ud</a>
    </li>
  </ul>
</div>

Demo - JSFiddle

演示 - JSFiddle

回答by Michael Benjamin

Use nested flex containers and flex-grow: 1.

使用嵌套的 flex 容器和flex-grow: 1.

This allows you to create three equal-width sections on the nav bar.

这允许您在导航栏上创建三个等宽的部分。

Then each section becomes a (nested) flex container which allows you to vertically and horizontally align the links using flex properties.

然后每个部分变成一个（嵌套的）flex 容器，它允许您使用 flex 属性垂直和水平对齐链接。

Now the left and right items are pinned to the edges of the container and the middle item is perfectly centered (even though the left and right items are different widths).

现在左右项目固定在容器的边缘，中间项目完全居中（即使左右项目宽度不同）。

.nav {
  display: flex;
  height: 50px;      /* optional; just for demo */
  background: white;
}

.links {
  flex: 1;          /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 1px dashed red;
}

.header-title {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed red;
}

.logout {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border: 1px dashed red;
}

.links a {
  margin: 0 5px;
  text-decoration: none;
}

<div class="nav mobilenav">

  <div class="links">
    <a href="/institutions/">Institutioner</a>
    <a href="/leaders/">Ledere</a>
  </div>

  <div class="header-title">Institution institution 1</div>

  <div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div>

</div>

jsFiddle

js小提琴

回答by Fellow Stranger

Use justify-content: space-between;like this:

justify-content: space-between;像这样使用：

.container {
  display: flex;
  justify-content: space-between;
}

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

回答by Kevin Jantzer

If you are open to changing your html, you need to put all the items in your header on the same level in the DOM.

如果您愿意更改 html，则需要将标题中的所有项目放在 DOM 中的同一级别。

Here's a working example

这是一个工作示例

.nav {
  background: #e1e1e1;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.nav > div {
  min-width: 0;
  white-space: nowrap;
}

.header-title {
  flex-basis: 80%;
  text-align: center;
}

.nav div a {
  text-decoration: none;
  padding: 0px 20px;
  font-weight: 600;
}

<div class="nav mobilenav">

  <div><a href="/institutions/">Institutioner</a></div>

  <div><a href="/leaders/">Ledere</a></div>

  <div class="header-title">
    Institution institution 1
  </div>

  <div class="logout">
    <a class="button-dark" href="/user/logout">Log ud</a>
  </div>

</div>