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との違いと使い分け」など、さらに実践的な内容も紹介していきます！