Dans CSS Flexbox, pourquoi n'y a-t-il pas de propriétés" justify-items "et" justify-self"?

Méthodes d'Alignement Flex Éléments le long de l'Axe Principal

comme indiqué dans la question:

pour aligner les éléments flex le long de l'axe principal, il y a une propriété: justify-content

pour aligner les éléments flex le long de l'axe transversal il y a trois propriétés: align-content , align-items et align-self .

la question se pose alors:

pourquoi n'y a-t-il pas de propriétés justify-items et justify-self ?

une réponse peut être: parce qu'ils ne sont pas nécessaires.

la spécification flexbox fournit deux méthodes pour aligner les éléments flex le long de l'axe principal:

1. Le justify-content mot-clé de la propriété, et
2. auto marges

---

justifier-contenu

la propriété justify-content aligne les articles flex le long de l'axe principal du conteneur flex.

elle s'applique au conteneur souple mais n'affecte que les objets flex.

il y a cinq options d'alignement:

• flex-start ~ les articles Flex sont emballés vers le début de la ligne.

  

• flex-end ~ les articles Flex sont emballés vers la fin de la ligne.

  

• center ~ les articles Flex sont emballés vers le centre de la ligne.

  

• space-between ~ les articles Flex sont également espacés, le premier article étant aligné à une extrémité du conteneur et le dernier élément aligné sur le bord opposé. Les bords utilisés par le premier et le dernier items dépendent de flex-direction et mode d'écriture ( ltr ou rtl ).

  

• space-around ~ identique à space-between sauf avec demi-taille espaces aux deux extrémités.

  

---

Auto Margins

avec auto marges , les articles flex peuvent être centrés, espacés ou emballés dans des sous-groupes.

contrairement à justify-content , qui s'applique au conteneur souple, auto marges vont sur les articles flexibles.

Ils travaillent en consommant tout l'espace libre dans la direction indiquée.

---

Alignez le groupe d'articles flexibles vers la droite, mais le premier article vers la gauche

scénario de la question:

• création d'un groupe de flex d'aligner les éléments à droite ( justify-content: flex-end ) mais avoir le premier article aligner à gauche ( justify-self: flex-start )

  envisager une section d'en-tête avec un groupe d'articles nav et un logo. Avec justify-self le logo peut être aligné à gauche pendant que les articles de nav restent à l'extrême droite, et le tout s'ajuste en douceur ("flex") différentes tailles d'écran.

---

autres scénarios utiles:

---

flex élément dans la coin

scénario de la question:

• placer un article flexible dans un coin .box { align-self: flex-end; justify-self: flex-end; }

---

Centre flex élément verticalement et horizontalement

margin: auto est une alternative à justify-content: center et align-items: center .

au lieu de ce code sur le conteneur souple:

.container {
    justify-content: center;
    align-items: center;
}

vous pouvez l'utiliser sur l'article flex:

.box56 {
    margin: auto;
}

cette variante est utile lorsque centrage d'un article flexible qui déborde le conteneur .

---

Centre flex élément, et un centre de deuxième flex point entre le premier et le bord

un conteneur flexible aligne des articles flex en distribuant de l'espace libre.

par conséquent, pour créer equal balance , de sorte qu'un élément intermédiaire peut être centré dans le conteneur avec un seul élément à côté, un contrepoids doit être introduit.

dans les exemples ci-dessous, les éléments invisibles de troisième flexibilité (cases 61 et 68) sont: introduit pour équilibrer les postes "réels" (encadrés 63 et 66).

bien sûr, cette méthode n'est rien de grand en termes de sémantique.

alternativement, vous pouvez utiliser un pseudo-élément au lieu d'un élément DOM réel. Ou vous pouvez utiliser le positionnement absolu. Les trois méthodes sont abordé ici: Centre et en bas-align flex articles

NOTE: les exemples ci – dessus ne fonctionneront – en termes de centrage vrai-que lorsque les éléments extérieurs sont égaux hauteur/largeur. Lorsque flex éléments sont de longueurs différentes, voir l'exemple suivant.

---

Centre flex élément lorsque des éléments adjacents varient en taille

scénario de la question:

• articles à bord des conteneurs ( justify-self: flex-start et justify-self: flex-end ).

  noter que les valeurs space-around et space-between sur la propriété justify-content ne conserveront pas l'élément central par rapport au conteneur Si l'élément adjacent les articles ont différentes largeurs ( voir Démo ).

comme noté, à moins que tous les éléments fléchés soient de largeur ou de hauteur égales (selon flex-direction ), l'élément central ne peut pas être vraiment centré. Ce problème justifie fortement une propriété justify-self (conçue pour gérer la tâche, bien sûr).

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

Voici deux méthodes pour résoudre ce problème:

Solution N ° 1: Positionnement Absolu

la spécification flexbox permet positionnement absolu des éléments flex . Cela permet à l'élément du milieu d'être parfaitement centré quelle que soit la taille de ses frères et sœurs.

il suffit de garder à l'esprit que, comme tout absolument positionné les éléments, les éléments sont supprimés de la flux de documents . Cela signifie qu'ils ne prennent pas place dans le conteneur et peuvent chevaucher leurs frères et sœurs.

dans les exemples ci-dessous, l'élément central est centré avec un positionnement absolu et les éléments extérieurs restent en flux. Mais la même disposition peut être réalisée à l'envers: centrer l'élément central avec justify-content: center et positionner absolument les éléments extérieurs.

Solution #2: conteneurs souples emboîtés (pas de positionnement absolu)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

Voici comment ça marche:

• Le haut niveau de la div ( .container ) est un conteneur flex.
• chaque div enfant ( .box ) est maintenant un article flexible.
• Chaque .box est donné flex: 1 pour la distribution de l'espace dans le conteneur de manière égale.
• maintenant les articles consomment tout l'espace dans la rangée et sont la largeur égale.
• faire en sorte que chaque article soit un contenant souple (emboîté) et ajouter justify-content: center .
• chaque élément span est un élément Flex centré.
• utilisez flex auto marges pour déplacer l'extérieur span S gauche et droite.

vous pouvez également renoncer à justify-content et utiliser auto marges exclusivement.

mais justify-content peut fonctionner ici parce que auto marges ont toujours la priorité. Du spec:

8.1. Alignement sur auto marges

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

---

justification-content: space-same (concept)

retour à justify-content pour une minute, voici une idée pour une option de plus.

• space-same ~ un hybride de space-between et space-around . Les articles Flex sont également espacés (comme space-between ), sauf qu'à la place des espaces de demi-taille aux deux extrémités (comme space-around ), il y a des espaces de pleine taille aux deux extrémités.

cette disposition peut être réalisée avec ::before et ::after des pseudo-éléments sur le conteneur flexible.

^{(crédit: @oriol pour le code, et @crl pour l'étiquette)}

mise à jour: les navigateurs ont commencé à mettre en œuvre space-evenly , qui accomplit ce qui précède. Voir ce message pour plus de détails: espace égal entre les éléments flex

---

terrain de jeux (comprend le code pour tous les exemples ci-dessus)