Flexbox を使って横並びレイアウトを作ってみよう | HTML / CSS入門

前のページでは、

box-shadow
border
カードデザイン

を使って、

立体感

を出しました。

今回は、

横並び
中央揃え
要素間の余白

などを簡単に作れる、

Flexbox

を学んでいきます

現在のWeb制作では、Flexbox は非常によく使われています。

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

Flexbox とは？

Flexbox は、

要素を並べるためのCSS

です。

例えば、

横並び
縦並び
中央揃え
等間隔配置

などを簡単に作れます。

まずは横並びにしてみよう

HTML を書いてみます。

<div class="flex-box">

  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>

</div>

CSS を書いてみよう

.flex-box {
  display: flex;
}

.item {
  width: 100px;

  padding: 24px;

  background-color: #2563eb;
  color: white;

  border-radius: 8px;
}

保存してブラウザを確認してください。

要素が横並びになったはずです。

なぜ横並びになるの？

通常、

div は縦に並ぶ

要素です。

しかし、

display: flex;

を書くと、

子要素を横方向へ並べる

ようになります。

gap で余白を作る

今は要素がくっついていると思います。

そんなときは、

gap: 16px;

を追加します。

実際に追加してみよう

.flex-box {
  display: flex;

  gap: 16px;
}

これで、要素同士の間に余白ができます。

gap はかなり便利

昔は、

margin を1個ずつ付ける

ことが多かったですが、

現在は、

gap

を使うことが非常に増えています。

justify-content

次は、

横方向の並び方

を変えてみます。

中央揃えにしてみよう

.flex-box {
  display: flex;

  gap: 16px;

  justify-content: center;
}

すると、

横方向中央

に配置されます。

justify-content の意味

justify-content

は、

主軸方向の配置

を意味しています。

今は横並びなので、

横方向の配置

になります。

よく使う値

左寄せ（初期状態）

justify-content: flex-start;

中央寄せ

justify-content: center;

右寄せ

justify-content: flex-end;

両端配置

justify-content: space-between;

align-items

次は、

縦方向

を揃えてみます。

高さを変えてみよう

<div class="flex-box">

  <div class="item large">1</div>
  <div class="item">2</div>
  <div class="item">3</div>

</div>

.large {
  padding: 48px 24px;
}

すると、高さがズレます。

縦方向中央揃え

.flex-box {
  display: flex;

  gap: 16px;

  align-items: center;
}

を書くと、

縦方向中央

で揃います。

align-items の意味

align-items

は、

交差方向の配置

です。

今は横並びなので、

縦方向

を意味しています。

Flexbox が強力な理由

Flexbox を使うと、

ボタン横並び
ヘッダー
メニュー
カード一覧
中央配置

などを簡単に作れます。

実際のWebサイトでも大量に使われている

Flexbox は、

現在のWeb制作の基本

レベルで使われています。

Tailwind CSS でも、

flex
justify-center
items-center
gap-4

などが頻繁に登場します。

最初は「横並びを作るもの」でOK

最初は、

display: flex;
を書くと横並びになる

くらいの理解で十分です。

少しずつ慣れていきましょう

今回学んだこと

今回学んだこと：

display: flex
gap
justify-content
align-items
横並びレイアウト

などです。

次のページでは

次のページでは、

Flexbox の縦並び
flex-direction
レスポンシブ切り替え

などを学んでいきます。

ここから、

「レイアウト力」

がかなり重要になってきます