MENU
Webコーディング（HTML/CSS/JavaScript）やEC-CUBEカスタマイズ、Webアプリなど
  1. ホーム
  2. プログラミング
  3. HTML/CSS/JavaScript
  4. 【CSS】各種ブロックやボタン、チェックボックスなどのレイアウトを操作する（フレックスボックス）

【CSS】各種ブロックやボタン、チェックボックスなどのレイアウトを操作する（フレックスボックス）

HTML/CSS/JavaScript

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

レイアウトを考えるうえで必ず利用したい機能ですが、プロパティの種類が多く混乱しがち。
本記事では、display: flex;を使った基本的なレイアウト事例とコードを纏めました。

目次

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

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

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

1
2
3
4
HTML/CSS コード
<section>
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
  <div class="box-4">4</div>
</section>
section {
  margin: 16px auto;
  width: 100%;
  height: 300px;
  border: solid 1px #000;
}

div {
  width: 20%;
  height: 75px;
  text-align: center;
  line-height: 75px;
}

.box-1 {
  background-color: aqua;
}

.box-2 {
  background-color: pink;
}

.box-3 {
  background-color: limegreen;
}

.box-4 {
  background-color: tomato;
}

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

1
2
3
4
HTML/CSS コード
<section>
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
  <div class="box-4">4</div>
</section>
section {
  margin: 16px auto;
  width: 100%;
  height: 300px;
  border: solid 1px #000;
  display: flex;
}

div {
  width: 20%;
  height: 75px;
  text-align: center;
  line-height: 75px;
}

.box-1 {
  background-color: aqua;
}

.box-2 {
  background-color: pink;
}

.box-3 {
  background-color: limegreen;
}

.box-4 {
  background-color: tomato;
}

使い方は簡単で、横並びにしたい要素の 親要素の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
HTML/CSS コード
<section>
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
  <div class="box-4">4</div>
</section>
section {
  margin: 16px auto;
  width: 100%;
  height: 300px;
  border: solid 1px #000;
  display: flex;
  justify-content: center;
}

div {
  width: 20%;
  height: 75px;
  text-align: center;
  line-height: 75px;
}

.box-1 {
  background-color: aqua;
}

.box-2 {
  background-color: pink;
}

.box-3 {
  background-color: limegreen;
}

.box-4 {
  background-color: tomato;
}

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

1
2
3
4
HTML/CSS コード
<section>
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
  <div class="box-4">4</div>
</section>
section {
  margin: 16px auto;
  width: 100%;
  height: 300px;
  border: solid 1px #000;
  display: flex;
  justify-content: space-between;
}

div {
  width: 20%;
  height: 75px;
  text-align: center;
  line-height: 75px;
}

.box-1 {
  background-color: aqua;
}

.box-2 {
  background-color: pink;
}

.box-3 {
  background-color: limegreen;
}

.box-4 {
  background-color: tomato;
}

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

1
2
3
4
HTML/CSS コード
<section>
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
  <div class="box-4">4</div>
</section>
section {
  margin: 16px auto;
  width: 100%;
  height: 300px;
  border: solid 1px #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 20%;
  height: 75px;
  text-align: center;
  line-height: 75px;
}

.box-1 {
  background-color: aqua;
}

.box-2 {
  background-color: pink;
}

.box-3 {
  background-color: limegreen;
}

.box-4 {
  background-color: tomato;
}

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

1
2
3
4
HTML/CSS コード
<section>
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
  <div class="box-4">4</div>
