web-dev-qa-db-fra.com

Alignement des éléments à gauche, au centre et à droite dans flexbox

J'essaie de créer cet en-tête supérieur à l'aide de flexbox.

header

En gros, je voudrais centrer le <div class="header-title"> (Institution institution 1) en ligne avec les 3 autres éléments que vous voyez. (Institutioner, Ledere et Log ud) comme vous le voyez sur l'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>

Démo - JSFiddle

htmlcsscss3flexboxcentering
21
Dave Mikes

Utilisez des conteneurs flex imbriqués et flex-grow: 1.

Cela vous permet de créer trois sections de largeur égale sur la barre de navigation.

Ensuite, chaque section devient un conteneur flex (imbriqué) qui vous permet d'aligner verticalement et horizontalement les liens à l'aide des propriétés flex.

Les éléments gauche et droit sont maintenant épinglés sur les bords du conteneur et l'élément central est parfaitement centré (même si les éléments gauche et droit sont de largeurs différentes).

.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

Utilisation justify-content: space-between; comme ça:

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

Si vous êtes prêt à modifier votre html, vous devez placer tous les éléments de votre en-tête au même niveau dans le DOM.

Voici un exemple de travail

.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