Question Dans CSS Flexbox, pourquoi n’existe-t-il pas de propriétés «Justifier les éléments» et «Justifier-soi»?


Considérons l'axe principal et l'axe transversal d'un conteneur flexible:

enter image description here La source: W3C

Pour aligner les éléments flexibles le long de l'axe principal, il existe une propriété:

Pour aligner les éléments flexibles le long de l'axe transversal, il existe trois propriétés:

Dans l'image ci-dessus, l'axe principal est horizontal et l'axe transversal est vertical. Ce sont les directions par défaut d'un conteneur flexible.

Cependant, ces directions peuvent être facilement échangées avec flex-direction propriété.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(L'axe transversal est toujours perpendiculaire à l'axe principal.)

Mon propos en décrivant le travail des axes est qu'il ne semble y avoir rien de particulier dans les deux sens. Axe principal, axe transversal, ils sont tous deux égaux en termes d’importance et de flex-direction facilite le changement d'avant en arrière.

Alors pourquoi l'axe croisé obtient-il deux propriétés d'alignement supplémentaires?

Pourquoi align-content et align-items consolidé en une seule propriété pour l'axe principal?

Pourquoi l'axe principal n'obtient-il pas justify-self propriété?


Scénarios où ces propriétés seraient utiles:

  • placer un objet flexible dans le coin du conteneur flexible
    #box3 { align-self: flex-end; justify-self: flex-end; }

  • faire un groupe d'éléments flex align-right (justify-content: flex-end) mais le premier élément est aligné à gauche (justify-self: flex-start)

    Considérez une section d'en-tête avec un groupe d'éléments de navigation et un logo. Avec justify-self le logo peut être aligné à gauche alors que les éléments de navigation restent à l'extrême droite, et que le tout s'adapte en douceur ("fléchit") à différentes tailles d'écran.

  • dans une rangée de trois éléments flexibles, fixez l’élément central au centre du conteneur (justify-content: center) et aligner les éléments adjacents sur les bords du conteneur (justify-self: flex-start et justify-self: flex-end).

    Notez que les valeurs space-around et space-between sur justify-content la propriété ne conserve pas l'élément central centré par rapport au conteneur si les éléments adjacents ont des largeurs différentes.

#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>note that the middle box will only be truly centered if adjacent boxes are equal width</p>

Version jsFiddle


Au moment d'écrire ces lignes, il n'y a aucune mention de justify-self ou justify-items dans le spécification flexbox.

Cependant, dans le Module d'alignement de boîte CSS, qui est la proposition inachevée du W3C pour établir un ensemble commun de propriétés d'alignement pour une utilisation dans tous les modèles de boîte, il y a ceci:

enter image description here La source: W3C

Vous remarquerez que justify-self et justify-items sont considérés ... mais pas pour la flexbox.


Je terminerai en réitérant la question principale:

Pourquoi n'y a-t-il pas de propriétés "justifie-objets" et "justifie-soi"?


423
2017-09-13 15:30


origine


Réponses:


Méthodes d'alignement des éléments Flex le long de l'axe principal

Comme indiqué dans la question:

Pour aligner les éléments flexibles le long de l'axe principal, il existe une propriété: justify-content

Pour aligner les éléments flexibles le long de l'axe transversal, il existe trois propriétés: align-content, align-items et align-self.

La question demande alors:

Pourquoi n'y a-t-il pas justify-items et justify-self Propriétés?

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

le spécification flexbox fournit deux des méthodes pour aligner des éléments flexibles le long de l'axe principal:

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

justify-content

le justify-content La propriété aligne les éléments Flex le long de l'axe principal du conteneur Flex.

Il est appliqué au conteneur Flex mais n'affecte que les éléments flexibles.

Il y a cinq options d'alignement:

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

    enter image description here

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

    enter image description here

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

    enter image description here

  • space-between ~ Les éléments Flex sont espacés uniformément, le premier élément étant aligné sur un bord du conteneur et le dernier élément étant aligné sur le bord opposé. Les arêtes utilisées par le premier et le dernier élément dépendent de flex-direction et mode d'écriture (ltr ou rtl).

    enter image description here

  • space-around ~ Même que space-between sauf avec des espaces de demi-taille aux deux extrémités.

    enter image description here


Marges automatiques

Avec auto marges, les articles flexibles peuvent être centrés, espacés ou regroupés en sous-groupes.

