【CSS】Flexboxの使い方と実装サンプル集

デザオ
ふれっくすぼっくすってなんですかー
デザコト
楽しく言うとちょっとしたコーディングダンスですー

Flexboxの基本

【CSS】Flexboxの使い方と実装サンプル集

親要素（コンテナ）があって子要素（アイテム）がある。入れ子とも呼ばれてたりします。親要素（コンテナ）がないとフレックスしません。簡単に言うとこんな感じです。（簡単ですみません。でも慣れるととっても簡単なのです。）

とにかく慣れてしまえばレスポンシブ対応にとっても役立ちます。float（フロート）を使わなくても横並びが簡単にできますよー。

HTML

『oneArea』が親要素（コンテナ）、『oneBox』が子要素（アイテム）。

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
</div>

【親要素（コンテナ）】に使用できるプロパティ

プロパティ説明
flex-direction子要素（アイテム）の並び順を指定する
flex-wrap子要素（アイテム）の折り返しを指定する
flex-flow子要素（アイテム）の並び順と折り返しをまとめて指定する
justify-content子要素（アイテム）の水平方向の位置を指定する
align-items子要素（アイテム）の垂直方向の位置を指定する
align-content子要素（アイテム）の行の垂直方向の位置を指定する

【並び順】flex-direction

CSSの書き方

.oneArea {
  display: flex;
  flex-direction: row;
}
プロパティ説明
row（デフォルト）子要素（アイテム）を左から右へと配置
row-reverse子要素（アイテム）を右から左へと配置
column子要素（アイテム）を上から下へと配置
column-reverse子要素（アイテム）を下から上へと配置

flex-direction: row;（デフォルト）

子要素（アイテム）を左から右へと配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-direction: row;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
  margin-right: 1%;
}
見本ページをひらく（flex-direction: row;）

flex-direction: row-reverse;

子要素（アイテム）を右から左へと配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-direction: row-reverse;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
  margin-left: 1%;
}
見本ページをひらく（flex-direction: row-reverse;）

flex-direction: column;

子要素（アイテム）を上から下へと配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-direction: column;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
}
見本ページをひらく（flex-direction: column;）

flex-direction: column-reverse;

子要素（アイテム）を下から上へと配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-direction: column-reverse;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
}
見本ページをひらく（flex-direction: column-reverse;）

【折り返し】flex-wrap

CSSの書き方

.oneArea {
  display: flex;
  flex-wrap: nowrap;
}
プロパティ説明
nowrap（デフォルト）子要素（アイテム）を折り返さずに一列に配置
wrap複数行の子要素（アイテム）を上から下へと配置
wrap-reverse複数行の子要素（アイテム）を下から上へと配置

flex-wrap: nowrap;（デフォルト）

子要素（アイテム）を折り返さずに一列に配置。子要素の幅指定をしても折り返さない。

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: nowrap;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
  margin-right: 1%;
}
見本ページをひらく（flex-wrap: nowrap;）

flex-wrap: wrap;

複数行の子要素（アイテム）を上から下へと配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
  margin-right: 1%;
  margin-bottom: 20px;
}
見本ページをひらく（flex-wrap: wrap;）

flex-wrap: wrap-reverse;

複数行の子要素（アイテム）を下から上へと配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap-reverse;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
  margin-right: 1%;
  margin-bottom: 20px;
}
見本ページをひらく（flex-wrap: wrap-reverse;）

【並び順＋折り返し】flex-flow

CSSの書き方

.oneArea {
  display: flex;
  flex-flow: row wrap;
}
プロパティ説明
flex-flow『flex-direction』と『flex-wrap』をまとめて指定できる。
初期値は『row nowrap』。

flex-flow

『flex-direction』と『flex-wrap』をまとめて指定できる。
初期値は『row nowrap』。

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-flow: row wrap;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
  margin-right: 1%;
  margin-bottom: 20px;
}
見本ページをひらく（flex-flow: row wrap;）

