フレックスボックス
フレックスボックスで中央に寄せてみます。その1の方でも記事の最初の方に同じ内容が書いておりますが、残した方が分かりやすいと思いますのでメモとして記載しております。
display：初期値は要素によって異なります。block↠（div,p,h1,h2）など。inline↠（a,span,img）など。
display: flex;
display: flex;を指定するとその要素はフレックスコンテナーとなり、その子要素はフレックスアイテムになります。フレックスコンテナーに下記のプロパティを指定することができます。
flex-direction：初期値はrow（主軸の水平方向）です。column（主軸の縦方向）。
justify-content：初期値はflex-start（先頭に寄せる）です。center（中央に寄せる）。flex-directionの方向の沿って。
align-items：初期値はstretch（交差軸に伸縮）です。center（交差軸の中央）。flex-directionの交差軸に沿って。
フレックスボックスを使用すると上記のプロパティが使用できます。他にもたくさんあります。
複数アイテムを中央に配置する
CSS、文字や要素の高さを中央に配置する。左のリンクの記事では、1個のアイテムを中央に配置することを想定して、解説する記事を書きました。この記事では、要素が複数存在する場合を想定しています。
See the Pen 複数、CSS、文字の高さを中央に配置する1 by sho-ta (@sho-ta) on CodePen.
主軸の方向を変更しました。flex-direction: column;水平、横方向ではなく、縦方向に変更しました。通常span要素はインライン要素なので、横並びですが、flex-direction: column;を指定することにより、縦並びに出来ます。
flex-directionがrow（水平方向）からcolumn（縦方向）になった場合、align-itemsは交差軸に沿って揃えられます。
flex-direction↠row（水平方向）の場合、align-itemsは（縦方向に沿って）
flex-direction↠column（縦方向）の場合、align-itemsは（横方向に沿って）
See the Pen 複数、CSS、文字の高さを中央に配置する2 by sho-ta (@sho-ta) on CodePen.
今度は縦方向に中央に配置したいので、justify-contentで中央に指定してあげます。
See the Pen 複数、CSS、文字の高さを中央に配置する3 by sho-ta (@sho-ta) on CodePen.
display: flex;↠フレックスボックスを指定
flex-direction: column;↠主軸の向きを縦方向に
justify-content: center;↠主軸に沿って中央に
align-items: center;交差軸方向に沿って中央に
フレックスボックスのメリット
フレックスボックスを使うことで、以下のような利点があります：
- 柔軟性のあるレイアウト：親要素のサイズに応じて、子要素の配置が自動で調整されます。
- 簡単な中央配置：複雑なマージンやポジション指定を使わずに、直感的に中央配置が可能です。
- レスポンシブ対応：ウィンドウサイズやデバイスに応じてレイアウトを動的に変更できます。
まとめ
フレックスボックスを使用することで、複数の要素を簡単に中央に配置したり、等間隔で配置したりすることが可能です。この記事では、基本的なプロパティと複数アイテムの中央配置方法を解説しました。さらに、応用例として等間隔配置や伸縮配置の方法も紹介しました。
フレックスボックスは、多くのプロパティが用意されており、さまざまなレイアウトを実現することができます。今回の内容をベースに、さらに応用的な使い方を学ぶことで、より高度なレイアウトを作成できるようになるでしょう。
コメント