La align-itemspropriété de flex-box aligne les éléments à l'intérieur d'un conteneur flexible le long de l'axe transversal, tout comme le justify-contentfait le long de l'axe principal. (Pour la valeur par défaut, flex-direction: rowl'axe transversal correspond à la verticale et l'axe principal correspond à l'horizontale. Les flex-direction: columndeux sont interchangés respectivement).
Voici un exemple de l' align-items:centerapparence:
Mais align-contentc'est pour les boîtes flexibles multi-lignes. Cela n'a aucun effet lorsque les éléments sont sur une seule ligne. Il aligne toute la structure en fonction de sa valeur. Voici un exemple pour align-content: space-around;:
Et voici comment align-content: space-around;avec les align-items:centerlooks:
Notez que la 3ème case et toutes les autres cases de la première ligne deviennent verticalement centrées sur cette ligne.
Notez que les align-*propriétés peuvent également déplacer les éléments flexibles horizontalement. Cela dépend du flex-direction. stackoverflow.com/q/32551291/3597276
Michael Benjamin
1
C'est facilement la meilleure explication. Tout le monde échoue lamentablement.
ortonomie
> "Mais align-content est pour les boîtes flexibles multi-lignes. Il n'a aucun effet lorsque les éléments sont sur une seule ligne" - cela semble être faux ou ne pas être respecté dans le dernier Firefox (mai 2020). Au lieu de cela, s'il existe une seule ligne flexible (tout le contenu tient dans une longueur inférieure à la longueur de l'axe principal) qui est inférieure à la pleine hauteur (la taille de l'axe transversal est inférieure à la pleine disponible), alors align-content si défini effacera align- articles. Cela a du sens: cela s'applique à TOUTES les lignes qu'il trouve?
Cela vous prendra 10-20 minutes et au niveau 21, vous trouverez la réponse à votre question. Il a mentionné:
align-content détermine l'espacement entre les lignes, tandis que align-items
détermine comment les éléments dans leur ensemble sont alignés dans le conteneur. Lorsqu'il n'y a qu'une seule ligne, align-content n'a aucun effet
En effet, j'ai trouvé l'exemple froggy vraiment utile. J'en ai beaucoup appris.
Spikatrix
63
Tout d'abord, align-itemsconcerne les éléments d'une seule ligne. Ainsi, pour une seule ligne d'éléments sur l'axe principal , align-itemsalignera ces éléments les uns par rapport aux autres et cela commencera par une nouvelle perspective de la ligne suivante.
Maintenant, align-contentn'interfère pas avec les éléments d'une ligne mais avec les lignes elles-mêmes . Par conséquent, align-contentessaiera d'aligner les lignes les unes par rapport aux autres et de fléchir le conteneur.
J'ai eu la même confusion. Après quelques bricolages basés sur bon nombre des réponses ci-dessus, je peux enfin voir les différences. À mon humble avis, la distinction est mieux démontrée avec un conteneur flexible qui remplit les deux conditions suivantes:
Le conteneur flexible lui-même a une contrainte de hauteur (par exemple, min-height: 60rem) et peut donc devenir trop grand pour son contenu
Les articles pour enfants enfermés dans le conteneur ont des hauteurs inégales
La condition 1 m'aide à comprendre ce que contentsignifie par rapport à son conteneur parent. Lorsque le contenu affleure le conteneur, nous ne pourrons pas voir les effets de positionnement en provenance align-content. Ce n'est que lorsque nous avons un espace supplémentaire le long de l'axe transversal que nous commençons à voir son effet: il aligne le contenu par rapport aux limites du conteneur parent.
La condition 2 m'aide à visualiser les effets de align-items: elle aligne les éléments les uns par rapport aux autres.
Voici un exemple de code. Les matières premières proviennent du didacticiel CSS Grid de Wes Bos (21. Flexbox vs. CSS Grid)
Exemple HTML:
<divclass="flex-container"><divclass="item">Short</div><divclass="item">Longerrrrrrrrrrrrrr</div><divclass="item">💩</div><divclass="item"id="tall">This is Many Words</div><divclass="item">Lorem, ipsum.</div><divclass="item">10</div><divclass="item">Snickers</div><divclass="item">Wes Is Cool</div><divclass="item">Short</div></div>
Exemple CSS:
.flex-container {display: flex;/*dictates a min-height*/min-height:60rem;flex-flow: row wrap;border:5px solid white;justify-content: center;align-items: center;align-content: flex-start;}#tall {/*intentionally made tall*/min-height:30rem;}.item {margin:10px;max-height:10rem;}
Exemple 1 : rétrécissons la fenêtre d'affichage de sorte que le contenu affleure le conteneur. C'est quand align-content: flex-start;n'a aucun effet puisque tout le bloc de contenu est bien ajusté à l'intérieur du conteneur (pas de place supplémentaire pour le repositionnement!)
Notez également la 2e rangée - voyez comment les éléments sont alignés au centre entre eux.
Exemple 2 : à mesure que nous élargissons la fenêtre, nous n'avons plus suffisamment de contenu pour remplir le conteneur entier. Maintenant, nous commençons à voir les effets de align-content: flex-start;--it aligne le contenu par rapport au bord supérieur du conteneur.
Ces exemples sont basés sur flexbox, mais les mêmes principes s'appliquent à la grille CSS. J'espère que cela t'aides :)
align-contentpeut changer une hauteur de ligne pour la direction des rangées ou de la largeur de la colonne lorsque la valeur de ce tronçon est, ou ajouter de l' espace vide entre ou autour des lignes de space-between, space-around, flex-start, flex-end values.
align-itemspeut modifier la hauteur ou la position des éléments à l'intérieur de la zone de la ligne. Lorsque les éléments ne sont pas encapsulés, ils n'ont qu'une seule ligne dont la zone est toujours étendue à la zone de la boîte flexible (même si les éléments débordent) et align-contentn'a aucun effet sur une seule ligne. Cela n'a donc aucun effet sur les éléments qui ne sont pas enveloppés et ne align-itemspeut changer la position des éléments ou les étirer que lorsqu'ils sont tous sur une seule ligne.
Cependant, s'ils sont encapsulés, vous avez plusieurs lignes et éléments à l'intérieur de chaque ligne. Et si tous les éléments de chaque ligne ont la même hauteur (pour la direction de la ligne), la hauteur de cette ligne sera égale à la hauteur de ces éléments et vous ne verrez aucun effet en modifiant la align-itemsvaleur.
Donc, si vous souhaitez affecter les éléments align-itemslorsque vos éléments sont enveloppés et ont la même hauteur (pour la direction de la ligne), vous devez d'abord utiliser la align-contentvaleur d'étirement afin d'élargir la zone des lignes.
align-contentcontrôle le positionnement transversal (c'est-à-dire la direction verticale si l' flex-directionest row) et horizontal si l' flex-directionest column) de plusieurs lignes les unes par rapport aux autres.
(Pensez aux lignes d'un paragraphe étalé verticalement, empilé vers le haut, empilé vers le bas. C'est sous un flex-directionparadigme de ligne).
align-items
align-items contrôle l'axe transversal d'une ligne individuelle d'éléments flexibles.
(Imaginez comment une ligne individuelle d'un paragraphe est alignée, si elle contient du texte normal et du texte plus grand comme des équations mathématiques. Dans ce cas, sera-t-il le bas, le haut ou le centre de chaque type de texte dans une ligne qui être aligné?)
La principale différence est lorsque la hauteur des éléments n'est pas la même! Ensuite, vous pouvez voir comment dans la ligne, ils sont tous centrés \ fin \ début
lorsque vous utilisez align-item ou justification-item, vous ajustez "le contenu à l'intérieur d'un élément de la grille le long de l'axe des colonnes ou de la ligne respectivement.
Mais: si vous utilisez align-content ou justification-content, vous définissez la position d'une grille le long de l'axe des colonnes ou de l'axe des lignes. cela se produit lorsque vous avez une grille dans un conteneur plus grand et que la largeur ou la hauteur sont inflexibles (en utilisant px).
Réponses:
La
align-itemspropriété de flex-box aligne les éléments à l'intérieur d'un conteneur flexible le long de l'axe transversal, tout comme lejustify-contentfait le long de l'axe principal. (Pour la valeur par défaut,flex-direction: rowl'axe transversal correspond à la verticale et l'axe principal correspond à l'horizontale. Lesflex-direction: columndeux sont interchangés respectivement).Voici un exemple de l'
align-items:centerapparence:Mais
align-contentc'est pour les boîtes flexibles multi-lignes. Cela n'a aucun effet lorsque les éléments sont sur une seule ligne. Il aligne toute la structure en fonction de sa valeur. Voici un exemple pouralign-content: space-around;:Et voici comment
align-content: space-around;avec lesalign-items:centerlooks:Notez que la 3ème case et toutes les autres cases de la première ligne deviennent verticalement centrées sur cette ligne.
Voici quelques liens codepen pour jouer avec:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
Voici un stylo super cool qui montre et vous permet de jouer avec presque tout dans la flexbox.
la source
align-*propriétés peuvent également déplacer les éléments flexibles horizontalement. Cela dépend duflex-direction. stackoverflow.com/q/32551291/3597276Je trouve l'exemple http://flexboxfroggy.com/ très utile.
Cela vous prendra 10-20 minutes et au niveau 21, vous trouverez la réponse à votre question. Il a mentionné:
la source
Tout d'abord,
align-itemsconcerne les éléments d'une seule ligne. Ainsi, pour une seule ligne d'éléments sur l'axe principal ,align-itemsalignera ces éléments les uns par rapport aux autres et cela commencera par une nouvelle perspective de la ligne suivante.Maintenant,
align-contentn'interfère pas avec les éléments d'une ligne mais avec les lignes elles-mêmes . Par conséquent,align-contentessaiera d'aligner les lignes les unes par rapport aux autres et de fléchir le conteneur.Vérifiez ce violon: https://jsfiddle.net/htym5zkn/8/
la source
J'ai eu la même confusion. Après quelques bricolages basés sur bon nombre des réponses ci-dessus, je peux enfin voir les différences. À mon humble avis, la distinction est mieux démontrée avec un conteneur flexible qui remplit les deux conditions suivantes:
min-height: 60rem) et peut donc devenir trop grand pour son contenuLa condition 1 m'aide à comprendre ce que
contentsignifie par rapport à son conteneur parent. Lorsque le contenu affleure le conteneur, nous ne pourrons pas voir les effets de positionnement en provenancealign-content. Ce n'est que lorsque nous avons un espace supplémentaire le long de l'axe transversal que nous commençons à voir son effet: il aligne le contenu par rapport aux limites du conteneur parent.La condition 2 m'aide à visualiser les effets de
align-items: elle aligne les éléments les uns par rapport aux autres.Voici un exemple de code. Les matières premières proviennent du didacticiel CSS Grid de Wes Bos (21. Flexbox vs. CSS Grid)
Exemple 1 : rétrécissons la fenêtre d'affichage de sorte que le contenu affleure le conteneur. C'est quand
align-content: flex-start;n'a aucun effet puisque tout le bloc de contenu est bien ajusté à l'intérieur du conteneur (pas de place supplémentaire pour le repositionnement!)Notez également la 2e rangée - voyez comment les éléments sont alignés au centre entre eux.
Exemple 2 : à mesure que nous élargissons la fenêtre, nous n'avons plus suffisamment de contenu pour remplir le conteneur entier. Maintenant, nous commençons à voir les effets de
align-content: flex-start;--it aligne le contenu par rapport au bord supérieur du conteneur.Ces exemples sont basés sur flexbox, mais les mêmes principes s'appliquent à la grille CSS. J'espère que cela t'aides :)
la source
Eh bien, je les ai examinés sur mon navigateur.
align-contentpeut changer une hauteur de ligne pour la direction des rangées ou de la largeur de la colonne lorsque la valeur de ce tronçon est, ou ajouter de l' espace vide entre ou autour des lignes despace-between,space-around,flex-start,flex-end values.align-itemspeut modifier la hauteur ou la position des éléments à l'intérieur de la zone de la ligne. Lorsque les éléments ne sont pas encapsulés, ils n'ont qu'une seule ligne dont la zone est toujours étendue à la zone de la boîte flexible (même si les éléments débordent) etalign-contentn'a aucun effet sur une seule ligne. Cela n'a donc aucun effet sur les éléments qui ne sont pas enveloppés et nealign-itemspeut changer la position des éléments ou les étirer que lorsqu'ils sont tous sur une seule ligne.Cependant, s'ils sont encapsulés, vous avez plusieurs lignes et éléments à l'intérieur de chaque ligne. Et si tous les éléments de chaque ligne ont la même hauteur (pour la direction de la ligne), la hauteur de cette ligne sera égale à la hauteur de ces éléments et vous ne verrez aucun effet en modifiant la
align-itemsvaleur.Donc, si vous souhaitez affecter les éléments
align-itemslorsque vos éléments sont enveloppés et ont la même hauteur (pour la direction de la ligne), vous devez d'abord utiliser laalign-contentvaleur d'étirement afin d'élargir la zone des lignes.la source
align-content
align-contentcontrôle le positionnement transversal (c'est-à-dire la direction verticale si l'flex-directionestrow) et horizontal si l'flex-directionestcolumn) de plusieurs lignes les unes par rapport aux autres.(Pensez aux lignes d'un paragraphe étalé verticalement, empilé vers le haut, empilé vers le bas. C'est sous un
flex-directionparadigme de ligne).align-items
align-itemscontrôle l'axe transversal d'une ligne individuelle d'éléments flexibles.(Imaginez comment une ligne individuelle d'un paragraphe est alignée, si elle contient du texte normal et du texte plus grand comme des équations mathématiques. Dans ce cas, sera-t-il le bas, le haut ou le centre de chaque type de texte dans une ligne qui être aligné?)
la source
Ce que j'ai appris de chaque réponse et en visitant le blog est
flex-direction: rowflex-direction: columnalign-content est pour la ligne, cela fonctionne si le conteneur a (plus d'une ligne) Propriétés de align-content
align-items correspond aux éléments de la ligne Propriétés de align-items
Pour plus de référence, visitez flex
la source
La principale différence est lorsque la hauteur des éléments n'est pas la même! Ensuite, vous pouvez voir comment dans la ligne, ils sont tous centrés \ fin \ début
la source
selon ce que j'ai compris d' ici :
lorsque vous utilisez align-item ou justification-item, vous ajustez "le contenu à l'intérieur d'un élément de la grille le long de l'axe des colonnes ou de la ligne respectivement.
Mais: si vous utilisez align-content ou justification-content, vous définissez la position d'une grille le long de l'axe des colonnes ou de l'axe des lignes. cela se produit lorsque vous avez une grille dans un conteneur plus grand et que la largeur ou la hauteur sont inflexibles (en utilisant px).
la source