【水平方向の位置】justify-content

CSSの書き方

.oneArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
プロパティ説明
flex-start（デフォルト）子要素（アイテム）を左揃えで配置
flex-end子要素（アイテム）を右揃えで配置
center子要素（アイテム）を中央揃えで配置
space-between子要素（アイテム）を両端に配置し、他の要素は均等に間隔を空けて配置
space-around両端の子要素（アイテム）も含めて、均等な間隔を空けて配置

justify-content: flex-start;

子要素（アイテム）を左揃えで配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
  <div class="oneBox">9</div>
  <div class="oneBox">10</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
  margin-right: 1%;
  margin-bottom: 20px;
}
見本ページをひらく（justify-content: flex-start;）

justify-content: flex-end;

子要素（アイテム）を右揃えで配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
  <div class="oneBox">9</div>
  <div class="oneBox">10</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
  margin-left: 1%;
  margin-bottom: 20px;
}
見本ページをひらく（justify-content: flex-end;）

justify-content: center;

子要素（アイテム）を中央揃えで配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
  <div class="oneBox">9</div>
  <div class="oneBox">10</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
  margin-right: 0.5%;
  margin-left: 0.5%;
  margin-bottom: 20px;
}
見本ページをひらく（justify-content: center;）

justify-content: space-between;

子要素（アイテム）を両端に配置し、他の要素は均等に間隔を空けて配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
  <div class="oneBox">9</div>
  <div class="oneBox">10</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
}
見本ページをひらく（justify-content: space-between;）

justify-content: space-around;

両端の子要素（アイテム）も含めて、均等な間隔を空けて配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
  <div class="oneBox">9</div>
  <div class="oneBox">10</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
}
見本ページをひらく（justify-content: space-around;）

【垂直方向の位置】align-items

CSSの書き方

.oneArea {
  display: flex;
  align-items: stretch;
}
プロパティ説明
stretch（デフォルト）一番高さのある子要素（アイテム）に合わせて配置
flex-start子要素（アイテム）を上揃えで配置
flex-end子要素（アイテム）を下揃えで配置
center子要素（アイテム）を上下中央揃えで配置
baseline子要素（アイテム）をベースラインに合わせて配置

align-items: stretch;（デフォルト）

一番高さのある子要素（アイテム）に合わせて配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
</div>

CSS

.oneArea {
  display: flex;
  align-items: stretch;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  margin-right: 1%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  text-align: center;
}
.oneArea .oneBox:nth-child(1) {
  font-size: 3.0rem;
  padding: 100px 20px;
}
.oneArea .oneBox:nth-child(2) {
  font-size: 1.5rem;
  padding: 20px 20px;
}
.oneArea .oneBox:nth-child(3) {
  font-size: 1.5rem;
  padding: 20px 20px;
}
.oneArea .oneBox:nth-child(4) {
  font-size: 1.5rem;
  padding: 20px 20px;
}
見本ページをひらく（align-items: stretch;）

align-items: flex-start;

子要素（アイテム）を上揃えで配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
</div>

CSS

.oneArea {
  display: flex;
  align-items: flex-start;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  margin-right: 1%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  text-align: center;
}
.oneArea .oneBox:nth-child(1) {
  font-size: 3.0rem;
  padding: 100px 20px;
}
.oneArea .oneBox:nth-child(2) {
  font-size: 1.5rem;
  padding: 20px 20px;
}
.oneArea .oneBox:nth-child(3) {
  font-size: 2.0rem;
  padding: 150px 20px;
}
.oneArea .oneBox:nth-child(4) {
  font-size: 1.0rem;
  padding: 50px 20px;
}
見本ページをひらく（align-items: flex-start;）

align-items: flex-end;

子要素（アイテム）を下揃えで配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
</div>

CSS

