【CSS】各種ブロックやボタン、チェックボックスなどの表示位置を操作する

フレックスボックスの使い方まとめ

HTML要素の配置に便利な「display: flex;」の基本的な使い方をまとめました。

レイアウトを考えるうえで必ず利用したい機能ですが、プロパティの種類が多く混乱しがち。
そこで、使いたいレイアウトを目で見て確認し、そのコードをコピーできるようにしました。

自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います!

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

<div>などのブロック要素を横(幅方向)に並べる

フレックスボックスを使うと、縦並びのブロック要素が横並びになります。

フレックスボックスを使わない場合

1
2
3
4

フレックスボックスを使う場合

1
2
3
4

使い方は簡単で、横並びにしたい要素の 親要素のCSS に「display: flex;」を設定するだけで実装できます。


「display: flex;」に加え、以下で纏めている様々なプロパティを使うことにより、要素の間隔や並び順などをコントロールできます。

全要素の配置に関するプロパティ
justify-content

幅(横)方向の配置を変えるプロパティ。
※親要素のCSSに設定する。

  • 「flex-start」→ 左揃え(初期値)
  • 「center」→ 中央揃え
  • 「flex-end」→ 右揃え
  • 「space-between」→ 等間隔
align-items

高さ(縦)方向の配置を変えるプロパティ。
※親要素のCSSに設定する。

  • 「flex-start」→ 上端揃え(初期値)
  • 「center」→ 中央揃え
  • 「flex-end」→ 下端揃え

他にもありますが、とりあえずこの辺りを覚えておけば大丈夫でしょう。

個々の要素の配置に関するプロパティ
align-self

個々の要素別々に、高さ(縦)方向の配置を変えられるプロパティ。
※子要素のCSSに設定する。

  • 「flex-start」→ 上端揃え(初期値)
  • 「center」→ 中央揃え
  • 「flex-end」→ 下端揃え
order

要素の表示順を変えられるプロパティ。
※子要素のCSSに設定する。

  • 「order: 1;」
  • 「order: 2;」
  • 「order: 3;」

のように設定すると、その数字順に要素が並び替えられる。

要素をセンター(横方向)に寄せる
「justify-content: center;」

1
2
3
4

要素を等間隔で並べる
「justify-content: space-between;」

1
2
3
4

要素を縦横中央に寄せる
「justify-content: center;」
「align-items: center;」

1
2
3
4

要素を右下に寄せる
「justify-content: flex-end;」
「align-items: flex-end;」

1
2
3
4

個々の要素を上下左右バラバラに配置する
「align-self: flex-start;」「align-self: center;」「align-self: flex-end;」の組み合わせ

1
2
3
4

要素の表示順を操作する
「order: 1;」「order: 2;」「order: 3;」「order: 4;」の組み合わせ

1
2
3
4

ボタンやチェックボックスなどのインライン要素を縦(高さ方向)に並べる

ボタンやチェックボックスなどのインライン要素はもともと横並びですが、フレックスボックスを使うことで縦並びにすることができます。

フレックスボックスを使わない場合

フレックスボックスを使う場合

上のように要素を縦に並べる場合は、親要素のCSS に「display: flex;」を設定することに加え、要素を縦向きにする「flex-direction: column;」を合わせて設定します。

「justify-content」や「align-items」ももちろん使用可能です。
が、「flex-direction: column;」を設定するとすべての軸が反転するため、

  • 幅(横)方向の配置 → 「align-items」
  • 高さ(縦)方向の配置 → 「justify-content」

となり、先程までの例とは逆になる点に注意しましょう。

要素をセンター(横方向)に寄せる

要素をセンター(縦方向)に寄せる

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次