web-dev-qa-db-fra.com

Comment justifier un seul élément flexbox (remplacement du contenu justifié)

Vous pouvez remplacer align-items avec align-self pour un élément flexible. Je cherche un moyen de remplacer justify-content pour un élément flexible.

Si vous aviez un conteneur flexbox avec justify-content:flex-end, mais que vous souhaitiez que le premier élément soit justify-content: flex-start, comment pourrait-on le faire?

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

cssflexbox
221
Mahks

Il ne semble pas exister de justify-self, mais vous pouvez obtenir un résultat similaire avec les paramètres appropriés margin à auto¹. Par exemple. pour flex-direction: row (par défaut), vous devez définir margin-right: auto pour aligner l'enfant à 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>

¹ Ce comportement est défini par la Flexbox spec .

436
Pavlo

Autant que je sache, il n’existe pas de propriété correspondant à cela dans les spécifications, mais voici une astuce que j’utilise: définir l’élément conteneur (celui contenant display:flex) sur justify-content:space-around puis ajouter un élément supplémentaire entre le premier. et le deuxième élément et réglez-le sur flex-grow:10 (ou une autre valeur qui fonctionne avec votre configuration)

Edit: si les éléments sont bien alignés, il est également judicieux d’ajouter flex-shrink: 10; à l’élément supplémentaire afin que la disposition soit correctement adaptée aux appareils plus petits.

17
eeglbalazs

Si vous n'êtes pas obligé de 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 utiliser le conteneur des deux en utilisant un espace.

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

Ou bien, si vous faites la même chose avec flex-start et flex-end inversé, il vous suffit d'échanger l'ordre du conteneur default-flex et de l'enfant isolé.

11
borkxs

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

En ce qui concerne la solution de marge: J'ai une grille Flexbox avec des espaces vides. Il n'y a pas (encore?) De propriété flex-gap avec Flexbox. Donc, pour les gouttières, j'utilise des rembourrages et des marges, donc margin: auto doit écraser les autres marges ...

3
Frank Lämmer

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

Cela fera que le pseudo flex-start remplira le conteneur, il suffit de le formater en text-align:left ou peu importe.

1
Mahks

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 être justify-content: space-between. Mais quand il n'y a qu'un seul bouton, il sera maintenant centré au lieu de gauche.

0
Micros