</section>
section {
  margin: 16px auto;
  width: 100%;
  height: 300px;
  border: solid 1px #000;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

div {
  width: 20%;
  height: 75px;
  text-align: center;
  line-height: 75px;
}

.box-1 {
  background-color: aqua;
}

.box-2 {
  background-color: pink;
}

.box-3 {
  background-color: limegreen;
}

.box-4 {
  background-color: tomato;
}

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

1
2
3
4
HTML/CSS コード
<section>
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
  <div class="box-4">4</div>
</section>
section {
  margin: 16px auto;
  width: 100%;
  height: 300px;
  border: solid 1px #000;
  display: flex;
}

div {
  width: 20%;
  height: 75px;
  text-align: center;
  line-height: 75px;
}

.box-1 {
  background-color: aqua;
  align-self: flex-start;
}

.box-2 {
  background-color: pink;
  align-self: center;
}

.box-3 {
  background-color: limegreen;
  align-self: flex-end;
}

.box-4 {
  background-color: tomato;
  align-self: center;
}

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

1
2
3
4
HTML/CSS コード
<section>
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
  <div class="box-4">4</div>
</section>
section {
  margin: 16px auto;
  width: 100%;
  height: 300px;
  border: solid 1px #000;
  display: flex;
}

div {
  width: 20%;
  height: 75px;
  text-align: center;
  line-height: 75px;
}

.box-1 {
  background-color: aqua;
  order: 3;
}

.box-2 {
  background-color: pink;
  order: 4;
}

.box-3 {
  background-color: limegreen;
  order: 1;
}

.box-4 {
  background-color: tomato;
  order: 2;
}

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

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

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

HTML/CSS コード
<section>
  <div>
    <button>ボタン_1</button>
    <button>ボタン_2</button>
    <button>ボタン_3</button>
    <button>ボタン_4</button>
  </div>
  <div>
    <label>チェック_1:<input type="checkbox"></label>
    <label>チェック_2:<input type="checkbox"></label>
    <label>チェック_3:<input type="checkbox"></label>
    <label>チェック_4:<input type="checkbox"></label>
  </div>
</section>
section {
  margin: 16px auto;
  width: 100%;
  height: 300px;
  border: solid 1px #000;
}

div {
  height: 150px;
}

button, label {
  width: 125px;
  text-align: center;
}

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

HTML/CSS コード
<section>
  <div>
    <button>ボタン_1</button>
    <button>ボタン_2</button>
    <button>ボタン_3</button>
    <button>ボタン_4</button>
  </div>
  <div>
    <label>チェック_1:<input type="checkbox"></label>
    <label>チェック_2:<input type="checkbox"></label>
    <label>チェック_3:<input type="checkbox"></label>
    <label>チェック_4:<input type="checkbox"></label>
  </div>
</section>
section {
  margin: 16px auto;
  width: 100%;
  height: 300px;
  border: solid 1px #000;
}

div {
  display: flex;
  flex-direction: column;
  height: 150px;
}

button, label {
  width: 125px;
  text-align: center;
}

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

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

  • 幅（横）方向の配置　→　align-items
  • 高さ（縦）方向の配置　→　justify-content

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

要素をセンター（横方向）に寄せる

HTML/CSS コード
<section>
  <div>
    <button>ボタン_1</button>
    <button>ボタン_2</button>
    <button>ボタン_3</button>
    <button>ボタン_4</button>
  </div>
  <div>
    <label>チェック_1:<input type="checkbox"></label>
    <label>チェック_2:<input type="checkbox"></label>
    <label>チェック_3:<input type="checkbox"></label>
    <label>チェック_4:<input type="checkbox"></label>
  </div>
</section>
section {
  margin: 16px auto;
  width: 100%;
  height: 300px;
  border: solid 1px #000;
}

div {
  display: flex;
  flex-direction: column;
  height: 150px;
  align-items: center;
}

button, label {
  width: 125px;
  text-align: center;
}

要素をセンター（縦方向）に寄せる

HTML/CSS コード
<section>
  <div>
    <button>ボタン_1</button>
    <button>ボタン_2</button>
    <button>ボタン_3</button>
    <button>ボタン_4</button>
  </div>
  <div>
    <label>チェック_1:<input type="checkbox"></label>
    <label>チェック_2:<input type="checkbox"></label>
    <label>チェック_3:<input type="checkbox"></label>
    <label>チェック_4:<input type="checkbox"></label>
  </div>
</section>
section {
  margin: 16px auto;
  width: 100%;
  height: 300px;
  border: solid 1px #000;
}

div {
  display: flex;
  flex-direction: column;
  height: 150px;
  justify-content: center;
}

button, label {
  width: 125px;
  text-align: center;
}
【注】display: flex;を設定すると、各要素がブロックになって親要素の幅いっぱいに広がる件について

通常、インライン要素はコンテンツの幅・高さに合わせて設定されますが、親要素にdisplay: flex;を設定すると要素の幅・高さが親要素に合わせて設定されてしまいます。

各要素の「width」と「height」を指定しないと、このようになります。
チェックボックス（ラベル）は背景がないのでわかりにくですが、左右の空白をクリックしてもチェックが入ってしまいます。

各要素に「width」と「height」を設定すれば解消するので、設定を忘れないようにしましょう。

display: inline-flex;という記述法もあり、これを使うことで各要素をインラインのまま使えます。が、インライン要素にはjustify-contentやalign-itemsが効かないので、配置にこだわりたい方はdisplay: flex;で調整した方が良いかもしれません。

HTML/CSS/JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次