アスペクト比とFLEX

css 2022年8月5日

ボックスの縦横比（アスペクト比）の悩みはこれで解決

レスポンシブなどでボックスのアスペクト比を保持したい場合、今まではマイナスマージンとか、JSを使ったりとか、イラッっとくる方法を使っていたかと思います。
最近ではCSSでアスペクト比を保持できるようになって、作業効率がぐっとあがりましたね。

YoutubeやGoogle Mapをiframeでの埋め込む場合など、非常に助かります。

See the Pen flex & aspect by bluehipstudio (@bluehipstudio) on CodePen.

aspect-ratio: 16 / 9;

HDのアスペクトサイズである16：9を保持する場合は上記の一行書くだけなので効率が良いです。

上記の例はABCDのボックスをflexで整列させているのですが、ボックス同士の隙間をマージンではなくgapで設定しています。
gapプロパティって昔からありましたっけ？最近flexに追加された気がします。

gap:1%;

とするだけで、上記の例の様にボックスとボックスの間に隙間を与えることができます。
aspect-ratioで割合を保持しているので、間隔も固定ではなくてボックスの大きさにあわせて変化させるため”％”を使ってみました。