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
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
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
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.
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)
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! 🙂
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.
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
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
@@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
@@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
@@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
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.
@@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
@@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.
@@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
@@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
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.
Офигеть, чел открыл для себя inline-flex... В данном случае, нужно обернуть ссылки в родительский flex блок и добавить к нему gap, чтобы отступы были так же и cнизу display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 10px;
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
"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"
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.
@@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
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
@@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.
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.
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
I agree, flex + gap ftw!
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
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
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.
This! Avoid padding and margin for single components like the pest
I've run into this problem before and used max-width: fit-content to prevent buttons from spanning the width of the parent
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)
Easy to understand video with a very clear example. Thanks.
Ive always struggled with css and this video was amazing. Short and straight to the point. Thank you!
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! 🙂
Ohh I faced this issue many but now i know the solution thanks for giving us such a quality content ❤
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.
Very helpful video. I like this.
Amazing CSS tip. Thank you.
Perfect explanation!
love videos like these, even if there is another solution, i like to learn about others
thanks for the easy to understand video !
you are a lifesaver, thank you!
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 !!
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
Thanks man. A really helpful video.
Sir you are the best concept builder !! ❤❤
Can't use flex-direction: row for that?
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
what the guy above me said, and also row is already the default direction of any flexbox
@@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
@@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
@@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
You can do flex-direction to column
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 :)
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.
@@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
Man I was really interested to know what is inline flex was and you just dropped the video cool😅
Same 😅
Short, on point, clear, concise and well exampled - thank you :)
Pls make a playlist on DOM manipulation 🙏
Svelte :)
why not inline-block? or just using ?
That's really useful.
Useful, but display: none is better
fr
Best comment!
Also its render performance is the best of them all.
wait till u hear about display: invisible
I can relate
what you build becomes so beautiful you can't see it anymore
Very interesting, but wouldn't vertical-align:middle to the icons solve the problem?
Extra css
but you couldn't use gap
Nope. You can try it yourself.
Sure it would, but that would be too easy.
thanks for the info man. loving ur videos
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
Yes, the great feature
I never thought it that way, cool!
2:40 github screamer
😂
Can you share the complete code of before and after
Or just after in a link
Inline-flex is really the GOAT, along with border radius… making websites before CSS3 was brutal 😂
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.
Like it! This is similar to inline-block, but in flex world!
flex direction: row ; does it work ...
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
@@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.
@@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
@@y0urh0mew0rk you're pretty stupid if you don't know the difference between div spamming and prober use of parent encapsulation
@@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
What if you use flex and flex-direction: row?
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
What if you use flex-direction: column with display: flex;? Wouldn't code make same results? 2:40
man i love this channel bro
And on smaller screens what will happen to inline buttons
Always great content...big fan❤
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
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.
One question is that all topic you discuss here are they covered in udemy course?
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 ?
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.
Good video.
Thank you so much ❤
جميل شكراً لك
Shouldn’t they be just wrapped in another display flex aligned element?
No sabía que lo necesitaba jajaja
Great explanation.
I think flex-direction: row; would solve this issue though
No it won't because his a tags are flex not the container of a tags.
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
Офигеть, чел открыл для себя inline-flex... В данном случае, нужно обернуть ссылки в родительский flex блок и добавить к нему gap, чтобы отступы были так же и cнизу display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 10px;
so flex-direction: row; works same I think.
Or just use flex-direction: row ?
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
Thanks a lot
Life saver 🙌🏽
helpful thanks
we can just use wrap
make image slider with keyboard pleease 😢
Answer: justify-content:start
I see no reason to use anything other than regular flex, or grid.
Great Sir
why don't you just use the flex-direction? 🤔
You opened my third eye bro 😂
I would just display: grid; grid-cols-3
Which Color Theme you use in Vs Code??? please Answer...
you would just have changed it to flex-direction: row; then set them to flex: 1; each
Thank you so much 😊 can you please 🙏 create video on atomic design and design system please.
source code?
Adding the magic word "please" might help you.
CSS inline-flex, so well explained. Thanks.
{2024-10-21}
"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"
Can you make a tutorial on an infinite carousel with animations?
on my god bro，I benefited greatly from watching your video. If you offer a course, I will purchase it to participate.
flex + *:w-fit = inline flex
Tailwind css next
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.
@@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
I think this overcomplicate the understanding , i would just use flex and gaps
table th td /td td /td /th tr td /td td /td /tr let’s gooooooo
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
nice video :)
That's just bad HTML hierarchy 🤦♂
Can you explain? or link?
@@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.
@@y0urh0mew0rkCalm down man
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.
I guess inline-block is known only to millennials...
Imagine a new mode called `infinite-flex` 💀
This is dumb