html - que - flexbox pdf

Alineando elementos a la izquierda, centro y derecha en flexbox

Question

Estoy tratando de crear este encabezado superior usando flexbox.

Básicamente, me gustaría centrar el <div class="header-title"> (institución 1) en la línea con los otros 3 elementos que ve. (Institutioner, Ledere and Log ud) como se ve en la imagen.

.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

Answer 1

Si está dispuesto a cambiar su html, debe colocar todos los elementos en su encabezado en el mismo nivel en el DOM.

Aquí hay un ejemplo de trabajo.

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

Answer 2

Use contenedores flexibles anidados y flex-grow: 1 .

Esto le permite crear tres secciones de igual ancho en la barra de navegación.

Luego, cada sección se convierte en un contenedor flexible (anidado) que le permite alinear los enlaces vertical y horizontalmente utilizando las propiedades de flexión.

Ahora los elementos izquierdo y derecho se fijan a los bordes del contenedor y el elemento central está perfectamente centrado (aunque los elementos izquierdo y derecho tienen anchos diferentes).

.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

Answer 3

Utilice justify-content: space-between; Me gusta esto:

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

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