Flexとは？CSSの悩みをわかりやすく解決！

Flexbox（フレックスボックス）は、CSSのレイアウト手法のひとつで、display: flex; を指定することで簡単に柔軟なレイアウトを実現できます。

基本的な使い方

.container {
  display: flex;
  background-color: lightgray;
}

この場合、.container の子要素は横並びになり、柔軟にサイズ調整が行われます。

主なプロパティ

文字を入力するところとボタンを用意してデザインの変化を見ていきましょう。

flex-direction

アイテムの並び方向を指定します。
指定の仕方はrow（横並び）かcolumn（縦並び）です。

div{
  display: flex;
  flex-direction: column;
}

flex-wrap

折り返し方法を指定します。

指定の仕方はnowrap、wrap、wrap-reverseの3つがあります。

• nowrapは親要素をはみ出しても横に並びます。
• wrapは親要素からはみ出すボックスは折り返すようになります。
• wrap-reverseはwrapの逆順になります。

div{
  display: flex;
  flex-wrap: wrap;
}

justify-content

アイテムの配置を指定します。

指定の仕方はflex-start、flex-end、center、space-between、space-around、space-evenlyの6つあります。

• flex-startは子要素が先頭に寄ります。
• flex-endは子要素が末尾に寄ります。
• centerは子要素が中央に寄ります。
• space-betweenは両端に余白がない状態で均等に配置されます。
• space-aroundは両端の余白が子要素の間隔の半分の幅で均等に配置されます。
• space-evenlyは両端の余白と子要素同士の間隔が同じ幅で均等に配置されます。

少しわかりづらくなってしまいましたが、だいたいこんなイメージです。

align-items

アイテムの高さ方向の揃え方を指定します。

指定の仕方はstretch、flex-start、flex-end、centerの4つです。

• stretchは子要素が親要素の高さに引き延ばされます。
• flex-startは子要素が先頭に寄ります。
• flex-endは子要素が末尾に寄ります。
• centerは子要素が中央に寄ります。

div{
  display: flex;
  height: 200px;  /*高さを200pxにした*/
  align-items: stretch;
  background-color: aqua;
}

まとめ

display: flex; を使うことで、レイアウトが直感的になり、レスポンシブデザインも簡単に実装できます。Flexboxを活用して、より柔軟なデザインを作りましょう！

CSSのプロパティって何がある？100個以上をご紹介！

この記事はどんなプロパティがあるのかをざっと見ることができる記事になっています。

monmontraining.com

2025.02.04