contrairement à justify-content, qui est appliqué au conteneur flexible, auto les marges sont affectées aux articles flexibles.

Ils fonctionnent en consommant tout l'espace libre dans la direction spécifiée.


Aligner le groupe d'éléments flex vers la droite, mais le premier élément vers la gauche

Scénario de la question:

  • faire un groupe d'éléments flex align-right (justify-content: flex-end)   mais ayez le premier objet aligné à gauche (justify-self: flex-start)

    Considérez une section d'en-tête avec un groupe d'éléments de navigation et un logo. Avec    justify-self le logo pourrait être aligné à gauche pendant que les éléments de navigation restent   tout à droite, et le tout ajuste en douceur ("flexes") à   différentes tailles d'écran.

enter image description here

enter image description here


Autres scénarios utiles:

enter image description here

enter image description here

enter image description here


Placez un objet flexible dans le coin

Scénario de la question:

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

enter image description here


Centrez un élément flexible verticalement et horizontalement

enter image description here

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

Au lieu de ce code sur le conteneur flexible:

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

Vous pouvez l'utiliser sur l'élément flexible:

.box56 {
    margin: auto;
}

Cette alternative est utile quand centrer un élément flexible qui déborde du récipient.


Centrez un élément flexible et centrez un second élément flexible entre le premier et le bord

Un conteneur flexible aligne les éléments flexibles en distribuant de l'espace libre.

Par conséquent, afin de créer équilibre égal, afin qu'un élément central puisse être centré dans le conteneur avec un seul article à côté, un contrepoids doit être introduit.

Dans les exemples ci-dessous, des éléments invisibles du troisième flex (cases 61 et 68) sont introduits pour équilibrer les éléments «réels» (cases 63 et 66).

enter image description here

enter image description here

Bien sûr, cette méthode n'a rien de génial en terme de sémantique.

Vous pouvez également 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 couvertes ici: Centrer et aligner les éléments flexibles

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


Centrer un élément flexible lorsque la taille des objets adjacents varie

Scénario de la question:

  • dans une rangée de trois éléments flexibles, fixez l’élément central au centre du conteneur (justify-content: center) et aligner les adjacents   éléments aux bords du conteneur (justify-self: flex-start et    justify-self: flex-end).

    Notez que les valeurs space-around et space-between sur justify-content propriété ne gardera pas l’élément central centré par rapport au conteneur si les articles adjacents ont des largeurs différentes (voir la démo).

Comme indiqué, sauf si tous les éléments flexibles sont de largeur ou de hauteur égale (en fonction de flex-direction), l'élément central ne peut pas être vraiment centré. Ce problème est un argument de poids pour justify-self propriété (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 de positionnement absolu des articles flexibles. Cela permet à l'élément central d'être parfaitement centré indépendamment de la taille de ses frères et sœurs.

Gardez à l’esprit que, comme tous les éléments positionnés de manière absolue, les flux de documents. Cela signifie qu'ils ne prennent pas de 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 le positionnement absolu et les éléments externes restent en flux. Mais la même mise en page peut être réalisée en sens inverse: Centrez l'élément intermédiaire avec justify-content: center et positionnez absolument les éléments extérieurs.

enter image description here

Solution n ° 2: Conteneurs flexibles imbriqué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 cela fonctionne:

  • Le div de niveau supérieur (.container) est un conteneur flexible.
  • Chaque div enfant (.box) est maintenant un élément flexible.
  • Chaque .box l'article est donné flex: 1 afin de répartir l'espace du conteneur de manière égale.
  • Maintenant, les éléments consomment tout l'espace dans la ligne et ont la même largeur.
  • Faire de chaque article un conteneur flexible (imbriqué) et ajouter justify-content: center.
  • Maintenant chaque span élément est un élément flexible centré.
  • Utiliser flex auto les marges pour déplacer l'extérieur spans à gauche et à droite.

Vous pourriez aussi renoncer justify-content et utilise auto marges exclusivement.

Mais justify-content peut travailler ici parce que auto les marges ont toujours la priorité. De la spécification:

8.1. Aligner avec auto   marges

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


justify-content: espace-même (concept)

