Learn This Flexbox Item Alignment Trick!

[@alexmacol228]

Thank you so much! Your explanation is so clear and I never knew that trick! Thank you!

[@mohammadabbas1623]

Underrated channel

[@dmtrmrv]

Thank you for your comment. Means a lot!

[@DMC888]

Hopefully not for long

[@CadrienEverglade]

I used to justify-content: space-between for these. Always felt kind of like a hack-job. Thank you.

[@dmtrmrv]

Thank you for your comment! Yes, 'space-between' isn't always effective for use cases like this one. Glad you found the video helpful. It's a nice technique to have in your CSS toolbox. Forgot to mention in the video but it's actually a part of the official spec: www.w3.org/TR/css-flexbox-1/#auto-margins.

[@clevermissfox]

Nice!! Auto margins for block direction also works using grid, not just flex! I find grid simpler when I’m going for a stacked layout like each of these cards; auto block start margin and gap all still will work! And I like having more control over the alignment properties (justify-items, justify-self, align-content etc)

[@dmtrmrv]

Yeah, it's a pretty handy trick to know! Thank you for mentioning it works with Grid too, I should have totally added it to the video :(

[@clevermissfox]

Only because its just one less lime to write when youre not swapping flex direction ​@@dmtrmrv

[@RC-Flight]

Now that was an excellent video! Thanks for taking the time to make it!!! 🇨🇦

[@dmtrmrv]

Thank you. Glad you found it helpful!

[@Allformyequine]

Looking forward to how this channel progresses! So far it's awesome!

[@toddribnek6660]

It's nice to see classic css layouts and patterns. There's a lot of tailwind overused lately. Also, the video is good length. 👍

[@dmtrmrv]

Thank you! I think foundations don't get enough attention but are extremely important and help understand any framework better.

[@Lucas-qr7ul]

Tailwind is just css in a better way. You are just writing it directly into the class which makes development so much quicker. You won't be able to do anything with tailwind if you don't know css.

[@RickBeacham]

Super useful! I've seen this issue many times. Solute!

[@dmtrmrv]

Glad to hear it was helpful!

[@cyberspider78910]

This is super great trick....will save a lot of time to me

[@Kiichyy]

Nice technique, thank you!

[@dmtrmrv]

Thank you! Glad you found it helpful!

[@tipstricks2019]

Thank you Bro❤

[@dmtrmrv]

You are welcome, glad the vid was helpful!

[@abdul-azeem100]

Thanks for this rich content, can't grid be used to, because when i hit cases like this I used grid because i don't want to be changing flex direction, need your insight on this.

[@dmtrmrv]

Thank you! Indeed, Grid and Subgrid can achieve similar effects. I'll likely create a quick follow-up video to compare the approaches. I've used Grid for a similar layout at work and really enjoyed it.

[@titiloxx]

Good video dude!

[@dmtrmrv]

Glad you enjoyed it!

[@stancobridge]

Very nice video

[@dmtrmrv]

Thank you!

[@diegodmacedo]

Wow, thanks for the tip, bro! Got one more follower!

[@dmtrmrv]

Thank you and welcome!

[@yuujiro821]

thanks bro !

[@dmtrmrv]

You are welcome!

[@gokhanozturk3027]

Why not just use flex-grow for the main content area?

[@dmtrmrv]

That's certainly a perfectly valid option. If it works for the layout, there is nothing wrong with using it. The margin trick could be useful in cases where you can't or don't want to use flex-grow.

[@hardwired66]

Ty

[@DVineMe]

Why not simply set .card__description to flex: 1?

[@dmtrmrv]

That's a valid option and there is nothing wrong with using it. The margin technique could be useful in cases where you can't or don't want to use flex-grow.

[@cwirus99]

For the spacing of the card elements - why not just use grid (or flex even) with a gap property? EDIT: Later on in the video you even change the card layout to use flex-col. A gap would be much more elegant solution. It would even fix the issue, that by applying margin: auto the spacing brakes. EDIT 2: nvm :)

[@dmtrmrv]

Thanks for the comment! Yeah, I really like using gap! It's not perfect for all use cases, and I still find myself using the "+" technique on some layouts, but it's really elegant!

[@cwirus99]

@@dmtrmrv It's sure not perfect, more often than not you need different spacing for different elements and then gap is not ideal.

[@irfansaeedkhan7242]

i always get stuck on this, i found you very late

[@dmtrmrv]

Oh man! Sorry to hear, well, better late than never!

[@jonasgpayer]

Nice video, but very annoying that the video change between the code screen and you. Better if it only show you at the beginning and at the end.

[@dmtrmrv]

Thanks for the feedback. You aren’t the first to notice that. I’ll change the format a bit for next videos.

[@theCluck]

I would add to say that having a video of yourself in a bubble in one corner is another option so you can still engage with the audience when you’re explaining the code etc, without having the camera switching so much throughout the video.

[@dmtrmrv]

If I'm being 100% honest, I tried to do the picture-in-picture thing from the very first dev video and failed to figure it out quickly. So, I decided to just do the cuts for now. I'll figure it out!

[@solvedfyi]

​@@dmtrmrvCounter opinion. I don't think there's a problem switching to you during the video. Maybe if you're an avatar in the corner or side of the screen that shrinks and grows as you need to talk to us it wouldn't be jarring for some.

[@PHuncho-c3t]

Honestly do what’s comfortable for you, there’s plenty tutorials on the internet that are just awful. Considering your quality this is a drastic change to what’s available, don’t worry about it.

[@ThanasisKapelonis]

The cuts between you and the code really break the flow of enjoying the video. I’m trying to read the code and I can’t. Please put yourself as a Picture in Picture video in a corner of the screen. That’s how we can focus on the video and also see your facial expressions.

[@dmtrmrv]

Thank you for the suggestion. I’ll def do it for the next video.

[@blackcelebration3588]

Привет! Также можно просто добавить margin-top: auto к цене, эффект будет тот же самый.

[@clevermissfox]

Correct but it’s not a logical property so if the writing direction were to change that margin would still be on the top , not on the block-start and you would have to manually flip it. Logical properties are super helpful!