【CSS】display:flex;の使い方の全てを紹介します！

2023年1月29日

takato（@n8takato）です！

「display:flex;」の使い方を知りたい

この記事は上記の課題に向けて作成しています。

web制作をしていると必ずと言って良いほど「display:flex;」を使用します。

「display:flex;」はプロパティを知っていると非常に使いやすくなります。

この記事では「display:flex;」の使い方について説明します。

この記事を読むメリット

「display:flex;」の使い方がわかる

この記事を書いた人

この記事を書いた僕はこんな人です！

都内制作会社でwebデザイナー・webディレクターとして勤務
webデザイナー3年、webディレクター1年目
web制作現場で学んだことを発信している人

display:flexの使い方

まずは「display:flex;」の基本的な使い方を説明します。

「display:flex;」は要素を横並びにする際に使用します。

例えば下記のような縦に並んだ文章があるとします。

■こちらは左側です

■こちらは右側です

上記の文章に「display:flex;」を設定すると横並びになります。

■こちらは左側です

■こちらは右側です

コードは下記のように使用します。

HTML

 <div class="test">
  <div class="test_left">
   <p>■こちらは左側です</p>
  </div>
  <div class="test_right">
   <p>■こちらは右側です</p>
  </div>
 </div>

css

 .test {
  display:flex;
}

親要素のクラスに「display:flex;」を追加すると横並びになります。

親要素に設定出来るflex系のプロパティ

ここからは横並びする際に役立つプロパティを説明します。

主に3種類のプロパティを紹介します。

3種類のプロパティ

水平方向に対するプロパティ
垂直方向に対するプロパティ
その他プロパティ

水平方向に対するプロパティ

まずは水平方向に対するプロパティです。

水平方向に対するプロパティは6種類あります。

①justify-content: center;

「justify-content: center;」は水平に対して中央に配置出来るコードです。

下記のように要素が左右中央に配置されるようになります。

■こちらは左側です

■こちらは右側です

水平方向に対して中央に配置したい時に使用出来ます。

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

②justify-content: flex-start;

「justify-content: flex-start;」は水平に対して左に配置するコードです。

下記のように左に配置されるようになります。

■こちらは左側です

■こちらは右側です

水平方向に対して左に配置したい時に使用出来ます。

.test {
 display:flex;
 justify-content: flex-start;
}

③justify-content: flex-end;

「justify-content: flex-end;」は水平に対して右に配置出来るコードです。

下記のように右側に配置されるようになります。

■こちらは左側です

■こちらは右側です

水平方向に対して右側に配置したい場合に使用出来ます。

.test {
 display:flex;
 justify-content: flex-end;
}

④justify-content: space-between;

「justify-content: space-between;」は水平に対して両端に配置出来ます。

下記のように要素が両端に配置されます。

■こちらは左側です

■こちらは右側です

要素を両端に配置したい場合に使用します。

.test {
 display:flex;
 justify-content: space-between;
}

⑤justify-content: space-around;

「justify-content: space-around;」は各要素の左右に等幅の余白を作れます。

コードを実装すると下記のようになります。

■こちらは左側です

■こちらは右側です

「■こちらは左側です」の左右に均等の余白が作られます。

「■こちらは右側です」にも同様の余白が作成されます。

.test {
 display:flex;
 justify-content: space-around;
}

⑥justify-content: space-evenly;

「justify-content: space-evenly;」は外側と内側で異なる余白を作れます。

外側の余白を1とすると、内側の余白は0.5になります。

つまり外側の1/2の大きさの余白が内側に出来ます。

コードを実装すると下記のようになります。

■こちらは左側です

■こちらは右側です

.test {
 display:flex;
 justify-content: space-evenly;
}

垂直方向に対するプロパティ

続いて垂直方向に対するプロパティを紹介します。

垂直方向に対するプロパティは3種類あります。

①align-items: flex-start;

「align-items: flex-start;」は垂直方向に対して上揃え出来るコードです。

実装すると下記のようになります。

こちらは左側です

こちらは右側です

垂直に対して上揃えに設定したい際に使用します。

.test {
 display:flex;
 align-items: flex-start;
}