Revenir à justify-content pendant une minute, voici une idée pour une autre option.

  • space-same ~ Un hybride de space-between et space-around. Les articles flexibles sont régulièrement espacés (comme space-between), à la place des espaces de demi-taille aux deux extrémités (comme space-around), il y a des espaces pleins aux deux extrémités.

Cette mise en page peut être réalisée avec ::before et ::after pseudo-éléments sur le conteneur flexible.

enter image description here

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

METTRE À JOUR: Les navigateurs ont commencé à mettre en œuvre space-evenly, qui accomplit ce qui précède. Voir cet article pour plus de détails: Un espace égal entre les éléments flexibles


COUR DE RÉCRÉATION (comprend le code pour tous les exemples ci-dessus)


789
2017-11-22 15:37



Je ne connais pas de réponse mais j'aime contribuer à ce sujet pour ce que ça vaut. Ce serait génial s'ils pouvaient libérer justify-selfpour flexbox pour le rendre vraiment flexible.

À mon avis, quand il y a plusieurs éléments sur l'axe, le moyen le plus logique pour justify-self se comporter, c'est s'aligner sur ses voisins (ou arêtes) les plus proches, comme démontré ci-dessous.

J'espère sincèrement que le W3C surveille cela et le considérera au moins. =)

enter image description here

De cette façon, vous pouvez avoir un objet vraiment centré, quelle que soit la taille des cases gauche et droite. Quand l'une des boîtes atteint le point de la boîte centrale, elle le pousse simplement jusqu'à ce qu'il n'y ait plus d'espace à distribuer.

enter image description here

La facilité de faire des mises en page géniales est infinie, regardez cet exemple "complexe".

enter image description here


83
2017-09-15 10:18



Cela a été demandé sur la liste www-style, et Tab Atkins (éditeur de spécifications) fourni une réponse expliquant pourquoi. Je vais développer un peu ici.

Pour commencer, supposons d'abord que notre conteneur flexible est à une seule ligne (flex-wrap: nowrap). Dans ce cas, il y a clairement une différence d'alignement entre l'axe principal et l'axe transversal - il y a plusieurs éléments empilés dans l'axe principal, mais un seul élément est empilé dans l'axe transversal. Il est donc logique d’avoir un «align-self» personnalisable par élément dans l’axe transversal (puisque chaque élément est aligné séparément, alors qu’il n’a aucun sens dans l’axe principal). les articles sont alignés collectivement).

Pour les flexbox multi-lignes, la même logique s'applique à chaque "ligne flexible". Dans une ligne donnée, les éléments sont alignés individuellement dans l'axe transversal (puisqu'il n'y a qu'un seul élément par ligne, dans l'axe transversal), par rapport à l'axe principal.


Voici une autre façon de le formuler: alors, tout du *-self et *-content les propriétés sont sur la façon de distribuer de l'espace supplémentaire autour des choses. Mais la principale différence est que le *-self les versions sont pour les cas où il y a une seule chose dans cet axe, et le *-content les versions sont pour quand il y a potentiellement beaucoup de choses dans cet axe. Les scénarios à une ou plusieurs choses sont différents, ce qui fait qu’ils ont différents types d’options - par exemple, le space-around / space-between les valeurs ont un sens pour *-contentmais pas pour *-self.

SO: Dans l'axe principal des flexbox, il y a beaucoup de choses à répartir. Donc un *-content la propriété a du sens là-bas, mais pas un *-self propriété.

En revanche, dans l'axe transversal, nous avons à la fois un *-self et un *-content propriété. On détermine comment nous allons distribuer l'espace autour de la beaucoup lignes flexibles (align-content), tandis que l'autre (align-self) détermine comment distribuer l'espace autour individuel éléments flexibles dans l'axe transversal, dans une ligne flexible donnée.

(J'ignore *-items propriétés ici, car ils établissent simplement des défauts pour *-self.)


15
2017-09-14 16:20



Il y a justify-self, mais dans Chrome Canary, pas dans la version stable Chrome. Il y a même justify-items:

enter image description here

Mais autant que je peux dire que ces propriétés ne fonctionnent pas non plus. Donc, Google l'a probablement déjà enregistré pour les futures versions CSS. J'espère seulement qu'ils vont ajouter les propriétés bientôt.


0
2017-12-16 17:25



Il y a justify-items.

Je pense que c'est une nouvelle fonctionnalité. La compatibilité du navigateur manque quelque peu.


-2
2018-05-20 04:54