Flexbox Masonry Layout (Explained with Math)

https://fed.brid.gy/r/https://frontendmasters.com/blog/flexbox-masonry-layout-explained-with-math/

You know the trope about "when you're in the know about something, you see every example of that something which is bad, and you feel bad"?

Like "teach someone typography, and they will examples of it done wrong every day", that sort of thing.

Well, one of the things I have knowledge about and experience with is cinematography - film & video. And here's one I run into regularly.

I watch an online video.

On my 16:10 monitor.

The browser letterboxes it into a 16:9 area of the screen.

It's some bloody stupid video site with vertical video, so it's 1:2 (or even worse), pillarboxed into the browser viewport.

And then the video maker is commenting about another video, so it's a 16:9 letterboxed into a tiny section of the pillarboxed video, with enormous borders on the top and bottom.

This hurts my head, even without considering that it results in trying to watch a video that takes up about 5% of the screen.

#letterbox #pillarbox #video #aspect #AspectRatio #VerticalVideo #argh #aargh #TeachAManToFish

My 2 cents to the discussion about #Apple‘s upcoming #foldable #iPhone and #foldablePhones in general.

In terms of #aspectRatio, there is what I consider a perfect one. That’s the one where the ratio doesn’t change when you fold it.

a:b=b:2a
a:b=square root 2

In Germany we are used to it because #DIN standardized the An paper format. Those nerds even made it so that A0 has the area of 1 square meter.

#Instagram allows users to post horizontal and vertical photos in the same carousel: https://zorz.it/FQWID

#MattGrowcoot #AspectRatio #carousel #horizontal #Meta #orientation #PhotoCarousel #vertical #photos