HPBUILD

HTMLとCSSでレイアウトを組むとき、「要素を横並びにしたい」「中央寄せにしたい」と思ったことはありませんか？ そんなときに便利なのが Flexbox（フレックスボックス） です。この記事では、初心者の方でもすぐに使えるように、Flexboxの基本とよく使うレイアウトパターンをやさしく紹介します。 Flexboxとは？ Flexboxは、親要素にdisplay: flex;を指定することで、子要素を柔軟に配置できるCSSの仕組みです。 コピー <div class="flex-container"> <div>子1</div> <div>子2</div> <div>子3</div> </div> コピー .flex-container { display: flex; } よく使うFlexboxの基本プロパティ プロパティ意味 display: flex;フレックスレイアウトにする justify-content横方向の配置（左寄せ・中央・右寄せ） align-items縦方向の揃え方 flex-direction並び方向（横 or 縦） gap子要素の間隔 基本パターン例 ① 横並び＆中央揃え コピー .flex-container { display: flex; justify-content: center; align-items: center; } コピー <div class="flex-container"> <div>BOX1</div> <div>BOX2</div> </div> ② 縦並びにしたい（カラム方向） コピー .flex-container { display: flex; flex-direction: column; justify-content: center; } ③ 間隔をあけて均等に並べたい コピー .flex-container { display: flex; justify-content: space-between; } ④ 子要素の幅を均等にしたい コピー .flex-container > div { flex: 1; } ⑤ 子要素を折り返す コピー .flex-container { display: flex; flex-wrap: wrap; } おわりに Flexboxは「パッと並べたい！」を簡単に叶えてくれる強力なツールです。初めての方は、今回紹介した基本パターンをベースに、少しずつ応用を試してみてください。 今後は「Flexbox × レスポンシブデザイン」「Gridとの違いと使い分け」など、さらに実践的な内容も紹介していきます！