CheatSheet
日本語 icon日本語English iconEnglish
チートシートとはカンニングペーパーのことです。それが転じて、本来覚えることをまとめておいたものです。
要点をすぐに参照できるようにまとめてみました。

CSS Flexbox

エンジニアのためのWebチートシート

FlexboxとはFlexible Box Layout Moduleのことで、柔軟なレイアウトを簡単に実現することができるCSS3の新しいレイアウトモジュールです。 要素の横並びにfloatやinline-blockを使用するのは時代遅れです。 Flexboxのプロパティをチートシートにまとめてみました。

Flexboxの基本

Flexboxを指定しない

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
1
2
3
4

Flexboxを指定する

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.container {
  display: flex;
}
1
2
3
4

flex-direction(子要素の並ぶ向き)

row

.container {
  display: flex;
  flex-direction: row;
}

※ デフォルト

1
2
3
4

row-reverse

.container {
  display: flex;
  flex-direction: row-reverse;
}
1
2
3
4

column

.container {
  display: flex;
  flex-direction: column;
}
1
2
3
4

column-reverse

.container {
  display: flex;
  flex-direction: row-reverse;
}
1
2
3
4

flex-wrap(Flexboxの基本)

nowrap

.container {
  display: flex;
  flex-wrap: nowrap;
}

※ デフォルト

1
2
3
4

wrap

.container {
  display: flex;
  flex-wrap: wrap;
}
1
2
3
4

wrap-reverse

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}
1
2
3
4

justify-content(水平方向の揃え)

flex-start

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

※ デフォルト

1
2
3
4

flex-end

.container {
  display: flex;
  justify-content: flex-end;
}
1
2
3
4

center

.container {
  display: flex;
  justify-content: center;
}
1
2
3
4

space-between

.container {
  display: flex;
  justify-content: space-between;
}
1
2
3
4

space-around

.container {
  display: flex;
  justify-content: space-around;
}
1
2
3
4

space-evenly

.container {
  display: flex;
  justify-content: space-evenly;
}
1
2
3
4

align-items(垂直方向の揃え)

stretch

.container {
  display: flex;
  align-items: stretch;
}

※ デフォルト

1
2
3
4

flex-start

.container {
  display: flex;
  align-items: flex-start;
}
1
2
3
4

flex-end

.container {
  display: flex;
  align-items: flex-end;
}
1
2
3
4

center

.container {
  display: flex;
  align-items: center;
}
1
2
3
4

baseline

.container {
  display: flex;
  align-items: baseline;
}
1
2
3
4

align-content(複数行揃え)

stretch

.container {
  display: flex;
  align-content: stretch;
}

※ デフォルト

1
2
3
4
5
6
7

flex-start

.container {
  display: flex;
  align-content: flex-start;
}
1
2
3
4
5
6
7

flex-end

.container {
  display: flex;
  align-content: flex-end;
}
1
2
3
4
5
6
7

center

.container {
  display: flex;
  align-content: center;
}
1
2
3
4
5
6
7

space-between

.container {
  display: flex;
  align-content: space-between;
}
1
2
3
4
5
6
7

space-around

.container {
  display: flex;
  align-content: space-around;
}
1
2
3
4
5
6
7

子要素に指定するプロパティ

order

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>
.item1 {
  order: 3;
}
.item2 {
  order: 1;
}
.item3 {
  order: 2;
}
2
3
1

flex-grow

.item1 {
  flex-grow: 0;  //default value
}
.item2 {
  flex-grow: 1;
}
.item3 {
  flex-grow: 2;
}
1
2
3

flex-shrink

.item1 {
  flex-shrink: 1;  //default value
}
.item2 {
  flex-shrink: 2;
}
.item3 {
  flex-shrink: 3;
}
1
2
3

flex-basis

.item1 {
  flex-basis: auto;
}
.item2 {
  flex-basis: 40%;
}
.item3 {
  flex-basis: 20%;
}
1
2
3

align-self

.item1 {
  align-self: auto;
}
.item2 {
  align-self: stretch;
}
.item3 {
  align-self: flex-start;
}
.item4 {
  align-self: flex-end;
}
.item5 {
  align-self: center;
}
.item6 {
  align-self: baseline;
}
.item7 {
  height: 100px;
}
1
2
3
4
5
6
7

Related Cheatsheets

Related Goods

  • シリーズ40万部突破の大ヒット！ Webサイト制作者必見の一冊です。
    シリーズ40万部突破の大ヒット！ Webサイト制作者必見の一冊です。
    詳細をみる
  • 困ったらコレ！ 目的、やりたいことで引けるリファレンスです。
    困ったらコレ！ 目的、やりたいことで引けるリファレンスです。
    詳細をみる
  • 保守性の高いCSS設計を学べる一冊！ BEMと対比したPRECSSの手法について解説しています。
    保守性の高いCSS設計を学べる一冊！ BEMと対比したPRECSSの手法について解説しています。
    詳細をみる

WebTerm - Recommended tools

WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。

WebTerm Logo

WebTerm

Browser Terminal Sandbox for Learning CLI

開く

All Cheatsheets

エンジニア・プログラマー向けの便利なチートシートを多数まとめています(SP/Tablet/PC対応)
すべてのチートシートを見る