.oneArea {
  display: flex;
  align-items: flex-end;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  margin-right: 1%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  text-align: center;
}
.oneArea .oneBox:nth-child(1) {
  font-size: 3.0rem;
  padding: 100px 20px;
}
.oneArea .oneBox:nth-child(2) {
  font-size: 1.5rem;
  padding: 20px 20px;
}
.oneArea .oneBox:nth-child(3) {
  font-size: 2.0rem;
  padding: 150px 20px;
}
.oneArea .oneBox:nth-child(4) {
  font-size: 1.0rem;
  padding: 50px 20px;
}
見本ページをひらく（align-items: flex-end;）

align-items: center;

子要素（アイテム）を上下中央揃えで配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
</div>

CSS

.oneArea {
  display: flex;
  align-items: center;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  margin-right: 1%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  text-align: center;
}
.oneArea .oneBox:nth-child(1) {
  font-size: 3.0rem;
  padding: 100px 20px;
}
.oneArea .oneBox:nth-child(2) {
  font-size: 1.5rem;
  padding: 20px 20px;
}
.oneArea .oneBox:nth-child(3) {
  font-size: 2.0rem;
  padding: 150px 20px;
}
.oneArea .oneBox:nth-child(4) {
  font-size: 1.0rem;
  padding: 50px 20px;
}
見本ページをひらく（align-items: center;）

align-items: baseline;

子要素（アイテム）をベースラインに合わせて配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox"><div>1</div></div>
  <div class="oneBox"><div>2</div></div>
  <div class="oneBox"><div>3</div></div>
  <div class="oneBox"><div>4</div></div>
</div>

CSS

.oneArea {
  display: flex;
  align-items: baseline;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  margin-right: 1%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  text-align: center;
}
.oneArea .oneBox:nth-child(1) {
  font-size: 3.0rem;
  padding: 100px 20px;
}
.oneArea .oneBox:nth-child(2) {
  font-size: 1.5rem;
  padding: 20px 20px;
}
.oneArea .oneBox:nth-child(3) {
  font-size: 2.0rem;
  padding: 150px 20px;
}
.oneArea .oneBox:nth-child(4) {
  font-size: 1.0rem;
  padding: 50px 20px;
}
見本ページをひらく（align-items: baseline;）

【垂直方向の位置（複数行）】align-content

CSSの書き方

.oneArea {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}
プロパティ説明
stretch（デフォルト）親要素（コンテナ）の高さに合わせて配置
flex-start親要素（コンテナ）の高さに合わせて上揃えで配置
flex-end親要素（コンテナ）の高さに合わせて下揃えで配置
center親要素（コンテナ）の高さに合わせて中央揃えで配置
space-between親要素（コンテナ）の高さに合わせて他の要素は均等に間隔をあけて配置
space-around親要素（コンテナ）の高さに合わせて均等に間隔をあけて配置

align-content: stretch;

親要素（コンテナ）の高さに合わせて配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
  <div class="oneBox">9</div>
  <div class="oneBox">10</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  height: 450px;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  margin-right: 1%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  padding: 20px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
見本ページをひらく（align-content: stretch;）

align-content: flex-start;

親要素（コンテナ）の高さに合わせて上揃えで配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
  <div class="oneBox">9</div>
  <div class="oneBox">10</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 450px;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  margin-right: 1%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  padding: 20px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
見本ページをひらく（align-content: flex-start;）

align-content: flex-end;

親要素（コンテナ）の高さに合わせて下揃えで配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
  <div class="oneBox">9</div>
  <div class="oneBox">10</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  height: 450px;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  margin-right: 1%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  padding: 20px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
見本ページをひらく（align-content: flex-end;）

align-content: center;

親要素（コンテナ）の高さに合わせて中央揃えで配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
  <div class="oneBox">9</div>
  <div class="oneBox">10</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 450px;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  margin-right: 1%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  padding: 20px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
見本ページをひらく（align-content: center;）

align-content: space-between;

