このブログで以前に書いた「ブロック全体は中央揃え+中の複数画像は左寄」をJavaScriptを使わないでCSSのみで実現できる方法が見つかったので、紹介。
「Webクリエイターボックス」の以下の記事のコメント欄で質問したら、「和草イデハナ」さんから「Media Queriesを使えば良いのでは」という返信をもらい、やってみたらうまくいった。Media Queriesを使ってウインドウのmax-widthの幅に応じて、コンテナボックスに適切なwidthを設定する。
≪日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス≫
http://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet/
Media Queriesを使ったサンプルが以下。
https://ok2nd.github.io/tool/html/thumbnail-sample-media-queries.html
<div id="contents"> <div id="gallery"> <span style="background-image: url('thumbs/001.jpg')"></span> <span style="background-image: url('thumbs/002.jpg')"></span> ... </div> </div> <style> #contents { margin: 0 auto; } #gallery { display: flex; flex-wrap: wrap; align-items: center; width: 992px; margin: auto; } @media screen and (max-width: 1052px) { #gallery { width: 744px; } } @media screen and (max-width: 804px) { #gallery { width: 496px; } } @media screen and (max-width: 556px) { #gallery { width: 248px; } } #gallery span { display: flex; background-position: center center; background-repeat: no-repeat; margin: 4px; width: 240px; height: 240px; background-size: contain; } </style>