The biggest CSS headache is "How do I vertically center something". Throw away your migraine pills, it's now been solved with Flexbox!
.parent {
display: flex;
align-items: center;
justify-content: center;
}
Keeping this code note super short. Because I'll be spending the entire next month posting about Flexbox on my Twitter and Instagram Account!
The series is called #Flexbox30. You will learn flexbox in 30 days with 30 code tidbits. You heard that right, a new code tidbit every day for 30 days 💪 It starts September 1st 🔥
If you're interested in this FREE series, make sure you follow me on:
- Instgram > @samanthaming
- Twitter > @samantha_ming
Thanks for reading ❤
Say Hello! Instagram | Twitter | Facebook | Blog | SamanthaMing.com
Top comments (14)
You have different ways to handle this, I'll give you a cool tip:
Using place-[what] instead of align and justify:
this is equal to:
But with less css, this is cool when you have to define different complex flexbox layouts, and you want to save some lines of css.
CONS: obiviously IE doesn't support this shorthand.
Super cool! Thanks for sharing! 🤩
Thanks for the tip, I did not know about the
place-shorthands!Thanks for the tip!!! I didn't know place- before. A note for developers who are still working on IE - it doesn't support on either Edge or IE
I know this is a big mess, but fortunately I've maded a mixin to handle this:
dev.to/nicolalc/a-mixin-to-rule-th...
Whoa!! Nice one! I’ll add this to the code notes 👏 thanks for sharing 😊
That sounds amazing
That's great Samantha. Flexbox is really amazing to learn.
Absolutely! I think it’s a must know at this point! 😄 Hope you will be following the new series! 😆
I will 😅
Thank you! <3
You’re welcome 😊
Thanks for this!
You’re welcome! 😊