以前、上の記事でCSSのレイアウトがわかってないなという話を書いたが、 CSSを一通りざっと勉強して、（古いブラウザのことを無視すれば）flexboxだけわかってれば大体のレイアウトは組めそうなことがわかった。

flexbox

flexbox自体の説明はググればたくさんあるのでしないとして、設計方針としては、基本的には、

display: flexとするだけで横並びになるので、行単位で設計する
子要素がフォームやボタンのような部品系なら、
- 子要素の並びは
  justify-content（子要素が並ぶ方向）と
  align-items（子要素が並ぶのと垂直方向）で決める
子要素がレイアウトのためのコンテナ要素なら、
- 子要素の幅はflex-containerのwidthを％指定して調整
- 等幅に並べるならwidthは不要で、子要素全てflex-basis: autoとして自動で引き延ばしてもらえばOK
  - その上で中身同士の比率の指定をするなら、中身のflex-growで調整（ただし注意点あり。後述）

でなんとなくイメージが形になる。

自分としてはまだCSSに不慣れなので、各要素のwidth/heightの値を指定してあげないと意図したとおりにレイアウトされない部分がいろいろあるのに注意が必要な状況。

迷ったこと

試している中で迷ったことが２つ。

自分では float: right をつけるしかないのかな、そうするとflexboxとfloatが共存して気持ち悪いな、と思っていたのだけど、「flexbox 右寄せ」でググったら、例えばココのように、marginを使った方法がたくさん紹介されてた。

サンプルは以下。
これですっきり実現できた。

子要素にflex-growで数字を指定すれば、子要素同士の幅や高さの比率指定ができる。

ただし、この比率指定は 余白部分の割り当て比率 であるため、子要素がもともと持っている幅（内部のテキストの幅など）があると、行や列全体に対する割合にはならないことに注意が必要。

厳密に全体に対する割合を指定したいときは、widthで％指定を使う。