この記事はなに？
CSSでレイアウトを組んでいて、「なんで勝手に縮むの？」「なんで高さがビローンって伸びるの？」と困ったことはありませんか？
それは、Flexboxの 「デフォルト値（初期値）」 が悪さをしている（あるいは気を利かせて仕事をしまくっている）からです。
「指定していないプロパティ」がどう振る舞うのか。
忘れた頃にやってくるこの仕様を、備忘録としてまとめました。
1. 親要素（Flex Container）のデフォルト値
display: flex; を指定した親要素側のプロパティです。
特に align-items: stretch は、意図せず高さが伸びてしまう原因No.1なので要チェックです。
| プロパティ | デフォルト値 | 挙動・ポイント |
|---|---|---|
flex-direction |
row |
左から右へ「横並び」になります。 ※一般的な横書きサイトの場合 |
flex-wrap |
nowrap |
折り返しません。子要素が親より大きくても、無理やり一行に収まろうとします（または親からはみ出します）。 |
justify-content |
flex-start |
主軸（通常は横方向）に対して「左詰め（始点寄り）」になります。 |
align-items |
stretch |
【重要】 交差軸（通常は縦方向）に対して、親の高さ一杯まで引き伸ばされます。 |
align-content |
normal |
複数行になった際、行ごとの間隔はコンテンツの高さに合わせて（stretchのように）埋められます。 |
2. 子要素（Flex Item）のデフォルト値
Flexboxの中に入っている子要素側のプロパティです。
flex-shrink: 1 がデフォルトであるため、「幅を指定したはずなのに勝手に縮む！」ことがよく起きます。
| プロパティ | デフォルト値 | 挙動・ポイント |
|---|---|---|
flex-grow |
0 |
親に余白があっても、自分からは伸びません。 |
flex-shrink |
1 |
親の幅が足りなくなると、自動的に縮みます（0ではありません）。 |
flex-basis |
auto |
コンテンツの中身、または width プロパティの値が基準サイズになります。 |
align-self |
auto |
親の align-items の設定を継承します。 |
order |
0 |
HTMLのソースコード順に並びます。 |
一括指定 flex に気をつけよう
プロパティ単体のデフォルト値と、一括指定プロパティ flex を使った時の挙動は少し異なります。
一括指定は便利ですが、その中身に何が含まれるのか知っておくと、不要な指定をせずにすみます。
何も書かない（デフォルト状態）
flex-grow: 0flex-shrink: 1flex-basis: auto
flex: 1 と書いた場合
flex-grow: 1flex-shrink: 1-
flex-basis: 0%（※autoではなく0%になる点に注意！）
Chrome のデベロッパーツールなら、各プロパティーの値を▶を押すことで展開して確認することができます。
どれがどの値だったか忘れてしまったときは、ご活用ください。
まとめ
Flexboxがおかしいな？と思ったら、まずは検証ツールで Computed（計算済み）の値を見て、これらのデフォルト値が適用されていないか確認するのが解決の近道です。
Chrome の デベロッパーツールには、 flex のデバックが簡単にできる機能が搭載されているので、活用すると良いと思います。