🔥 Quick Flexbox Hot Tip

[ngck]

I'd just put justify-content: space-between; in the container. :)

[eljefe]

Definitely like this. Keep up the good work Wes

[abhigovula]

yes please, want more of these little tips

[SimonVane]

Thanks Wes, I like these quick tips. It is basic flex box but what's nice is that you're showing a real use case that is very easily solved by using it.

[rickstewart]

Hey Wes a +1 vote from me on the quick tips idea. These targeted and to-the-point coding bites are a great idea.

[Knards]

Would never have thought of that, although now that you show it, its obvious!

[rafaelojeda]

This little tip is gonna change people's lives! Lol thanks Wes

[YaronRosen]

yes yes yes, more flexbox tips please!!!! super needed

[joshhwb]

Quick reminder if people want to use this method. Omitting the other values from the flex shorthand can cause discrepancies with IE10 and lower.

As others have mentioned, justify-content: space-between on the flex container is just as good!

[omartarek]

It's really cool the quick tip thingy, even if this was "basic", still Flexbox can get pretty tricky sometimes, the times when you know that you want to achieve something and you know Flexbox can definitely do it, but you just don't know how so you keep going with trial and error until you finally reach your goal, anyway love this so much and waiting for more <3

[boomer]

Yep Flexbox can be a real pain, with unexpected behavior at different screen sizes that you need to test. Quick tips like this are good to help people understand.

With flexbox, you need declare a lot of properties to make it robust. Mostly, you need a good working knowledge of the spec to understand the behavior you're trying to achieve. Funnily enough, it's sometimes easier just using block.

I would recommend not using shorthand to start off with: i.e define flex-grow: 0 | 1 and flex-shrink: 0 | 1. Shorthand applies intelligent defaults, but unless you know what they

If using a pre-processor like SASS, you'd potentially indent the following flex properties to provide maximum control and visibility:

.parent
display: flex
flex:
direction:
wrap:

.child
display: flex
flex:
grow:
shrink:
basis:
direction:
wrap

This doesn't even cover order, heights and widths, justifying and aligning.

[intuitivamkt]

Thank you so Michael for your tuturials. They are providing for me to be able to eat and have a room to sleep since I was forced to become a freelance webdesigner. Thank you so much bro!

[alan_tucker]

Hey Wes, would love to see more of these "Quick" videos on Flexbox. Keep up the great work.

[tomerfishaimer]

I think a better solution would be to use justify-content:space-between, that way you get the same effect without the <p> tag spanning the whole width

[fidelseverino]

I don't comment often but these are great. Keep them coming Wes! Thank you 👍🏻

[randito]

Suggestion: Explain the flex: 1 part. Why one? Why not two? Or better, why not 3.14?

[ob]

You can just use
justify-content: Space-between

[husainahmmed]

Awesome !! Want more tips like this one

[davidporterrealestate]

Love your videos, you seem like a cool guy too

[shubhammalik]

Hi!. Can we expect something on Google polymer? It's amazing but not much content on web.
Kudos🍻🍺