親要素（コンテナ）の高さに合わせて他の要素は均等に間隔をあけて配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
  <div class="oneBox">9</div>
  <div class="oneBox">10</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 450px;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  margin-right: 1%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  padding: 20px;
  text-align: center;
}
見本ページをひらく（align-content: space-between;）

align-content: space-around;

親要素（コンテナ）の高さに合わせて均等に間隔をあけて配置

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
  <div class="oneBox">9</div>
  <div class="oneBox">10</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  height: 450px;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  margin-right: 1%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  padding: 20px;
  text-align: center;
}
見本ページをひらく（align-content: space-around;）

【子要素（アイテム）】に使用できるプロパティ

プロパティ説明
order子要素（アイテム）の並び順を指定する
flex-grow子要素（アイテム）の伸び率を指定する
flex-shrink子要素（アイテム）の縮み率を指定する
flex-basis子要素（アイテム）のベースの幅を指定する
flex子要素（アイテム）の伸び率、縮み率、ベースの幅をまとめて指定する
align-self子要素（アイテム）の垂直方向の位置を指定する

【並び順】order

子要素（アイテム）の並び順を指定する

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox f-01">1<span>order: 3;</span></div>
  <div class="oneBox f-02">2<span>order: 1;</span></div>
  <div class="oneBox f-03">3<span>order: 4;</span></div>
  <div class="oneBox f-04">4<span>order: 2;</span></div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 21%;
  margin: 0 0.5%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  padding: 20px;
  text-align: center;
}
.oneArea .oneBox span {
  display: block;
  font-size: .8rem;
  color: #6b675f;
}
.f-01 { order: 3; }
.f-02 { order: 1; }
.f-03 { order: 4; }
.f-04 { order: 2; }
見本ページをひらく（order）

【伸びる比率】flex-grow

flex-grow

子要素（アイテム）の伸び率を指定する

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox f-01">1<span>flex-grow: 1;</span></div>
  <div class="oneBox f-02">2<span>flex-grow: 2;</span></div>
  <div class="oneBox f-03">3<span>flex-grow: 3;</span></div>
</div>

CSS

.oneArea {
  display: flex;
  background: #e8dc6a;
}
.oneArea .oneBox {
  margin: 0 0.5%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  padding: 20px;
  text-align: center;
}
.oneArea .oneBox span {
  display: block;
  font-size: .8rem;
  color: #6b675f;
}
.f-01 { flex-grow: 1; }
.f-02 { flex-grow: 2; }
.f-03 { flex-grow: 3; }
見本ページをひらく（flex-grow）

【縮む比率】flex-shrink

子要素（アイテム）の縮み率を指定する

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox f-01">1<span>flex-shrink: 1;</span></div>
  <div class="oneBox f-02">2<span>flex-shrink: 2;</span></div>
  <div class="oneBox f-03">3<span>flex-shrink: 3;</span></div>
</div>

CSS

.oneArea {
  display: flex;
  background: #e8dc6a;
}
.oneArea .oneBox {
  flex-basis: 50%;
  margin: 0 0.5%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  padding: 20px;
  text-align: center;
}
.oneArea .oneBox span {
  display: block;
  font-size: .8rem;
  color: #6b675f;
}
.f-01 { flex-shrink: 1; }
.f-02 { flex-shrink: 2; }
.f-03 { flex-shrink: 3; }
見本ページをひらく（flex-shrink）

【ベースの幅】flex-basis

子要素（アイテム）のベースの幅を指定する

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox f-01">1<span>flex-basis: 40%;</span></div>
  <div class="oneBox f-02">2<span>flex-basis: 6%;</span></div>
  <div class="oneBox f-03">3<span>flex-basis: 20%;</span></div>
  <div class="oneBox f-04">4<span>flex-basis: 30%;</span></div>
</div>

CSS

