CSS 演習 - コンテナー内の複数の要素の水平方向の中央揃え - フレックスボックス レイアウト application_html/css_WEB-ITnose

子要素がすべて中央に配置されるような親要素を実現したい場合は

親要素にスタイルを追加するだけです

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

フレックスボックス レイアウトに設定し、方向は垂直配置、 3番目の文はCenter itです。

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

自動的に調整したい場合は、

{justify-content：space-around;}

を追加します。各要素の周囲にスペースが自動的に割り当てられます:)

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

このためのパラメータを渡すための小さなミックスインも保存しましたcase 、デフォルトで自動的に調整されます。自動的に調整されない false パラメータを渡すこともできます

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

毎日少しずつ進歩していきましょう:)

フレックスボックスのコンテンツの詳細については、Ruan 先生のブログを参照してください。 http:// www.ruanyifeng.com/blog/ 2015/07/flex-grammar.html?utm_source=tuicool