CSS Flexible Box Layout 早見表

全然覚えられないので、Flexible Box早見表作りました。

Bootstrapドキュメント風に。

flex vs inline-flex

「flex」ブラウザいっぱいに広がって縦に並びます。

「inline-flex」中身に依存した幅をとって横並びになります。

<div class="display: flex">I'm a flexbox container!</div>

<div class="display: inline-flex">I'm a flexbox container!</div>

flex-direction（向き）

方向ユーティリティを使用して、フレックスコンテナ内のフレックスアイテムの方向を設定します。ブラウザのデフォルトは行であるため、ほとんどの場合、ここでは水平クラスを省略できます。ただし、この値を明示的に設定する必要がある状況が発生する場合があります（レスポンシブレイアウトなど）。
.flex-rowを使用して水平方向を設定するか（ブラウザーのデフォルト）、. flex-row-reverseを使用して反対側から水平方向を開始します。

• flex-direction: row;
• flex-direction: row-reverse;
• flex-direction: column;
• flex-direction: column-reverse;

<div class="container" style="display: flex; flex-direction: row;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; flex-direction: row-reverse;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; flex-direction: column;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; flex-direction: column-reverse;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>

justify-content

Justify contentプロパティは、フレックスコンテナーの主軸およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。

• justify-content: start;
• justify-content: center;
• justify-content: flex-end;
• justify-content: space-between;
• justify-content: space-around;
• justify-content: space-evenly;

<div class="container" style="display: flex; justify-content: start;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; justify-content: center;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; justify-content: flex-end;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; justify-content: space-between;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; justify-content: space-around;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; justify-content: space-evenly;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>

align-items

Align itemsプロパティは、すべての直接の子要素に集合として align-self の値を設定します。フレックスボックスでは交差軸方向のアイテムの配置を制御します。グリッドレイアウトでは、グリッド領域におけるアイテムのブロック軸方向の配置を制御します。

• align-items: flex-start;
• align-items: flex-end;
• align-items: center;
• align-items: baseline;
• align-items: stretch; // (ブラウザデフォルト)

<div class="container" style="display: flex; align-items: flex-start;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; align-items: flex-end;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; align-items: center;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; align-items: baseline;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
  <div class="container" style="display: flex; align-items: stretch;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>

align-self

Align selfは CSS のプロパティで、グリッドやフレックスのアイテムの align-items の値を上書きします。

• align-self: flex-start;
• align-self: flex-end;
• align-self: center;
• align-self: baseline;
• align-self: stretch;

<div class="container" style="display: flex; align-items: stretch;">
  <div class="item">Flex item 1</div>
  <div class="item" style="align-self: flex-start;">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; align-items: stretch;">
  <div class="item">Flex item 1</div>
  <div class="item" style="align-self: flex-end;">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; align-items: stretch;">
  <div class="item">Flex item 1</div>
  <div class="item" style="align-self: center;">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>

<div class="container" style="display: flex; align-items: stretch;">
  <div class="item">Flex item 1</div>
  <div class="item" style="align-self: baseline;">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; align-items: start;">
  <div class="item">Flex item 1</div>
  <div class="item" style="align-self: stretch;">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>

フレックスアイテムの比率の制御 ( flex: 1 1 auto; )

• flex-grow: このアイテムがどれだけ余白を得るか。
• flex-shrink: このアイテムからどれだけ余白を削除できるか。
• flex-basis: 伸長や縮小が発生する前のアイテムの寸法はいくつか。

<div class="container" style="display: flex;">
  <div class="item" style="flex: 1 1 auto;">Flex item with a lot of content</div>
  <div class="item" style="flex: 1 1 auto;">Flex item 2</div>
  <div class="item" style="flex: 1 1 auto;">Flex item 3</div>
</div>
<div class="container" style="display: flex;">
  <div class="item" style="flex: 0 1 auto;">Flex item with a lot of content</div>
  <div class="item" style="flex: 1 1 auto;">Flex item 2</div>
  <div class="item" style="flex: 2 1 auto;">Flex item 3</div>
</div>

flex-grow ( flex-grow: 1; ) 伸長係数（余白を得るか）

このアイテムがフレックスアイテムの主軸方向の寸法のフレックス伸長係数（余白を得るか）を設定します。

<div class="container" style="display: flex;">
  <div class="item" style="flex-grow: 1;">Flex item with a lot of content</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex;">
  <div class="item" style="flex-grow: 2;">Flex item with a lot of content</div>
  <div class="item" style="flex-grow: 1;">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>

flex-shrink ( flex-shrink: 0.6; ) 縮小係数

flex-shrinkは フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは flex-shrink の数値に従って縮小して収まります。

使用時は flex-shrink は flex-grow や flex-basis などの他のフレックスプロパティと共に使用され、ふつうは flex の一括指定を使用して定義されます。

<div class="container" style="display: flex;">
  <div class="item" style="width: 100%;">Flex item 1</div>
  <div class="item" style="flex-shrink: 1;">Flex item 2</div>
</div>
<div class="container" style="display: flex;">
  <div class="item" style="width: 100%;">Flex item 1</div>
  <div class="item" style="flex-shrink: 3;">Flex item 2</div>
</div>

Auto margins

Flexboxは、フレックスアライメントと自動マージンを組み合わせると、かなり素晴らしいことができます。

<div class="container" style="display: flex; flex-wrap: nowrap;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; flex-wrap: nowrap;">
  <div class="item" style="margin-right: auto">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<div class="container" style="display: flex; flex-wrap: nowrap;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item" style="margin-left: auto">Flex item 3</div>
</div>

flex-wrap フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいか

flex-wrapプロパティは、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。私は、レスポンシブル対応でアイテムを一行並びに変更するのに使ったりします。

• flex-wrap: nowrap;
• flex-wrap: wrap;
• flex-wrap: wrap-reverse;

<div class="container" style="width: 300px; display: flex; flex-wrap: nowrap;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">Flex item 4</div>
  <div class="item">Flex item 5</div>
  <div class="item">Flex item 6</div>
</div>
<div class="container" style="width: 300px; display: flex; flex-wrap: wrap;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">Flex item 4</div>
  <div class="item">Flex item 5</div>
  <div class="item">Flex item 6</div>
</div>
<div class="container" style="width: 300px; display: flex; flex-wrap: wrap-reverse;">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
  <div class="item">Flex item 4</div>
  <div class="item">Flex item 5</div>
  <div class="item">Flex item 6</div>
</div>

まとめて書いている最中に、「あれ、これ、bootstarapドキュメントのインスペクターみたらいいじゃないのか…」と思いました（汗

でも記念すべき100記事め！！