Comment centrer horizontalement plusieurs éléments dans un conteneur de mise en page CSS à l'aide de flexbox

Cet article présente principalement en détail la méthode d'utilisation de CSS pour centrer horizontalement plusieurs éléments dans un conteneur de mise en page flexbox. Comment utiliser flexbox pour centrer horizontalement plusieurs éléments dans un conteneur de mise en page ? Cet article vous donnera la réponse. Les amis intéressés peuvent se référer à

Si vous souhaitez réaliser un tel élément parent, tous les éléments enfants de l'élément parent sont centrés

Ajoutez simplement des styles à l'élément parent

Le code est le suivant :

{display: flex;flex-direction: column;align-items:center;}

Défini sur la disposition flexbox, la direction est la disposition verticale et la troisième phrase est au centre il.

Si vous souhaitez définir vous-même la distance entre les trois éléments enfants, définissez simplement margin-top ou margin-bottom

Si vous souhaitez qu'elle s'ajuste automatiquement, vous pouvez ajouter des styles supplémentaires ; au style de l'élément parent. Le code ci-dessus

est le suivant :

{justify-content：space-around;}

De cette façon, l'espace restant sera automatiquement alloué autour de chaque élément :)

Au début, je pensais qu'il n'était pas nécessaire d'utiliser sass, mais maintenant je trouve beaucoup de CSS. Le code est toujours hautement réutilisable

Pour ce cas, j'ai même enregistré un petit mixin pour passer les paramètres. Il s'ajuste automatiquement en fonction. par défaut. Vous pouvez également passer le paramètre false pour ne pas ajuster automatiquement

@mixin multi-elements-center($auto:true){   
display:flex;   
flex-direction:column;   
align-items:center;   
@if $auto{justify-content:space-around;}   
}

Travaillons dur ensemble pour améliorer notre niveau technique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!