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