From the course: Learning Responsive Web Design in the Browser

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Create responsive layouts with Flexbox

Create responsive layouts with Flexbox - WordPress Tutorial

From the course: Learning Responsive Web Design in the Browser

Start my 1-month free trial

Create responsive layouts with Flexbox

“

- [Voiceover] We're moving into a new era where web layouts are concerned, and new technologies like Flexbox and CSS Grid makes design in the browser much easier and more exciting. To see what I mean, let's look at how we can use Flexbox to change the layout of some of our content. Right now, these three boxes at the top and the three levels below display vertically across all screen widths. That means as I widen the screen here you'll see the boxes always stack one on top of another. I want them to appear horizontally on wider screens as three buckets with equal heights. Now, I could do that using the good old float and clear techniques, but that would result in clunky CSS and boxes with different heights because the contents are different for each box, so instead I'll use Flexbox, it's way easier, way more efficient, and we can do a lot more with it, so let's see how that works. Now, both these areas are actually pretty much identical, we have three boxes next to another, so I'm…

Contents