Flexboxを使ってレイアウトを簡単にしよう【CSS】

Flexboxは、ウェブデザインで要素のレイアウトを簡単に制御するための強力なツールです。

この記事では基本的な使い方を解説します。

Flexboxを使ったWebページのレイアウトをマスターしましょう。

Flexboxとは？

Flexboxは、要素を水平方向または垂直方向に柔軟に配置するためのCSSの機能です。

うるふ

FlexboxはCSSの便利なモジュールの一つですね！

Flexboxを使用すると、要素を縦や横に自動的に整列させ、簡単に間隔や順序を調整することができます。

これにより、レスポンシブデザインや複雑なレイアウトの作成が容易になります。

Flexboxでは、要素をコントロールするために「Flexコンテナ」と「Flexアイテム」という2つの主要な概念を使用します。

Flexコンテナは要素を含む親要素で、{display: flex;}というCSSプロパティを設定します。

一方、Flexアイテムは、Flexコンテナ内の個々の要素です。

Flexboxを使用する際によく使われるいくつかのプロパティがあります。その中でも主要なものを以下に紹介します。

flex-direction:
要素の配置方向を指定します。row（横方向）、column（縦方向）などがあります。
justify-content:
Flexアイテムの水平方向の配置方法を指定します。flex-start、flex-end、centerなどがあります。
align-items:
Flexアイテムの垂直方向の配置方法を指定します。flex-start、flex-end、centerなどがあります。
align-content:
フレックスボックス内の行の垂直方向の配置を制御します。flex-start、flex-end、centerなどがあります。
flex-wrap:
FlexアイテムがFlexコンテナ内に収まらない場合の折り返しの方法を指定します。

要素が1行のみで構成される場合には、align-itemsとalign-contentの効果は同じになります。

しかし、複数行の場合には、align-itemsは各行のアイテムの配置を制御し、align-contentは行全体の配置を制御する点が異なります。

うるふ

Flexboxに関係するプロパティと値はこれら以外にもあります。詳しくはまた別記事で解説する予定です。

実際にどのように使うのかを具体的なコードと一緒に見ていきましょう。

「Result」の「Run Pen」を押してコードを実行してみてください。

コードを実行すると、3つのボックスが均等に配置されているのが確認できると思います。

詳しく見ていきましょう。

HTMLは以下のようになっています。

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

非常にシンプルですね。3つのボックスを持つ親要素(container)を作成しました。

次に、CSSを使用してFlexboxを適用します。親要素に対してdisplay: flex;を設定することで、Flexコンテナとして動作するようにします。

また、justify-contentプロパティを使用して、要素の水平方向の配置方法を指定します。

.container {
  display: flex;
  justify-content: space-between;
}

うるふ

space-betweenを指定することで、Flexアイテムを両端揃え、水平方向に均等配置することができます。このあたりも別の記事で詳しく解説予定です。

最後に、各ボックス要素に対して追加のスタイルを適用します。flex-growプロパティを使用して、要素が余分なスペースをどの程度占有するかを指定します。

.box {
  flex-grow: 1;
  background-color: lightblue;
  padding: 10px;
  margin: 5px;
}

これにより、ボックス要素が均等に広がり、背景色、余白、パディングが適用されました。

非常に基本的なFlexboxの使用例ですが、他にもさまざまなプロパティや値が存在します。

この記事では、Flexboxの基本的な概念や主要なプロパティについて解説しました。

Flexboxは、Webデザインのレイアウト作業を効率化するための便利な機能です。

柔軟で魅力的なWebデザインを作れると思います。

もし詳細な情報が必要な場合は、仕様書なども参考にしてみてください。
仕様書『CSS Flexible Box Layout Module Level 1』

Webデザイン学習関連記事

>>【今読まないと遠回り確定】Progate終わりに何をすべきか解説<<