概要
水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュール。CSS Flexboxはコンテナ（親要素）、アイテム（子要素）という2つの要素によって構成される。
このことは、flexboxレイアウトを使ってレイアウトをしたい場合には、それらのボックスを囲むコンテナ要素が必要になるということを意味する。
【参考】https://webdesign-trends.net/entry/8148
.flex-container {
display: flex;
}CSS flexboxのコンテナ（親要素、f-container）
- flex-direction：アイテムの並び順を指定する
- flex-wrap：アイテムの折り返しを指定する
- flex-flow：アイテムの並び順と折り返しを一括で指定する
- justify-content：アイテムの水平方向の位置を指定する
- align-items：アイテムの垂直方向の位置を指定する
- align-content：アイテムの行の垂直方向の位置を指定する
CSS flexboxのアイテム（子要素、f-item）
- order：アイテムの並び順を指定
- flex-grow：アイテムの伸び率を指定
- flex-shrink：アイテムの縮み率を指定
- flex-basis：アイテムのベースの幅を指定
- flex：アイテムの伸び率、縮み率、ベースの幅を一括指定
- align-self：アイテムの垂直方向の位置を指定
flexboxで横並び＋左右中央揃え
内容物の親要素にdisplay: flexを指定する。この時点で横並びとなるが、このままでは左詰めとなるため、justify-content: centerを指定して左右中央配置としている。
ただし、inline-blockで横並びにした時とは違って画面幅が狭くなっても自動的にカラム落ちして1カラムにはなってくれない。
.btns { /* 内容物の親要素 */
display: flex; /* flexbox化 */
justify-content: center; /* 主軸方向に中央揃え */
background: #e7e7e7;
}flexboxでレスポンシブ対応
flexboxレイアウトで縦並び／横並びを変更するには、flex-directionプロパティで「主軸」の方向を変更する。上から下の縦並びにしたい場合はcolumn、左から右の横並びにしたい場合はrowを設定する。これをメディアクエリを挟んで切り替えることで縦並び／横並びを自由に変更することができる（column-reverse、row-reverseで逆順に並べることもできる）。
.btns {
display: flex; /* flexbox化 */
flex-direction: column; /* 主軸を上から下に変更 */
align-items: center; /* 交差軸方向に中央揃え */
background: #e7e7e7;
}
@media screen and (min-width: 768px),print {
.btns {
flex-direction: row; /* 主軸を左から右に変更 */
justify-content: center; /* 主軸方向に中央揃え */
}
}flexboxの「軸」とjustify-content / align-itemsの挙動
flexコンテナには「主軸（main axis）」と「交差軸（cross axis）」というものがあり、flexアイテムは主軸に沿って並ぶようになる。justify-contentは、厳密には「左右方向」の位置ではなく「主軸方向」の位置揃えをするためのプロパティ。そのためflex-direction: columnで主軸方向が上から下に変更されると、「ボタンの左右中央揃え」としては機能しなくなる。
一方、主軸と90度でクロスする軸のことを交差軸（cross axis）といい、交差軸方向のアイテムの位置揃えはalign-itemsプロパティで行う。主軸の方向がcolumnとなっている時、左右方向は交差軸方向を制御するalign-itemsで設定することになるので、モバイル用のレイアウトではalign-items: centerとすることで左右中央揃えを実現する。
- flexアイテムは主軸に沿って並ぶ
- 主軸方向のアイテムの整列を指定するのがjustify-content
- 主軸がrowである時、「左右方向」を指定するのはjustify-contentになるが、軸がcolumnに変わると「左右方向」を指定するのはalign-itemsに変わる
flex-grow
flex-growはflexアイテムの大きさを伸長させるプロパティ。flexアイテムの大きさそのものが変わるわけではなく、親要素に余白がある場合に、その余白部分を指定した比率でflexアイテムに反映させる。
なお、flex-grow: 0（初期値）のとき、flexアイテムの横幅はそれぞれの最小の幅となる。flexアイテム中のテキストが2文字の場合は2文字分の横幅、4文字の場合は4文字分の横幅となる。
.item01 {
flex-grow: 1; /* .item01と.item02が1:2の比率で引き伸ばされる */
}
.item02 {
flex-grow: 2;
}【参考】
https://zero-plus.io/media/flex-grow-how-to-use/
flex-shrink
flex-shrinkは、flexアイテムの縮小率を設定できるプロパティ。
flexアイテムのflex-shrink: 1;（初期値）の場合、親要素の幅を超えるときに均等な幅となる性質がある。そこでflex-shrinkを使用すれば、親要素の幅からはみ出た部分を縮小することができる。flex-shrinkを使用する場面は、以下の2通りある。
- 要素を縮めたいとき
- 要素を縮めたくないとき
flex-shrinkでは要素を縮めるだけではなく、「縮めない」指定も可能。縮めたくない要素にflex-shrink: 0;を指定することで解決できる。
/* 親要素 */
.flexbox {
display: flex;
text-align: center;
border: 1px solid #000;
width: 70%;
}
/* .flexboxの子要素（3つ） */
.flex-item {
width: 40%; /* 40×3=120%で50%はみ出す */
}
.flex-item.item01 {
flex-shrink: 1; /* はみ出した分をどのくらいの割合で負担するかを指定する */
}
.flex-item.item02 {
flex-shrink: 2;
}
.flex-item.item03 {
flex-shrink: 3; /* 負担する割合が一番多いので、.item03が一番縮む */
}