Dernière Position flex élément à la fin de conteneur

Cette question concerne un navigateur avec plein css3, y compris flexbox.

J'ai un conteneur flex avec certains éléments. Ils sont tous justifiés flex-pour commencer, mais je veux le dernier .end élément à être justifiée, flex-end. Est-il un bon moyen de le faire sans modifier le code HTML et sans avoir recours à un positionnement absolu?

CSS:

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

HTML:

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

Oui. Voir auto marge illustrations ici: stackoverflow.com/a/33856609/3597276

InformationsquelleAutor George Mauer | 2015-11-25

108
Flexible Zone de Mise en page du Module 8.1. L'alignement automatique des marges

Auto marges sur flex éléments ont un effet très semblable à l'auto marges dans le bloc du flux:
- Pendant les calculs de flexion des bases et des longueurs de flexible, auto marges sont traités comme des 0.
- Avant l'alignement via justify-content et align-self, tout résultat positif de l'espace libre est distribué à l'auto marges dans cette dimension.
Par conséquent, vous pouvez utiliser margin-top: auto de distribuer l'espace entre les autres éléments et le dernier élément. Ce sera la position de l'élément dans le bas.
```
.end {
  margin-top: auto;
}
```
Vous pouvez également éviter d'utiliser une classe et d'utiliser les :last-of-type/last-child pseudo classe.
```
p:last-of-type {
  margin-top: auto;
}
```
CSS:
```
.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;
}
```
HTML:
```
<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>
```
- Intéressant. Pourquoi ce travail?
- ah parfait, ne peut pas croire que j'ai manqué ça! Particulièrement gênant car je totalement savoir sur l'utilisation de la marge-automatique-pour-centre-verticalement astuce et de l'utiliser tout le temps
- Je n'ai pas d'explication officielle à pourquoi cela fonctionne, mais il est similaire à la façon dont vous pouvez utiliser margin: 0 auto pour le centrage horizontal. Flexbox éléments respect de la marge, et je crois que margin: auto essentiellement en position de l'élément avec autant d'espace entre le frère que possible. Voir: w3.org/TR/css-flexbox-1/#auto-margins
- si je ne me trompe pas, margin: auto sur un flex élément lui dit d'en créer autant d'espace que possible dans cette direction.
- La spécification dit Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
- Je vais essayer d'en savoir plus sur flexbox de sorte qu'il serait formidable de voir une référence qui décrit ce comportement. Surtout qu'il est également prévu et pas un caprice ou un effet secondaire.
- les marges sont une partie de la flexbox spec. Certainement pas un caprice ou un effet secondaire. Voir ma question et la réponse pour plus de détails: stackoverflow.com/a/33856609/3597276
- Cool, merci à tous.
- Je voudrais ajouter quelque chose à la réponse. Dans l'iPhone 5s, 8.3 cela ne fonctionne pas. Un correctif que j'ai trouvé dans un autre stackoverflow question, est-ce que l'ajout de flex-grow: 1; le dernier élément avant le dernier élément à la position à la fin, il fixe.
- Je sais que c'est un vieux post, mais je pense qu'il pourrait faire avec un exemple de la façon de garder les 3 blocs alignés dans le centre et le dernier, poussé à la fin, je l'ai fait en utilisant margin-top: auto sur le bloc du haut ainsi que le bas.
InformationsquelleAutor Josh Crozier
43

Ce flexbox principe fonctionne également horizontalement

Pendant les calculs de flexion des bases et des longueurs de flexible, auto marges
sont traités comme des 0.
Avant l'alignement via justifier le contenu
alignez-auto, tout résultat positif de l'espace libre est distribué à l'auto marges
cette dimension.

Réglage automatique de la marge de gauche pour le Dernier Élément va faire le travail.
```
.last-item {
  margin-left: auto;
}
```
Exemple De Code:

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

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

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

Cela peut être très utile pour le Bureau, les Pieds de page.

Comme Envato fait ici avec le logo de l'entreprise.

Codepen Extrait De
- Savent pas pourquoi cela fonctionne, mais il m'a aidé sur un projet.
- Yooooooooooooooo mate
InformationsquelleAutor David Ben Dahan

Vous devez vous connecter pour publier un commentaire.

Ce flexbox principe fonctionne également horizontalement