CSSのFlexboxを学ぼう

この記事では「Flexbox」について紹介していきます。

現代のWebサイト制作において欠かせない単元になるので、この記事で使い方のイメージを掴んでいきましょう。

Flexboxとは

Flexboxとは、Webサイト内で「横並び」の配置を作成する仕組みのことです。

「display: flex;」というCSSプロパティを用いて横並びの見た目を整えていきます。

.sample {
  display:flex;
}

Webサイト内で横並びの配置を行う際は、いくつか方法があります。
その中でも「Flexbox」は主流の方法です。

必ずマスターしてWebサイト制作の学習を続けていきましょう。

Flexboxの使い方

それでは、Flexboxを利用して横並びのレイアウトを作っていきましょう。

横並びにする例

今回は画像の例の縦並びのレイアウトから横並びのレイアウトに変えていきます。

HTMLサンプルコード

<ul class="list">
  <li class="list-item">項目A</li>
  <li class="list-item">項目B</li>
  <li class="list-item">項目C</li>
</ul>

まずは、HTMLのサンプルコードです。

CSSサンプルコード

.list-item {
  width: 200px;
  height: 200px;
  background-color: #ffbb1e;
}

.list-item:nth-child(1) {
  background-color: #f5498b;
}

.list-item:nth-child(2) {
  background-color: #5049f5;
}

.list-item:nth-child(3) {
  background-color: #eef549;
}

次に、CSSのサンプルコードです。 見やすいように見た目を整えています。

以上が説明で使うサンプルコードです。

Flexboxの使用手順

次に、以下の手順を覚えていきましょう。

横並びの作成手順

1. 横並びにしたい要素たちを見つける
2. 横並びにしたい要素たちの親要素に「display: flex;」を適用する
3. 並び方を決める

先ほど用意したサンプルコードを使用して、Flexboxのイメージを膨らませていきます。

皆さんも実際に手を動かしながら確認していきましょう。

横並びにしたい要素を見つける

まずは、横並びにしたい要素を探しましょう。

今回は、「liタグ」たちを横並びにします。

<ul class="list">
  <li class="list-item">
    項目A <!-- 横並びにしたい要素 -->
  </li>
  <li class="list-item">
    項目B <!-- 横並びにしたい要素 -->
  </li>
  <li class="list-item">
    項目C <!-- 横並びにしたい要素 -->
  </li>
</ul>

横並びにしたい要素の親要素に「display: flex;」を適用する

次に、横並びにしたい要素たちの親要素を探します。
親要素とは、基準としたタグを囲っている要素のことです。

今回は、「liタグ」を基準としているので、親要素は「ulタグ」となります。

<!-- liタグの親要素 -->
<ul class="list">
  <li class="list-item">項目A</li> 
  <li class="list-item">項目B</li> 
  <li class="list-item">項目C</li> 
</ul>

親要素を見つけたら、「display: flex;」を適用します。

.list {
  display:flex;
}

ブラウザの状態

ブラウザを確認すると、先ほどまで縦並びになっていた「liタグ」が横並びになりました。

並び方を決める

さいごに、並べ方を決めていきましょう。

.list {
  display:flex;

  /* 並び方を決めるプロパティ */
  justify-content: center;
  align-items: center;
  gap: 40px;
}

「 display: flex;」を適用した要素に対して、並び方を決めるプロパティを適用させていきます。

並び方を決めるプロパティは、必ず「 display: flex;」と一緒に使います。
よく使用するプロパティは次の章で解説していきます。

ブラウザの状態

ブラウザで確認した際に、上記の画像のようになっていれば大丈夫です。

並び方を決めるプロパティのうち、よく使用するものは後述の章で紹介していきます。

Flexboxでよく使用するプロパティ

ここまでで、Flexboxの使い方を学んできました。

次は、Flexboxの中でよく使用するプロパティについて学んでいきましょう。

display: flex;

「display: flex;」は、Flexboxを使用するために必ず必要なプロパティです。

.flexbox{
  display: flex;
}

使い方は前の章で説明した通りです。

後述するプロパティたちは、この「display: flex;」と一緒に使用していきます。

justify-content

justify-contentは、Flexboxの中で「横の並び」の方法を決めるプロパティです。

指定する値によってどのように横並びを行うかを決めることができます。

.flexbox{
  display: flex;
  justify-content: center;
}

並び方の例

よく使用する３つの値の例です。
上記の画像で、並び方のイメージを掴んでおきましょう。

align-items

align-itemsは、Flexboxの中で「縦の並び」の方法を決めるプロパティです。

指定する値によってどのように縦並びを行うかを決めることができます。

.flexbox{
  display: flex;
  align-items: center;
}

並び方の例は以下のようになります。

並び方の例

flex-wrap

flex-wrapは、Flexboxの中で、折り返し表示を設定するプロパティです。

横並びにしたい要素の横幅が、親要素の要素からはみ出たときに折り返し表示されます。

.flexbox{
  display: flex;
  flex-wrap: wrap;
}

並び方の例は以下のようになります。

並び方の例

gap

gapは、Flexbox内の要素の間の「余白」を指定できるプロパティです。

/* 縦と横の余白を別々で指定するとき */
.flexbox {
  gap: 32px 80px;
}

/* 縦と横の余白を一括で指定するとき */
.flexbox {
  gap: 80px;
}

縦方向の余白を指定する「colum-gap」と、横方向の余白を指定する「row-gap」の２つを指定することができます。

並び方の例

flex-shrink

flex-shrinkは、Flexboxの中で、要素の縮小率を決めるプロパティです。

/* 縮小されたくない時は0を指定する */
.image {
  flex-shrink: 0;
}

横並びの配置にしたときに要素が縮んでしまう現象がおきる場合があります。
「flex-shrink: 0;」を指定することで縮ませないように見た目を調節することができます。

並び方の例

他にもプロパティはたくさんある

Flexboxでよく使用するプロパティについて紹介してきました。

ただ、Flexboxで使用するプロパティは、まだまだたくさんあります。

まずは今回登場したプロパティを覚えてから他のプロパティを学んでいきましょう。

まとめ

ここまでで、Flexboxの使い方について解説してきました。

以下の項目が覚えていれば、次の学習に進んで大丈夫です。

• Flexboxとは：Webサイトで横並びの配置を作る
• Flexboxの使い方：横並びにしたい要素の親要素にdisplay: flex;をつける
• Flexboxでよく使用する項目：６つ
  • 要素を横並びにする
  • 縦の並び方を決める
  • 横の並び方を決める
  • 折り返し表示をする
  • 要素同士の余白を決める
  • 要素が縮小しないように設定する

Webサイトを制作する上で横並びの配置は必ず登場します。

この単元はとても大切な知識になるので、きちんと扱えるようになりましょう。

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー