web-dev-qa-db-ja.com

flexboxで要素を左、中央、右に揃える

フレックスボックスを使用してこのトップヘッダーを作成しようとしています。

header

基本的に、<div class="header-title">（教育機関1）を他の3つの要素の行に集中させたいと思います。 （教育機関、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

htmlcsscss3flexboxcentering
21
Dave Mikes

ネストされたフレックスコンテナとflex-grow: 1。

これにより、ナビゲーションバーに3つの等しい幅のセクションを作成できます。

その後、各セクションは（ネストされた）フレックスコンテナになり、フレックスプロパティを使用してリンクを垂直および水平に整列できます。

これで、左右のアイテムはコンテナの端に固定され、中央のアイテムは完全に中央に配置されます（左右のアイテムの幅は異なります）。

.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

30
Michael_B

つかいます justify-content: space-between; このような：

.container {
  display: flex;
  justify-content: space-between;
}
<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>
4
Fellow Stranger

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>
1
Kevin Jantzer