Why inline-flex is my new favorite display value

[@FaizanAli-visiontech]

In this situation, I always create the parent div with flex and control by a gap. That's the way I prefer. I hate margins; I don't use them unless I have to because of RTL and responsiveness. Better to handle responsiveness via parent than with margins

[@jiysea]

I agree, flex + gap ftw!

[@mistertoups]

yeah but making the parent a flex container affects all other siblings so it will make your layout even more complicated to maintain. inline-flex means writing less css and html, and the css and html you have left stays clearer and easier to parse

[@marmunator]

If you are worried with margins affecting RTL and responsiveness, I recommend reading about margin-inline-start, margin-inline-end, margin-block-start, margin-block-end (same values for padding). These are the same as margin+direction, but will take into account the reading direction. For example, lets say you have a multilingual site and you have the sites main language as LTR (left to right), if you were to set a margin right, then change to another language that has RTL (right to left), that margin would still be on the right side, causing layout issues. However! If you set the margin as margin-inline-end, the margin-inline-end will take into account the reading direction and converts the margin accordingly without affecting the layout. Meaning a margin-inline-end for LTR is the same as margin-right and for RTL is the same as margin-left. Same principle can be applied to the top and bottom directions with the margin-block values for example margin-block-end

[@Jongo1]

Same here. And if the items are related, like in this video, then it makes sense to seperate them based on context, it makes your code easier to read and maintain.

[@SaschaRissling]

This! Avoid padding and margin for single components like the pest

[@ahooton]

I've run into this problem before and used max-width: fit-content to prevent buttons from spanning the width of the parent

[@mazewinther1]

I run into this problem frequently too. My typical solution is: to stack the links horizontally: flex-direction: row to prevent buttons from stretching across the full width of the parent: width: auto (or fit)

[@charlescox7672]

I've run into the exact problem you demonstrated --several times-- and ended up using way too much extra formatting in the parent div to overcome it. Will start using this method! Thank You so much! 🙂

[@cykablyat867]

Its because its by default flex-row when you flex, if you flex flex-col its working as intended "i think" but inline-flex is so much better thanks !!

[@balasuar]

Easy to understand video with a very clear example. Thanks.

[@DaFakerable]

Ive always struggled with css and this video was amazing. Short and straight to the point. Thank you!

[@KaKaOfficial2]

In this situation, child elements stretch across the full width of the parent because the parent element uses display: flex and flex-direction: column without align-items. By default child elements will have the same width as the parent element when using flex. Can be fixed by: 1. add align-items: flex-start in the parent or 2. add width: fit-content in the child

[@pepkin88]

Unless you are putting those `inline-flex` elements inside a text paragraph or in a similar context, `inline-flex` is probably a worse choice than using `flex` for the parent. `inline-flex` (like other `inline-...` modes) makes elements sensitive to whitespaces around, so you have to be careful not to add any, to avoid having to deal with unexpected gaps. What you are trying to do here is perfectly achievable with the standard `flex`, including wrapping. I encourage you to explore it more.

[@rbcookingchannel-cg7xs]

Very helpful video. I like this.

[@24pratikbhagwat68]

Man I was really interested to know what is inline flex was and you just dropped the video cool😅

[@ashishsharma__]

Same 😅

[@okage_]

love videos like these, even if there is another solution, i like to learn about others

[@Juniper-z2u]

Amazing CSS tip. Thank you.

[@blazed-space]

Inline-flex is really the GOAT, along with border radius… making websites before CSS3 was brutal 😂

[@mhho2336]

Useful, but display: none is better

[@sunnaga9605]

fr

[@QwDragon]

Best comment!

[@anousenic]

Also its render performance is the best of them all.

[@OP-ig1fj]

wait till u hear about display: invisible

[@mr.k8660]

I can relate what you build becomes so beautiful you can't see it anymore

[@d3vilm4ster]

Perfect explanation!

[@ahmedmohmed6407]

thanks for the easy to understand video !

[@unitythemaker]

you are a lifesaver, thank you!

[@Nomiindia]

Sir you are the best concept builder !! ❤❤

[@nikolayrogchev9628]

Omg, every time I use display flex, but i need separate wrapper and separate class for the wrapper :@ Thanks, this seems very clean and elegant

[@kenechukwuwisdom8287]

Pls make a playlist on DOM manipulation 🙏

[@dutchharry4420]

Svelte :)

[@duoduoo6732]

why not inline-block? or just using ?

[@JustVinayadav]

You can do flex-direction to column

[@YannMetalhead]

That's really useful.

[@MaxAlekseyev]

Yes, the great feature

[@AlexTheDev1]

While watching your example for inline-block, I was wondering if you could've just used "flex-direction: row;". Correct me if I'm wrong :)

[@coding2go]

Yes definitely. You would need a wrapper div for the links to assign a Flexbox layout with flex-direction row. There are always multiple solutions you can go for.

[@tacyonmorales4566]

