flex
参考：
目次
概要
参考：
使い方
参考：
もう迷わない！ Flexbox の使い方を徹底解説 | Web Design Trends
Flexbox の各プロパティの使い方を詳しく解説 | コリス
要素の幅
- flex：一括指定
- flex-grow：伸長係数
- flex-shrink：縮小係数
- flex-basis：基準寸法
参考：
伸長 (flex-grow)
参考：
Flexbox で枠の幅をコンテンツの幅に合わせたサイズにする | iPentec
折り返し (flex-wrap)
フレックスボックスを折り返さずに表示する。
.nowrap {
flex-wrap: nowrap;
}Code language: CSS (css)フレックスボックスを折り返して表示する。
.wrap {
flex-wrap: wrap;
}Code language: CSS (css)フレックスボックスを折り返して逆順に表示する。
.wrap-reverse {
flex-wrap: wrap-reverse;
}Code language: CSS (css)参考：
レイアウト
参考：
中央寄せ
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}Code language: CSS (css)参考：
実は超簡単だった！Flexbox を使って画面中央に表示させる方法 | Pizzamanz.net
Vertically center and left-align a column of flex items – Stack Overflow
右寄せ
.wrapper {
display: flex;
justify-content: flex-end;
}Code language: CSS (css)参考：
右寄せの方法は結局 flex が一番良さそう | JavaScript に関するお知らせ
端揃え
justyify-content：端揃えの配置を指定する。
配置の指定
flex-start：左寄せ／軸の開始方向に揃える。(デフォルト)flex-end：右寄せ／軸の終端方向に揃える。center：中央揃えspace-between：アイテムの間隔を均等に割り当てる。space-around：両端を含めてアイテムの間隔を均等に割り当てる。
参考：
Flexbox で左寄せ／中央寄せ／右寄せを指定する方法 | Web Design Trends
justify-content の使い方／アイテムの配置する位置を指定する | SHU BLOG
justify-content プロパティ | HTML5 & CSS3 リファレンス
Flexbox で要素の左右中央寄せ／均等割り／右寄せの方法 | レンタルサーバーナレッジ
justify-content プロパティの意味と使い方 | できるネット
代表的な justify-content と特徴 – Qiita
justify-content | HTML クイックリファレンス
交差方向の揃え
align-items：親要素に付与すると子要素全てに作用する。align-self：子要素自身に指定する。
配置の指定
normal：デフォルトflex-start：上揃え／軸の開始方向に揃える。flex-end：下揃え／軸の終端方向に揃える。center：中央揃えbaseline：ベースラインを揃える。stretch：要素を交差方向の幅いっぱいまで広げる。
参考：
align-items の使い方、配置する方向を指定する！ | SHU BLOG
align-items プロパティの意味と使い方 | できるネット
align-items – flex アイテムの垂直方向の揃え方 | CMAN
縦方向中央に配置したいとき、align-items: center; が効かないときに確認すること | b.
部分的に揃え方向を変える
参考：
CSS の Flexbox で最後の1つだけ右寄せ、または最初の1つだけ左寄せにする方法 | WEMO
Flexbox で最後の1つだけ右寄せや下寄せにする方法！ | 模写修行メディア
画像がはみ出る
参考：
Flexbox で並べた画像がはみ出たり伸びたりしてしまうときの対処法 | コトダマウェブ
何で画像の枠がはみ出すの！？ max-width: 100% だけではダメ！そんなときの解決法 | ビバりずむ
親要素の幅を内容に合わせて縮めたい
参考：
Flexbox の親要素を可変の子要素に合わせる – Qiita
バグ
参考：
Flexbox のバグに立ち向かう／バグまとめ – Qiita
Flexbox adding 1px left margin in Safari – Stack Overflow
まとめ／チートシート
参考：
Flexbox で使いたい 40個のプロパティ | Grab