②align-items: center;

「align-items: center;」は垂直方向に対して中央揃えに出来るコードです。

高さの異なる2つの要素を中央に揃えることが出来ます。

こちらは左側です

こちらは右側です

2つの高さを揃えたい場合に使用します。

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

③align-items: flex-end;

「align-items: flex-end;」は垂直方向に対して下揃え出来るコードです。

実装すると下記のようになります。

こちらは左側です

こちらは右側です

垂直に対して下揃えする場合に使用します。

.test {
 display:flex;
 align-items: flex-end;
}

その他プロパティ

水平方向や垂直方向とは関係の無いプロパティを2つ紹介します。

①flex-wrap: wrap;

「flex-wrap: wrap」は自動で折り返してくれるコードです。

親要素の横幅を超えてしまう場合自動で折り返してくれます。

下記の場合だと、4つ目のボックスが入りきらないので折り返されています。

こちらは左側です

複数の要素を均等に配置したい場合に使用します。

.test {
 display:flex;
 flex-wrap: wrap;
 margin: 0px 5px 10px;
}

②flex-direction: row-reverse;

「flex-direction: row-reverse;」は左右反対に横並び出来るコードです。

実装すると下記のようになります。

こちらは左側です

こちらは右側です

大事なのが要素だけでなく水平方向も逆になるということです。

※左揃えで「flex-direction: row-reverse;」を追加すると「右揃え」に変わります。本来右揃えの「justify-content: flex-end;」を追加すると左揃えになります。

追加する水平方向のプロパティも逆になるところに注意が必要です。

.test {
 display:flex;
 flex-direction: row-reverse;
}

子要素に設定出来るflex系のプロパティ

続いては子要素に設定するプロパティの紹介です。

子要素に設定するプロパティは2つあります。

order

1つ目は「order」です。

「order」は並び順を入れかえることの出来るプロパティです。

記述方法は下記のような感じです。

 order:数字;

例えば下記のようなボックスがあったとします。

box01

box02

box03

box04

box05

box06

「order」ではHTMLを変えずに並ぶ順番を変更出来ます。

box01

box02

box03

box04

box05

box06

順番の入れ替えをしたい場合はこのように活用してください。

HTMLコード

<div class="test_box">
  <div class="test_box01_01">
   <p>box01</p>
  </div>
  <div class="test_box02_01">
   <p>box02</p>
  </div>
  <div class="test_box03_01">
   <p>box03</p>
  </div>
  <div class="test_box04_01">
   <p>box04</p>
  </div>
  <div class="test_box05_01">
   <p>box05</p>
  </div>
  <div class="test_box06_01">
   <p>box06</p>
  </div>
 </div>

cssコード

.test_box {
 display:flex;
}

.test_box01_01 {
 order:3;
}

.test_box02_01 {
 order:5;
}

.test_box03_01 {
 order:1;
}

.test_box04_01 {
 order:6;
}

.test_box05_01 {
 order:2;
}

.test_box06_01 {
 order:4;
}

flex-basis

2つ目は「flex-basis」です。

「flex-basis」は子要素それぞれの横幅を指定出来るプロパティです。

記述方法は下記のような感じです。

flex-basis:〇〇%;

実装すると下記のような感じになります。

box01

box02

box03

box04

box05

box06

HTMLコード

<div class="test_box">
  <div class="test_box01_01">
   <p>box01</p>
  </div>
  <div class="test_box02_01">
   <p>box02</p>
  </div>
  <div class="test_box03_01">
   <p>box03</p>
  </div>
  <div class="test_box04_01">
   <p>box04</p>
  </div>
  <div class="test_box05_01">
   <p>box05</p>
  </div>
  <div class="test_box06_01">
   <p>box06</p>
  </div>
 </div>

cssコード

.test_box {
 display:flex;
}

.test_box01_01 {
 flex-basis:30%;
}

.test_box02_01 {
 flex-basis:60%;
}

.test_box03_01 {
 flex-basis:100%;
}

.test_box04_01 {
 flex-basis:10%;
}

.test_box05_01 {
 flex-basis:70%;
}

.test_box06_01 {
 flex-basis:30%;
}