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

2022年9月2日2022年10月12日

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

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

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

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

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

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

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

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;
}

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

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;」

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;」

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;」

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;」

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;」の組み合わせ

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;」の組み合わせ

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;
}

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

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

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

チェック_1: チェック_2: チェック_3: チェック_4:

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;
}

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

チェック_1: チェック_2: チェック_3: チェック_4:

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」

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

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

チェック_1: チェック_2: チェック_3: チェック_4:

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;
}

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

チェック_1: チェック_2: チェック_3: チェック_4:

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」を指定しないと、このようになります。
チェックボックス（ラベル）は背景がないのでわかりにくですが、左右の空白をクリックしてもチェックが入ってしまいます。

チェック_1: チェック_2: チェック_3: チェック_4:

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

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

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！