Comment justifier un élément Flexbox unique (remplacer le contenu justifié)

283

Vous pouvez remplacer align-itemsavec align-selfpour un élément flexible. Je cherche un moyen de remplacer justify-contentun élément flexible.

Si vous aviez un conteneur flexbox avec justify-content:flex-end, mais que vous voulez que le premier élément soit justify-content: flex-start, comment cela pourrait-il être fait?

Il a été mieux répondu par cet article: https://stackoverflow.com/a/33856609/269396

css flexbox Mahks
la source
2
Utilisez des automarges. Voir l'encadré # 26 ici: stackoverflow.com/a/33856609/3597276
Michael Benjamin
Merci d'avoir créé un lien vers la réponse la plus utile!
Brady Dowling

Réponses:

550

Il ne semble pas y en avoir justify-self, mais vous pouvez obtenir un réglage de résultat similaire approprié marginà auto¹. Par exemple. pour flex-direction: row(par défaut), vous devez définir margin-right: autopour aligner l'enfant vers la gauche.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}
<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>
Développer l'extrait

¹ Ce comportement est défini par la spécification Flexbox .

Pavlo
la source
51
Cette technique est excellente et fonctionne également dans le sens vertical. Par exemple, vous voulez que le dernier élément à l'intérieur d'un conteneur à hauteur fixe se colle au fond. Vous pouvez utiliser `` `.container {flex-direction: column; justifier-contenu: flex-start} .last-item {margin-top: auto} `` `
Christian Schlensker
6
@krulik Ce comportement est défini par la spécification Flexbox, voir w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins
Pavlo
7
Après un peu plus d'investigation, justify-selfcela n'a peut-être rien à voir avec flexboxmais est plutôt utilisé css gridsmais je ne suis pas sûr. Je n'arrive pas à le faire fonctionner dans Chrome avec flexbox.
Jake Wilson
8
Que faire si je veux qu'un élément soit à gauche et l'autre au centre?
Fahmi
3
"Dans les mises en page flexbox, cette propriété est ignorée" - tiré des documents de Mozilla sur justifier soi-même
Finlay Percy
19

AFAIK il n'y a pas de propriété pour cela dans les spécifications, mais voici une astuce que j'ai utilisée: définissez l'élément conteneur (celui avec display:flex) sur justify-content:space-around Ensuite, ajoutez un élément supplémentaire entre le premier et le deuxième élément et définissez-le sur flex-grow:10(ou certains autre valeur qui fonctionne avec votre configuration)

Modifier: si les éléments sont étroitement alignés, c'est une bonne idée d'ajouter également flex-shrink: 10;à l'élément supplémentaire, de sorte que la mise en page sera correctement adaptée aux petits appareils.

eeglbalazs
la source
1
Cela fonctionne sans spécifier de largeur (au moins, cela a été le cas dans ma situation)
eeglbalazs
Essayezmin-width: 0
Le Dembinski
13

Si vous n'êtes pas réellement limité à conserver tous ces éléments en tant que nœuds frères, vous pouvez envelopper ceux qui vont ensemble dans une autre boîte flexible par défaut, et faire en sorte que le conteneur des deux utilise l'espace entre les deux.

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}
<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>
Développer l'extrait

Ou si vous faisiez la même chose avec flex-start et flex-end inversé, vous changez simplement l'ordre du conteneur flex-default et de l'enfant seul.

borkxs
la source
5

Il semble que les justify-selfnavigateurs arriveront bientôt . Il y a déjà un article à ce sujet sur MDN . Au moment d'écrire ces lignes, la prise en charge du navigateur est médiocre.

Concernant la solution de marge: j'ai une grille Flexbox avec des lacunes. Il n'y a pas flex-gap(encore?) De propriété avec Flexbox. Donc, pour les gouttières, j'utilise des rembourrages et des marges, il margin: autofaut donc écraser les autres marges ...

Frank Lämmer
la source
7
Malheureusement,In flexbox layouts, this property is ignored
Sphinxxx
1
@Sphinxxx Oui, mais le justify-self fait de travailler dans un display: gridrécipient. Il est récent comme Flexbox, donc permet un positionnement riche comme align-items, align-selfainsi que certaines fonctionnalités supplémentaires comme celle dont nous avons besoin ici justify-self. Ce que je recommande, c'est d'utiliser Flexbox chaque fois que cela est suffisant, mais s'il manque quelque chose, la grille a probablement ce que vous recherchez. (par exemple. alignement facile d'un enfant sur centre-x et centre-y, et un autre sur droite-x centre-y - flexbox a margin-left: autopour facile gauche + droite, mais pas centre + droite) Exemple: stackoverflow.com/a/57128453 / 2441655
Venryx
1

Pour les situations où la largeur des éléments que vous souhaitez flex-endconnaître est connue, vous pouvez définir leur flex sur "0 0 ## px" et définir l'élément que vous souhaitez flex-startavecflex:1

Cela entraînera le pseudo flex-startélément à remplir le conteneur, il suffit de le formater text-align:leftou quoi que ce soit.

Mahks
la source
0

J'ai résolu un cas similaire en définissant le style de l'élément intérieur sur margin: 0 auto.
Situation: Mon menu contient généralement trois boutons, auquel cas ils doivent l'être justify-content: space-between. Mais lorsqu'il n'y a qu'un seul bouton, il sera désormais aligné au centre plutôt qu'à gauche.

Micros
la source