在flexbox中将元素左对齐、居中或右对齐

Question

在flexbox中将元素左对齐、居中或右对齐

46

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

基本上，我想要将<div class="header-title">（Institution institution 1）与您看到的其他三个元素（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>

演示 - JSFiddle

- Dave Mikes

无法使用flexbox和您当前的HTML结构。Flexbox假定您要对齐的元素位于同一级别（您将菜单嵌套在内部）。 - Kevin Jantzer

嗨@KevinJantzer，感谢您的评论，那么您有什么建议呢？ - Dave Mikes

如果你愿意更改你的HTML，你需要将所有的头部项目放在DOM中的同一级别上。 - Kevin Jantzer

@DaniP 抱歉，我以为一个 jsfiddle 会是同样的东西。 - Dave Mikes

如果您可以控制HTML，我建议您创建三个包装器div：一个用于菜单的左侧部分，一个用于标题，另一个用于注销按钮。使用flexbox定位它们，并定位其中的元素。 - glaux

显示剩余3条评论

5个回答

9

使用 justify-content: space-between; 实现如下效果：

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

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

- Fellow Stranger

17

只有当A和C的宽度相同时，这才会使得容器中的B居中。 - Dominic

2

CSS Grid比Flexbox更适合此任务。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}
button {
  display: inline-block;
}
.short-content {
  margin-left: auto;
}

<div class="grid">
  <div class="long-content">
    This has content that is fairly long
  </div>
  <button>CTA Button</button>
  <div class="short-content">
    Small Text
  </div>
</div>

- Jake Zeitz

1

这里有一个Flex方案，可以使左右容器对齐，并正确居中中间容器。

.header-box {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    padding-top: 50px;
    
}
.left-header, .center-header, .right-header {
    flex: 100px; /* adjust width if needed */
}
.header-box div:nth-of-type(1) {
    text-align: left;
}
.header-box div:nth-of-type(2) {
    align-self: center;
    text-align: center;
}
.header-box div:nth-of-type(3) {
    text-align: right;
}

<div class="header-box">
  <div class="left-header">Left<br>header<br>content</div>
  <div class="center-header">Center<br>header<br>content</div>
  <div class="right-header">Right<br>header<br>content</div>
</div>

- T. Bulford

-1

如果您愿意更改您的 HTML，您需要将标头中的所有项放在DOM中的同一级别上。

这是一个可行的示例

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

- Kevin Jantzer

5

这种方法存在的问题是中间的项目没有在容器中居中对齐。左右两边的项目宽度不同，导致空间分配不均匀。在这种情况下，中间的项目被对准为右侧中心。以下是一个示意图：https://jsfiddle.net/92etgd7u/ - Michael Benjamin

是的，我看到了:( 下面的答案似乎是正确的解决方案:) 但是嘿 - Dave Mikes

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

使用嵌套的Flex容器和 flex-grow: 1，可以在导航栏上创建三个等宽的区域。然后，每个区域都成为一个（嵌套）的Flex容器，使您能够使用Flex属性在垂直和水平方向上对链接进行对齐。现在，左侧和右侧的项固定在容器的边缘，而中间的项则完美地居中（即使左侧和右侧的项宽度不同）。

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

在flexbox中将元素左对齐、居中或右对齐

jsFiddle

这是一个可行的示例