フレックスボックスを使用して CSS レイアウト コンテナ内の複数の要素を水平方向に中央揃えにする方法

この記事では主に、CSSを使用してフレックスボックスレイアウトコンテナ内の複数の要素を水平方向に中央揃えにする方法を詳しく紹介します。 フレックスボックスを使用してレイアウトコンテナ内の複数の要素を水平方向に中央揃えにする方法は？この記事にその答えが記載されていますので、興味のある方は参考にしてください。すべての子要素が中央に配置されるようにしたい場合は、親要素にスタイルを追加するだけです:

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

フレックスボックスレイアウトに設定し、方向は縦配置、3文目は中央揃えとなります。

3 つの子要素間の距離を自分で設定したい場合は、 margin-top または margin-bottom を設定するだけです。

自動的に調整したい場合は、親要素のスタイルに

を追加できます。コードは次のとおりです:

{justify-content：space-around;}

このようにして、残りのスペースが各要素の周囲に自動的に割り当てられます:)

最初は sass を使用する必要はないと思っていましたが、今では多くの CSS コードが使用されていることがわかりました。再利用性が高いです

この場合、デフォルトでミックスインが自動的に調整されます

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

毎日少しずつ進歩していきましょう。一緒に技術レベルの向上を目指します。

以上がフレックスボックスを使用して CSS レイアウト コンテナ内の複数の要素を水平方向に中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。