Micro Lesson #6 — Center HTML elements using flexbox

Imagine this: you add new elements to your site and, by default, they're all placed in the top left corner. That's web design for you. Using padding and margin to center multiple elements is a recipe for disaster when it comes to responsive design. And things like text alignment and transforms lead to other inheritance issues.

Instead, with the power of flexbox, we're able to have full control of our alignment and justification properties. With the parent element selected (whether it’s a Div block or a Container or a Section), apply the flexbox display property. Suddenly, layout superpowers are unlocked.

With the click of two buttons, you can align and justify your elements perfectly within the center of its parent element. That's it. No need to individually position your elements using absolute positioning or making tedious adjustments with padding, margin, and gaffer tape.

----------

[cybyr_]

I've only been using Webflow for 2 days but these videos are amazing

[thefinartist]

haha this was amazing. and incredibly helpful. but truly hilarious.

[Kuromiicat]

Is it ever advantageous to not use flex box? Or should I essentially be setting every section/container/div to flexbox for basic page structures?

[thenamelessone]

This doesn't work for me with Embed Code :( I've tried every combination of everything!!!

[JEXDESIGNS]

what do you set the children of the flexbox to? As i can never get this to work.

[LukeSimshauser]

Did you just put Amy Poehler next to Mark Twain?

[xamznerol]

at 0:30 you can see the coffee moving ;)