.oneArea {
  display: flex;
  background: #e8dc6a;
}
.oneArea .oneBox {
  margin: 0 0.5%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  padding: 20px;
  text-align: center;
}
.oneArea .oneBox span {
  display: block;
  font-size: .8rem;
  color: #6b675f;
}
.f-01 { flex-basis: 40%; }
.f-02 { flex-basis: 6%; }
.f-03 { flex-basis: 20%; }
.f-04 { flex-basis: 30%; }
見本ページをひらく（flex-basis）

【伸びる比率＋縮む比率＋ベースの幅】flex

子要素（アイテム）の伸び率、縮み率、ベースの幅をまとめて指定する

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox f-01">1<span>flex: 0 0 20%;</span></div>
  <div class="oneBox f-02">2<span>flex: 0 0 30%;</span></div>
  <div class="oneBox f-03">3<span>flex: 0 0 47%;</span></div>
</div>

CSS

.oneArea {
  display: flex;
  background: #e8dc6a;
}
.oneArea .oneBox {
  margin: 0 0.5%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  padding: 20px;
  text-align: center;
}
.oneArea .oneBox span {
  display: block;
  font-size: .8rem;
  color: #6b675f;
}
.f-01 { flex: 0 0 20%; }
.f-02 { flex: 0 0 30%; }
.f-03 { flex: 0 0 47%; }
見本ページをひらく（flex）

【垂直方向の位置】align-self

プロパティ説明
auto（デフォルト）親要素（コンテナ）のalign-itemsの値を使用
flex-start子要素（アイテム）を上揃えで配置
flex-end子要素（アイテム）を下揃えで配置
center子要素（アイテム）を中央揃えで配置
baselne子要素（アイテム）をベースラインに合わせて配置
stretch子要素（アイテム）を上下の余白を埋めるように配置

※ 親要素の『align-items』と同じ機能です。
※ 子要素の『align-self』の指定は、親要素の『align-items』より優先されます。

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox f-01">1<span>stretch</span></div>
  <div class="oneBox f-02">2<span>flex-start</span></div>
  <div class="oneBox f-03">3<span>center</span></div>
  <div class="oneBox f-04">4<span>flex-end</span></div>
  <div class="oneBox f-05">5<span>baseline</span></div>
</div>

CSS

.oneArea {
  display: flex;
  height: 450px;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 19%;
  margin: 0 0.5%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  padding: 20px;
  text-align: center;
}
.oneArea .oneBox span {
  display: block;
  font-size: .8rem;
  color: #6b675f;
}
.f-01 { align-self: stretch; }
.f-02 { align-self: flex-start; }
.f-03 { align-self: center; }
.f-04 { align-self: flex-end; }
.f-05 { align-self: baseline; }
見本ページをひらく（align-self）

いまの書き方

この記事を書いたあとに、Flexbox はもっと使いやすくなりました。いまよく使う書き方を 3 つと、order の注意を足しておきます。

gap ですき間をあける

上の見本は、すき間を子の『margin-right』や『margin-bottom』で作っていました。この書き方だと、行の右はしや最後の行の下にも余白が残ります。
親に『gap』を書くと、箱と箱のあいだにだけすき間が入ります。子に margin を書かなくてよく、はしもそろいます。『gap: 20px 4%;』のように、行のすき間・列のすき間の順で書けます。

コードを見る（HTML・CSS）

HTML

<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
  <div class="oneBox">5</div>
  <div class="oneBox">6</div>
  <div class="oneBox">7</div>
  <div class="oneBox">8</div>
  <div class="oneBox">9</div>
  <div class="oneBox">10</div>
</div>

CSS

.oneArea {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 4%; /* 行のすき間 20px、列のすき間 4% */
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 22%; /* 22% × 4 ＋ 4% × 3 ＝ 100% */
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
}
見本ページをひらく（いまの書き方：gap ですき間をあける）

justify-content: space-evenly

『space-around』は、はしのすき間が、あいだのすき間の半分になります。『space-evenly』は、はしも、あいだも同じすき間になります。いまはどのブラウザでも使えます。

コードを見る（HTML・CSS）