@@coding2go thanks very much for the video and this response. I'm learning and i hate create html divs or other tags-wrappers only for simple layout problems

[@aqua-bery]

I feel like you can just... display: flex; flex-direction: column; (or row, I forget) and get the same result, at least in the example you gave

[@votati]

but you would have to create a flex container for that. Instead, if you use inline-flex, you avoid writing another container and keep html and css simpler.

[@herozero777]

Thanks man. A really helpful video.

[@get-web]

Офигеть, чел открыл для себя inline-flex... В данном случае, нужно обернуть ссылки в родительский flex блок и добавить к нему gap, чтобы отступы были так же и cнизу display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 10px;

[@Checkmate-www]

thanks for the info man. loving ur videos

[@abdullahfareed3209]

can you make a video on how to solve distorting problem, like when beginners zoom out the web page all the elements start going here and there :D

[@CottidaeSEA]

You want an inline element, so obviously you use inline-flex instead, because flex is a block element. This really shouldn't come as a surprise.

[@KvikDeVries]

Short, on point, clear, concise and well exampled - thank you :)

[@vesterfox5662]

2:40 github screamer

[@LukeWatts85]

😂

[@YannMetalhead]

Good video.

[@ClubMedia]

جميل شكراً لك

[@shafiq_ramli]

Can't use flex-direction: row for that?

[@yourlocalhuman3526]

You'd need a wrapper that contains the anchor tags. But with inline flex you don't need a wrapper. Haven't tested this out but that's what I understand

[@paIeville]

what the guy above me said, and also row is already the default direction of any flexbox

[@masterflitzer]

​@@yourlocalhuman3526 with tailwind you'd do flex and flex-row on a parent div, while you'd have to apply inline-flex for every link/button in this example, i wouldn't say the method shown in the video is better than a container, it's always better to define behavior with as little css as possible and even without tailwind when you write the classes yourself it still comes down to apply for parent or all childs

[@masterflitzer]

@@y0urh0mew0rk sry for writing childs, i don't see how it's relevant tho, i am not a css engineer i am a software engineer and have used css when needed for years, about your 2 lines of css more, less lines is not the ultimate goal to make a good product, also 2 css classes on container but 2 less on every child is pretty good if you use css utility classes like tailwind, composition of streamlined styles is just what i prefer and which makes more sense for me, if you didn't notice the whole industry shifts towards tailwind and gotta follow the money, if i create my own classes i always model them around utility so more generic and reusable, of course here and there i use selectors when needed, but when parent can do it it's a better abstraction, also i've used ids and selectors heavily in vanilla html/css/js hobby projects, not something that's much needed in enterprise dev tho, so yeah i know damn well what css ids, classes and selectors are, but utility classes just scale better on bigger projects, i'm not clueless just have a different preference than you

[@masterflitzer]

@@y0urh0mew0rk i am not spamming divs, i only use containers (div/article) when they make sense, not like these big tech websites you see with 20 nested divs also i am not a frontend dev and will never do full-time frontend in my life, i am a full-stack dev and happy in my current position doesn't matter how hard you try to laugh or talk down in your comment, you're still just some idiot in the comment section like everyone else of us, so calm down and write your lines of css while i work on the features and make money

[@nickolaizein7465]

Like it! This is similar to inline-block, but in flex world!

[@M1CK3Y]

man i love this channel bro

[@Arcane_Dragon878]

This is so good man, been a subscriber for a month or two now and damn your content is awesome! i unironically learnt more watching your videos than doing my own research Also guys im new to YT streaming and video creation, pop on by and say hello if ya want

[@joel-rg8xm]

I never thought it that way, cool!

[@Angelcona01]

No sabía que lo necesitaba jajaja

[@Maxc_]

What if you use flex and flex-direction: row?

[@AS-mc2db]

Always great content...big fan❤

[@girdhar3224]

Can you share the complete code of before and after Or just after in a link

[@primodrums7604]

I think flex-direction: row; would solve this issue though

[@wlockuz4467]

No it won't because his a tags are flex not the container of a tags.

[@primodrums7604]

Ohhhh I get now, normally…I would enclose all the link elements in a container and apply flex to the container. But this is another way around it

[@garvani]

Very interesting, but wouldn't vertical-align:middle to the icons solve the problem?

[@kavinkumar]

Extra css

[@eliabexp]

but you couldn't use gap

[@gnack420]

Nope. You can try it yourself.

[@TingleCowboy]

Sure it would, but that would be too easy.

[@Pareshbpatel]

CSS inline-flex, so well explained. Thanks. {2024-10-21}

[@nomadshiba]

"flex" is shorthand for "block flex" "inline-flex" is shorthand for "inline flex" "block" is shorthand for "block flow" "inline" is shorthand for "inline flow"

[@mado.madeleine]

Life saver 🙌🏽

[@ronpalmer7260]

Great explanation.

[@RohitKumar-my4gq]

One question is that all topic you discuss here are they covered in udemy course?

[@ademineshat]

