HTML, CSS, & JavaScript All-in-One For Dummies

Chapter 2

Getting Fancy with Flexbox

IN THIS CHAPTER

Getting to know Flexbox

Setting up your flex container

Aligning flex items

Centering stuff with Flexbox

Making flex items do your bidding

Flexbox is the first CSS layout technique that works for the modern web.

—PADDI MACDONNELL

Web design geeks use the term brittle to describe any page layout system that’s so baroque and overengineered that it works under only very constrained conditions and breaks when even some trivial aspect of those conditions changes. The opposite design philosophy can be described as a rigid page layout, where everything is coded in a way that nothing can possibly change no matter what device or screen or other variable you throw at the page.

What both brittle and rigid page layout designs lack is the simple and beautiful trait of flexibility. Rigid layouts have no flexibility whatsoever, whereas brittle layouts fall to pieces when even a tiny amount of flex is introduced. Web design geeks knew all that, ...