HTML

<p class="flex-label">space-around</p>
<div class="oneArea is-around">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
</div>
<p class="flex-label">space-evenly</p>
<div class="oneArea is-evenly">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox">3</div>
  <div class="oneBox">4</div>
</div>

CSS

.oneArea {
  display: flex;
  background: #e8dc6a;
}
.oneArea .oneBox {
  width: 18%;
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
}
.is-around {
  justify-content: space-around; /* はしのすき間は、あいだの半分 */
}
.is-evenly {
  justify-content: space-evenly; /* はしも、あいだも同じすき間 */
}
見本ページをひらく（いまの書き方：space-around と space-evenly）

flex: 1 で同じ幅にならべる

いちばんよく使うのが『flex: 1;』です。『flex: 1 1 0%;』と同じで、「伸びる・縮む・もとの幅は 0」の意味なので、中の文字の量に関係なく同じ幅になります。
1 つだけ『margin-left: auto;』にすると、左にあまった場所を全部うけとって右へ寄ります。メニューの一番右にボタンを置くときなどに使えます。

コードを見る（HTML・CSS）

HTML

<p class="flex-label">flex: 1;</p>
<div class="oneArea">
  <div class="oneBox is-equal">1</div>
  <div class="oneBox is-equal">2<span>文字が多くても同じ幅</span></div>
  <div class="oneBox is-equal">3</div>
</div>
<p class="flex-label">margin-left: auto;</p>
<div class="oneArea">
  <div class="oneBox">1</div>
  <div class="oneBox">2</div>
  <div class="oneBox is-right">3</div>
</div>

CSS

.oneArea {
  display: flex;
  gap: 1%;
  background: #e8dc6a;
}
.oneArea .oneBox {
  border: 4px solid #2b2a27;
  background: #fff;
  box-sizing: border-box;
  color: #2b2a27;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px;
}
.oneArea .oneBox span {
  display: block;
  font-size: .8rem;
  color: #6b675f;
}
.is-equal {
  flex: 1; /* flex: 1 1 0% と同じ。中身の量に関係なく同じ幅 */
}
.is-right {
  margin-left: auto; /* 左のあまりを全部うけとって、右へ寄る */
}
見本ページをひらく（いまの書き方：flex: 1 と margin-left: auto）

order の注意

『order』で変わるのは、見た目の順番だけです。Tab キーで移る順番や、読み上げの順番は HTML のままです。順番に意味があるもの（手順やメニューなど）は、order ではなく HTML の並びを変えましょう。

どれを使う？

  • すき間をあける → 『gap』（margin より、はしがそろう）
  • はしも、あいだも同じすき間で散らす → 『justify-content: space-evenly』
  • 同じ幅でならべる → 子に『flex: 1』。1 つだけ右へ寄せる → その子に『margin-left: auto』
  • 横か縦の一方向にならべる → Flexbox。縦と横の両方をそろえたい（カードの一覧など） → Grid

制作メモ

ベンダープレフィックスは不要です。（古いバージョンのブラウザだったら必要ですが）
私、制作時、まったく付けておりません。（2020年1月現在）

ん、どうだったっけ？って思ったときによく使っているおすすめサイトさんをご紹介します。

▼ ベンダープレフィックスって必要？って気になったら

Can I use

▼ Flexboxをちょっと試したいぞ。ってときに

Flexbox Playground

さいごに

デザオ
フレックスフレックスー
デザコト
フレックスがいいですねー

ふたりの小言

関連記事

【CSS】Flexbox 上下中央揃え
【CSS】Flexbox 最後の行を左寄せにする（space-between使用時）

ほかの見本は、みほんちょうに。

デザインのメモ 2020.1.8

デザコトauthor

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

tools toolkit コーディングの道具箱 コーディング中にさっと使う、フロントエンドの小さな道具箱。clamp() や px ⇄ rem、box-shadow など 26 のツールと、37 の用語集。