"display:flex"は便利（２）
公開日：
最終更新日：
要約
本記事では、WebレイアウトにおけるCSSのdisplay:flexの活用について解説しています。具体例として「音の高さ」「音の長さ」を横スクロール可能なグリッド表示に整える方法を紹介し、ボタンの常時表示やflex-growでの柔軟な横幅調整の工夫を述べています。px指定との比較も触れつつ、実際の開発過程を共有しています。
引き続き，レイアウトにdisplay:flexを使いながら修正しています。
例えば，下のように「音の高さ」「音の長さ」をグリッド表示させたいとき，
display:flexを使うと綺麗にレイアウトできます。
このような形です。
（左右にスクロール表示させています。）
「追加する」ボタンは常に表示するように，
レイアウトを変えた方が良いかもしれません。
あとは，flex-growをうまく使い合わせると，
音価に合わせた横幅を綺麗に作れるかも，しれません。
（でも，その程度なら，pxで直打ちした方が確かかもしれませんね）
以上，display:flexを使いながらの，開発過程でした。