フレックスボックスの使い方 (flex) [CSS]

flex

参考：

flex | MDN

flex-grow | MDN

flex-shrink | MDN

flex-basis | MDN

基本

参考：

フレックスボックスレイアウト | MDN

フレックスボックスの基本概念 | MDN

使い方

参考：

Flexbox のチートシートを作ったので配布します | Webクリエイターボックス

Flexbox の各プロパティの使い方を詳しく解説 | コリス

A Complete Guide to Flexbox | CSS-Tricks

flex-wrap

フレックスボックスを折り返さずに表示する。

flex-wrap: nowrap;

フレックスボックスを折り返して表示する。

flex-wrap: wrap;

フレックスボックスを折り返して逆順に表示する。

flex-wrap: wrap-reverse;

参考：

flex-wrap | MDN

中央寄せ

.wrapper {
  display:         flex;
  justify-content: center;
  align-items:     center;
}

参考：

実は超簡単だった！Flexbox を使って画面中央に表示させる方法 | Pizzamanz.net

画像がはみ出てしまう

参考：

flexbox で並べた画像がはみ出たり伸びたりしてしまうときの対処法 | コトダマウェブ

何で画像の枠がはみ出すの！？ max-width:100% だけではダメ！そんなときの解決法 | ビバりずむ

バグ

参考：

flexbox のバグに立ち向かう バグまとめ – Qiita

flexbox adding 1px left margin in Safari – Stack Overflow