So zentrieren Sie mehrere Elemente in einem CSS-Layout-Container mithilfe von Flexbox horizontal

In diesem Artikel wird hauptsächlich die Methode zur Verwendung von CSS zum horizontalen Zentrieren mehrerer Elemente in einem Flexbox-Layoutcontainer vorgestellt. Wie verwende ich Flexbox zum horizontalen Zentrieren mehrerer Elemente in einem Layoutcontainer? Dieser Artikel gibt Ihnen die Antwort. Interessierte Freunde können sich auf

beziehen. Wenn Sie ein solches übergeordnetes Element erreichen möchten, sind alle untergeordneten Elemente im übergeordneten Element zentriert

Fügen Sie einfach Stile zum übergeordneten Element hinzu

Der Code lautet wie folgt:

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

Auf Flexbox-Layout einstellen, die Richtung ist vertikale Anordnung und der dritte Satz ist zentriert Es.

Wenn Sie den Abstand zwischen den drei Unterelementen selbst festlegen möchten, legen Sie einfach „Margin-Top“ oder „Margin-Bottom“ fest.

Wenn Sie möchten, dass er automatisch angepasst wird, können Sie zusätzliche Elemente hinzufügen Der Code oben

lautet wie folgt:

{justify-content：space-around;}

Auf diese Weise wird der verbleibende Platz automatisch um jedes Element herum zugewiesen :)

Zuerst hatte ich das Gefühl, dass es keinen Bedarf gibt, Sass zu verwenden, aber jetzt finde ich viel CSS. Der Code ist immer noch sehr wiederverwendbar.

Für diesen Fall habe ich sogar ein kleines Mixin zum Übergeben von Parametern gespeichert. Es passt sich an Standardmäßig können Sie auch den Parameter „false“ übergeben, um die automatische Anpassung zu verhindern.

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

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie mehrere Elemente in einem CSS-Layout-Container mithilfe von Flexbox horizontal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!