メモ：flex-wrapのセンター寄せ
やりたい事
- 子要素を並列配置
- 画面幅をはみ出した子要素を折り返す
- 折り返した子要素は、左から並べる
- 要素全体を左右中央寄せ
- 最後の行も他の行とズレない
- 画面サイズが変更されても上記を満たす(レスポンシブ)
基になるコード(base.html) の実行
(画面幅を変えると挙動が確認できる)
基になるコード：base.html
問題点
margin: auto;だと余った要素がずれる- ネットで調べた、親の親要素を
inline-blockにしても効果がない
- 親要素はある意味すでに左右中央に配置されている
画面幅 >= 親要素の幅 の時には
親要素の幅 = 子要素の幅の合計
画面幅 < 親要素の幅 になると子要素が折り返す
親要素の幅 = 画面幅 に変化 ※子要素の１行の幅ではない
- ①、親要素の中で折り返した子要素を、折り返した見た目で左右中央に寄せる
②、親要素の幅を、折り返した子要素の１行の幅に合わせる
のどちらかが必要だが、それらをcssだけで解決する手法が見つけられない
JavaScriptを使えば上記の②ができそうなのでトライ
実行するコード：test.html
test.html の実行
(画面幅を動かしていくと、段階的に area の幅が変わる)
とりあえずやりたい事は満たしているが、
CSSだけのやり方があるかもしれないので継続課題としたい
これを書いた数日後、級友から grid の存在を教わったので追記
grid を使うと、CSSだけで上記の①が実現できた
実行するコード：grid_test.html
grid_test.html の実行
素晴らしい…
さらに数日後、思いついたことを試したので追記
上記①を、既知の手法だけでやったみた
実行するコード：CSS_only.html
css_only.html の実行
わかり易いようにボーダーを消さずに実行：with_border.html の実行
疑似要素を使うというサイトが幾つかあったが、どれも列数固定だった。
列数可変に対応させるにはやはりスクリプトが必要なものばかり。
ふと思いついた手法を試してみたら一応できたが、美しくない気がする…
参考になったサイト
（個人的まとめ）よく使うflexboxの設定
HTMLElement.offsetWidth
window.getComputedStyle() で要素のスタイルを取得する
CSS Gridを使ったレスポンシブ対応の基本レイアウト
【CSS】グリッドレイアウト、縦や横で要素の中央揃え方法