Dynamically Resize a Web Page with CSS Flex and Media Queries

📅 October 16, 2023
“Must I use floats and relative positioning?”

Have you ever visited a modern web site and resized your browser window only to notice that the entire site changed appearance as the browser width was adjusted? Have you visited the same site on a desktop computer and then on a mobile device and witnessed the same site content but organized differently?

How do they do that?

The answer is with a recent CSS (Cascading Style Sheet) property called a flex box that, when combined with a CSS media query using @media, will rearrange the content of a web page dynamically within the browser without needing to reload the entire page.

Gone is the hassle of floats, extra divs, absolute positioning, and endless adjustments. Now, we can achieve a more flexible result with minimal HTML and CSS.