And on smaller screens what will happen to inline buttons

[@radha_pritivatidevidasi]

flex direction: row ; does it work ...

[@yourlocalhuman3526]

The difference is that you'd need a wrapper that contains the anchor tags. With inline flex you won't. At least from my understanding

[@AlonGruss]

@@yourlocalhuman3526 That's not a good thing. The HTML and CSS in this video will be harder to maintain and has no semantic context. Shorter is not better.

[@masterflitzer]

​@@AlonGrussit's technically not even shorter if you'd properly split the css into utility classes, in general i think what the video shows is a bad idea

[@masterflitzer]

@@y0urh0mew0rk you're pretty stupid if you don't know the difference between div spamming and prober use of parent encapsulation

[@masterflitzer]

@@y0urh0mew0rk so you don't know what the diff between css utility classes and semantic classes are? dude why are you acting like you know anything and then asking the dumbest fucking question, you can literally google this, the only one smoking here is you now try to apply for some jobs instead of wasting time here acting like the css god while being clueless

[@justablank1184]

so flex-direction: row; works same I think.

[@_MaiT]

What if you use flex-direction: column with display: flex;? Wouldn't code make same results? 2:40

[@aleksd286]

I would just display: grid; grid-cols-3

[@kamurashev]

Shouldn’t they be just wrapped in another display flex aligned element?

[@JohnWickXD]

Thank you so much ❤

[@galactic_dust42]

Or just use flex-direction: row ?

[@OJGamingYT]

Answer: justify-content:start I see no reason to use anything other than regular flex, or grid.

[@rounak308]

we can just use wrap

[@talhaanxari]

Great Sir

[@0xBerto]

0:56 how is this width of the block 100% I see the input fields are clearly not as wide as the red bar of the H1 tag. Or am I misunderstanding ?

[@coding2go]

Input elements have a lot of default styles like min-width and width that interfere with that. That is why they don't fill 100% like other elements.

[@yourlocalhuman3526]

You opened my third eye bro 😂

[@rowansteve-ng3fs]

you would just have changed it to flex-direction: row; then set them to flex: 1; each

[@gilsonconceicao5201]

Thanks a lot

[@莊子-e3v]

on my god bro，I benefited greatly from watching your video. If you offer a course, I will purchase it to participate.

[@rejomy]

helpful thanks

[@liasayati-s5u]

make image slider with keyboard pleease 😢

[@sourishdutta9600]

Thank you so much 😊 can you please 🙏 create video on atomic design and design system please.

[@respise]

why don't you just use the flex-direction? 🤔

[@thetanertube3482]

flex + *:w-fit = inline flex

[@gareth2021]

nice video :)

[@SunPodder]

Can you make a tutorial on an infinite carousel with animations?

[@dekuplaysguitar3313]

I think this overcomplicate the understanding , i would just use flex and gaps

[@anurag_anuraj]

Tailwind css next

[@blackshirtsquad7883]

Or just add a parent div also with flex. You might say why add a parent div when inline-flex is easier, but this is already what you're doing any time you choose to use flex.

[@blackshirtsquad7883]

@@y0urh0mew0rk if you're using a utility framework like tailwind, more divs generally makes code more readable. Its good practice. Up to a point obviously

[@melkiy582]

table th td /td td /td /th tr td /td td /td /tr let’s gooooooo

[@Z4KIUS]

flex shouldn't be a display value but something else, that way you'd be able to keep the display you want and still have flex-children but we can't change that now so... yeah

[@siddharaj3674]

Which Color Theme you use in Vs Code??? please Answer...

[@roshu551]

source code?

[@aram5642]

Adding the magic word "please" might help you.

[@AlonGruss]

That's just bad HTML hierarchy 🤦‍♂

[@jsamperdev]

Can you explain? or link?

[@AlonGruss]

@@jsamperdev Sure, by controlling the layout from a dedicated container for all the anchor elements (with flex row) it can be a more manageable and flexible HTML (and CSS) that will allow more freedom and granularity in these chip-like links. Having this container will also allow for better semantic tagging for A11y and also for responsive layout design. Here they are just having a flat hierarchy where everything is a sibling to everything else, while trying to control layout for multiple elements from inside an element. Which is not a good way to build HTML.

[@Daniel-nb3kk]

​@@y0urh0mew0rkCalm down man

[@TenzaBurabura]

I think you missed the point, and/or you have some HTML brain rot. It is most definitely NOT more manageable to have a container for each multi element thing you want to align on a single row, rather than change the display property of the single row element. Those containers have no visible or functional utility, they are just there because using display: flex provided incorrect positioning information to the browser and you now need to work against that. It is also meaningless to call it more flexible for the example presented, unless you want to make a super button with a carousel in it or something. I also don't see an a11y advantage, you still got a perfectly good button.

[@GamerDevIND]

Imagine a new mode called `infinite-flex` 💀

[@nicelydone4319]

I guess inline-block is known only to millennials...

[@AvisekDas]

This is dumb