在 flexbox 中左、中、右对齐元素 [英] Aligning elements left, center and right in flexbox

问题描述

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

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

.nav {背景:#e1e1e1；}ol, ul {列表样式:无；显示:弹性；弹性方向:行；对齐项目:居中；justify-content: flex-start;}.header-title {对齐内容:居中；对齐自我:居中；显示:弹性；}.nav ul li.logout {左边距:自动；}.nav ul li a {文字装饰:无；填充:0px 20px；字体粗细:600；}

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

演示 - JSFiddle

解决方案

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

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

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

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

.nav {显示:弹性；高度:50px；/* 选修的;仅用于演示 */背景:白色；}.links {弹性:1；/* 简写:flex-grow: 1, flex-shrink: 1, flex-basis: 0 */显示:弹性；justify-content: flex-start;对齐项目:居中；边框:1px 红色虚线；}.header-title {弹性:1；显示:弹性；对齐内容:居中；对齐项目:居中；边框:1px 红色虚线；}.登出 {弹性:1；显示:弹性；justify-content: flex-end;对齐项目:居中；边框:1px 红色虚线；}.links 一个 {边距:0 5px；文字装饰:无；}

<div class="links"><a href="/institutions/">Institutioner</a><a href="/leaders/">Ledere</a>
<div class="header-title">机构机构1</div><div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div>

jsFiddle

I'm trying to create this top header using 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.

.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

解决方案

Use nested flex containers and 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.

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

这篇关于在 flexbox 中左、中、右对齐元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！