web-dev-qa-db-fra.com

Positionner le dernier article flexible à la fin du conteneur

Cette question concerne un navigateur avec une prise en charge complète de css3, y compris flexbox.

J'ai un conteneur flexible contenant des articles. Ils sont tous justifiés de flex-start mais je veux le dernier.end item à justifier pour flex-end. Y a-t-il un bon moyen de faire cela sans modifier le code HTML et sans recourir au positionnement absolu?

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}
<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>
csscss3flexbox
56
George Mauer

Module de présentation de boîte flexible - 8.1. Alignement sur les marges automatiques

Les marges automatiques sur les éléments flexibles ont un effet très similaire aux marges automatiques dans le flux de blocs:

  • Lors des calculs de bases flexibles et de longueurs flexibles, les marges automatiques sont traitées comme 0.

  • Avant l'alignement via justify-content et align-self, tout espace libre positif est distribué aux marges automatiques dans cette dimension.

Par conséquent, vous pouvez utiliser margin-top: auto pour répartir l’espace entre les autres éléments et le dernier élément. Cela positionnera l'élément en bas.

.end {
  margin-top: auto;
}

Vous pouvez également éviter d'utiliser une classe et utiliser le :last-of-type/last-child pseudo classe.

p:last-of-type {
  margin-top: auto;
}

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}
.end {
  margin-top: auto;
}
<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>
115
Josh Crozier

Ce principe flexbox fonctionne également horizontalement

Lors des calculs de bases flexibles et de longueurs flexibles, les marges automatiques sont traitées comme 0.
Avant l’alignement via justification-contenu et align-self, tout espace libre positif est distribué aux marges automatiques dans cette dimension.

Définir une marge gauche automatique pour le dernier élément fera le travail. 

.last-item {
  margin-left: auto;
}

Exemple de code: 

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}
<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

Codepen Snippet

Cela peut être très utile pour les pieds de page.

Comme Envato l’a fait ici avec le logo de la société.

Codepen Snippet

47
David Ben Dahan