I'm not too fond of them either, but it really just depends on the presentation. This went over the subject really well and it was easy to understand his point.
@@ayoublaarouchi yes, but you will have to also switch this to width in the media query and change the height…. Animating the flex-basis is just simpler
If I had watched RU-vid first thing this morning instead of coding, I could've saved myself a couple of hours trying to figure this out myself lol Good vid as always ^.^
I just wanted to say that i apreciate so much the detail of turn the HTML body into dark mode. That's make all difference between watch the video or avoid it. Thanks!
I once used "flex-basis: 0; flex-grow: 1" for divs inside a flexbox to make sure they are evenly sized regardless of the child size... Not sure if it's the best way to do it though 🙃
hello kevin sir can you please make video playlist on 1 landing page website using html, scss and js which have also dark mode and light mode ? it helps to understand how we can change colors using $ variable on dark mode or other scss concepts like responsive font size, etc ! thank you
flex-basis is based on the flex-direction, inline-size is based on the writing direction, so that will only change if you change the writing mode to be vertical
flexbox would be kind of useless without it imo! It's on by default for a reason :D - It's great that items, by default, shrink down to their size. Imagine doing a navigation, and doing display: flex and they didn't have the room to go next to one another 😔
2:24 I can already hear the customers yelling from miles away. “Why is my image cropped this way, the other 20 people on my photo don’t fit anymore. 🙄😂
Something that always annoys me with flex is that inputs don't respect flex shrink unless you explicitly set a width/height (depending on direction), and always ignore flex-basis. Is there any way around that?
whenever i/we style something and I talk to my collegues I say somethingg like: yea you know, i've seen CSS King do this recently this way. They are like: who?... and i dont remember your real name cause in my head youre CSS King :D
hi sir please please help me i want to be frontend dev so i start learning html css but when i come to start build to practice i find it hard so can you tel me the solution and please i need to know how to learn like see video after practice please answer me please
practice, practice, practice. Like anything else, you gotta work at it, it's not easy and takes a lot of time. Videos, tutorials, and all that are cool, but it's actually doing it where you learn the most.
If you think that Apple employs some of the best specialists, explain why this does not work in the Safari browser. :root {--flh: calc(100% + 8px);} .selector { font-size: 16px; line-height: 1.5em; /* Fallback */ line-height: var(--flh); In all browsers, it works without Fallback, and in Safari it doesn't even work with it. Selector {line-height: var(--flh, 1.5em);} also does not work, why?
Huh, seems to be a bug there for sure. Gonna dig in deeper and potentially file a bug report since I couldn't find one, but in this case, because of how line-height is calculated, 100% = 1em, so you could do `calc(1em + 8px)` and it'll work the same, and works in Safari. The fallback when you use var(--flh, 1.5em) doesn't work because --flh exists. Fallbacks don't look if they're valid or not, just if it exists or not. You could put "red" in there and it would wouldn't go to the fallback.
@@KevinPowell solution with 1em + 8px works the same, and works in Safari, is a solution, but the most interesting thing (100% + 8px) is that this does not work not in the same browser for iOS, even Mozilla or Chrome. For solution, thanks
You can “fake” it by using max-height and animating it to a height that you know is greater than your contents. The animation will stop when it runs out of contents and not actually reach the max-height that you set.
I have a video coming in just over 2 weeks that looks at minumum for a responsive and decent looking page that's 25 lines of CSS and includes dark mode 😃. I mean, you can do it with one line if you want html { color-scheme: light dark; } !
@@KevinPowell I am currently using sass with reactjs but i want to write minimum css with proper classes without affecting other components throughout web application
🤣 - Shows how often I use them, lol. Only time I bother mentioning them is usually when I'm doing very beginner content and then we move on quickly :P - granted they can be useful for stuff like critical css as well.
When my page is being generated programmatically (e.g. from Python code), I like to include the CSS in the generated output as well. This also makes it easier to refresh the page to pick up changes. I hit trouble when the page links to a separate URL for the CSS, where it doesn’t pick up changes to the latter.
