Ces deux façons de déplacer un bouton à droite de son parent me semblent tout à fait équivalentes. Y a-t-il une raison de choisir l'un plutôt que l'autre? Y a-t-il des circonstances dans lesquelles flex travaille pour aligner le contenu à droite là où text-align pourrait ne pas suffire?
<div class="parent"><button>Awesome button!</button></div>
.parent {
display: flex;
justify-content: flex-end;
}
<div class="parent"><button>Awesome button!</button></div>
.parent {
text-align: right;
}
Je suis curieux car j'ai remarqué que Bootstrap est passé de text-align: right à flex entre les versions 3 et 4 pour aligner les boutons dans un modal section pied de page.
Pour illustrer davantage:
3 Réponses :
Le système flex-box offre des fonctionnalités plus puissantes lorsqu'il s'agit d'aligner votre contenu. Si vous avez trois boutons et que vous voulez qu'ils soient placés à égale distance les uns des autres, ou à égale distance les uns des autres et de la limite du conteneur, vous pouvez donner un espace entre ou espace-uniformément valeur de la propriété justify-content au conteneur. Vous ne pouvez pas faire cela avec text-align ou float.
Oui, la raison est le centrage vertical. Le align-items: center est la clé ici, qui permet aux boutons d'être centrés verticalement dans le pied de page modal. C'est difficile à faire sans les flex-boxes - vous auriez besoin de recourir à des "hacks" comme utiliser position: absolue , ou ajouter des quantités précalculées de padding des deux côtés, etc. Les flexes (et les grilles) permettent aux développeurs de définir des mises en page plus succinctement.
Pour répondre à votre question - ils n'ont pas opté pour justify-content: flex-end au lieu de text-align: right - à la place, ils ont opté pour flex au lieu de block comme modèle de boîte d'affichage (pour le centrage vertical), et l'utilisation de justify-content découle naturellement de cette décision.
Oui, il y a une grande différence. Flexbox concerne les boîtes et les éléments de niveau bloc, car text-align concerne le texte et l'élément de niveau en ligne.
Lorsque vous avez un élément, nous ne remarquerons pas la différence, mais lorsqu'il s'agit d'éléments multiples, nous pouvons voir une différence claire.
Voici un exemple de base où nous avons du texte et un bouton dans un conteneur:
<div class="parent-flex">some text here some text here some text here some text here some text here some text here some text <a href="">link</a> here some text here some text here some text here<button>Awesome button!</button></div> <div class="parent-normal">some text here some text here some text here some text here some text here some text here some text <a href="">link</a> here some text here some text here some text here<button>Awesome button!</button></div>
.parent-flex {
display: flex;
justify-content: flex-end;
margin-bottom:10px;
}
.parent-normal {
text-align:right;
}
Notez que dans le conteneur flex nous n'avons plus d'espace blanc entre le texte et le bouton car le texte deviendra un élément de bloc 1 et le bouton aussi ce qui n'est pas le cas dans le deuxième exemple où les deux sont des éléments en ligne. Jusqu'à présent, ce n'est pas grave car nous pouvons rectifier cela avec une marge.
Mettons plus de texte et voyons à nouveau la différence:
<div class="parent-flex">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here<button>Awesome button!</button></div> <div class="parent-normal">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here<button>Awesome button!</button></div>
.parent-flex {
display: flex;
justify-content: flex-end;
margin-bottom:10px;
}
.parent-normal {
text-align:right;
}
Nous avons maintenant une nette différence et nous pouvons voir que le conteneur flex considère tout le texte comme un élément de bloc et le bouton ne suivra pas le texte comme dans le second conteneur. Dans certains cas, cela peut être un résultat attendu, mais pas dans tous les cas.
Ajoutons un lien dans notre texte:
<div class="parent-flex">some text here <button>Awesome button!</button></div> <div class="parent-normal">some text here <button>Awesome button!</button></div>
.parent-flex {
display: flex;
justify-content: flex-end;
margin-bottom:10px;
}
.parent-normal {
text-align:right;
}
Le conteneur flexbox empire! car le lien est également bloqué 1 et nous avons maintenant 4 éléments de bloc. Le texte avant le lien, le lien, le texte après et le bouton. Nous pouvons clairement voir que ce comportement n'est pas du tout voulu.
Fondamentalement, flexbox est utile lorsqu'il s'agit d'aligner un élément que nous pouvons considérer comme un élément de bloc ou un conteneur ou des boîtes, etc. mais pas quand il vient au conteneur de texte. text-align est plus utile pour aligner le texte à l'intérieur de l'élément bloc / boîte / conteneur précédent.
En d'autres termes, text-align doit être utilisé au niveau du texte pour aligner le texte, les images, etc. et flexbox doit être considéré à un niveau supérieur pour aligner l'élément de bloc et créer des mises en page.
Dans votre cas, il n'y a pas de grande différence puisque nous pouvons considérer bouton sous forme de boîtes ou d'élément en ligne. la seule différence sera l'espace blanc entre le bouton auquel vous serez confronté si vous le considérez comme un élément en ligne lorsque vous utilisez text-align .
1 En gros, les éléments flex d'un conteneur flex sont des boîtes représentant son contenu en flux.
Chaque enfant dans le flux d'un conteneur flexible devient un élément flexible , et chaque séquence contiguë d'exécutions de texte enfant est enveloppée dans un élément flexible de conteneur de bloc anonyme . Cependant, si la séquence entière de texte enfant ne contient que des espaces blancs (c'est-à-dire des caractères qui peuvent être affectés par la propriété white-space), elle n'est pas rendue à la place
La valeur d'affichage d'un élément flexible est bloquée
Réponse géniale! Merci d'avoir pris le temps de poster ceci même si ma question est maintenant -2! :)
@bernie oui, c'est un peu étrange d'obtenir -2 pour une telle question ... le problème est que les gens pensent que les deux sont identiques, donc ils considèrent probablement cela comme une opinion puisque vous êtes libre de choisir ce que vous voulez, là où ce n'est pas vrai
C'est une question véritablement stimulante, aucune idée de la raison pour laquelle les gens ont choisi de voter contre: /
Belle explication!
Wow ... vraiment -2 et 2 votes serrés pour "basé sur l'opinion"? Ce n’est pas du tout une question d’opinion. Je veux connaître les différences entre les 2 approches et auquel cas chacune est meilleure!
supprimons le mot "préférer" au cas où les gens ne liraient que le titre