The thing people get wrong about flex-basis

Подписаться 918 тыс.

Просмотров 59 тыс.

50% 1

🎓 Dive even deeper with my 4-hour long flexbox course: flexboxsimplified.com
Flex-basis is one of those things that people sort of, kind of, maybe understand what it does, and I often see some bad advice, like “flex-basis” is just width for flexbox, when that can actually lead to some unintended consequences, so in this video I break down what flex-basis is, and how it’s different from width and height, even though it influences them.
🔗 Links
✅ The code from this video: codepen.io/kevinpowell/pen/Jj...
⌚ Timestamps
00:00 - Introduction
00:49 - What happens when we declare display: flex
01:55 - Adding width to a flex-item
02:40 - Comparing width to flex-basis
03:55 - When we change the flex-direction
06:05 - When min- and max- come into play
07:35 - When we take advantage of flex-basis without realizing it
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

20 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 71

@zachjensz Год назад

Flexing that CSS nawlege 💪

@akosdonko7501 Месяц назад

Kevin you are awesome, i recently started a front end dev training at a big company and after every session I end up watching your channel cuz you just explain everything so much better than these so called "professional trainers". Many many thanks appreciate you!

@emmanuelameyaw5686 Год назад

Thanks man, your videos have helped me a lot in getting confident with CSS. Love u man!

@eduardochernia Год назад

Im doing a HTML/CSS course in Argentina. I ve been suggested to go over the contents again to commit them to memory, before starting JS, which will be as complex (or more). These videos are going te be really useful for that, thank you for the clear explanations and for taking the time.

@uhman5001 Год назад

Mi punto de vista de aprender todo, porque para consejos está tu hermana, es que ni bien aprendas algo, busques una forma de aplicarlo. Si estás aprendiendo como usar Flex o Grid por ejemplo; podés crearte un proyecto y hacerlo, equivocarte mil veces y después ya se retiene. Todo es constancia pero no mires muchos tutoriales, cranea la idea antes y cuando te quedes quemado ahí podés buscar la solución en stackoverflow. Yo aprendí así y ahora ya estoy laburando hace más de un año. Un abrazo querido!

@AlvinIsChipmunk Год назад

It really depends on the individual because some people do find JS easier than CSS 😂But it's true that it is almost always better to have a solid foundation in HTML/CSS before you move on to other stuff.

@moshadoe Год назад

Do not worry about committing the CONTENTS to memory. What you need to commit to memory are the basic terminology, such as Keywords, classes, functions, etc... As for things like width, flex-basis,etc... It is more important to know they exist, and to just google for your specific problems. A big misconception about programming is that you are coding all the things from memory. Programming is more of a mindset. The ability to know what the problem is, then using your resources to find a solution. This is why the joke about programmers just Googling and using StackOverflow exists.

@CristianRodriguez-zn4wp Год назад

@@uhman5001 Tienes razón. Aunque mirar tutoriales puede servir más para refrescar conocimientos. En ese sentido puede ser útil.

@blackpurple9163 Год назад

JavaScript is even more complex, if HTML is level 1 and css is level 5 JavaScript is like above 10🤣

@codingwithjaybird Год назад

Love your videos! Inspiring to see how your channel has grown 😊

@itsfarseen Год назад

Hi @Kevin Powell you are the single best beginner friendly resource on CSS on the entire internet. Thank you for your videos. They are informative and simple. They are really good. Thanks :)

@rpf23543 Год назад

I am not madly, deeply in love with CSS yet...but veeeeery curious and eager to fall in love :-) thank you so much Kevin for all your work!!!

@mrfrontend1 Год назад

You have my respect Kevin. I have learned a lot from you...❣Love From Nepal

@yuriito7292 Год назад

Each time amazed! Keep up the good job !!!

@abhishekrawat8579 Год назад

in my early phase of learning your tutorials helped me alot...and learned alot from you ❤ and it's been a 1.5 years being a frontend developer still in love with CSS and I hope you will bring more interesting videos in future too....

@silverfullbuster9177 10 месяцев назад

Whats your thought on AI and the future of developers? As an aspiring junior web developer, Im not sure.

@kalahari8295 Год назад

Damn I love videos like this soooo much ❤️🔥

@un_defined 3 месяца назад

that's really interesting things you explained

@kamasahdickson1549 Год назад

It kinda funny😂 and i think other tutorials on RU-vid like 99%😂 that i watched when learning flexbox dont understand this concept you explained.

@maddin187er Год назад

I'm a simple man - I see a video from Kevin, I give a like

@soroush1984 Год назад

Thank for your video. So you mean it'd be better to avoid flex-basis and use width/height instead?

@ralacerda12 Год назад

Great video. But can you shrink the flex container to fit the width of the flex items (if you set a width or flex-basis for them)?

@glowbug-clashofclans9116 Год назад

If you set the container to have a width: max-content, then the width of the container will match the width of the children inside. (+padding and margin obv)

@ralacerda12 Год назад

@@glowbug-clashofclans9116 Thanks for the reply! I spent one hour ealier today trying to do it.♥

@GustvandeWal Год назад

I thought this video was going to be about the way flex-basis influences the growing and shrinking of elements. Near the end, for example, when you added flex: 1;, I thought you were going to show the gotcha of having flex-basis set to 0. In this sense, saying that flex-basis: auto; "looks" to the width/height you had explicitly set with CSS, is a bit misleading. flex-basis: auto; will look at the rendered dimensions, equating auto to min-content. Again, this ties into the fact that with width: 300px;, flex-basis does not become that. The answer to that quirk lies in the flex-grow and -shrink properties and is the reason flex: 1; works in the first place. Would love to see you a quick follow-up on this!

@vavilov2212 Год назад

Thanks!

@nadiac6938 Год назад

hey kevin, what year did you build your first website :) :) :')

@gurgen5165 Год назад

Hi Kevin! I've been following your channel for almost three years now and I know you have done some projects in the past using scss/ sass, but lately I haven't seen any styling languages except CSS. I've recently (today) started using sass, and before I "trap" myself with sass I'd like to know you're opinion on it and if it is worth using, is it better just to stick with CSS or should I commit to the switch?

@GustvandeWal Год назад

You will find that you are NOT shooting yourself in the foot by committing to Sass. Sass turns into native CSS, just like how Typescript turns into native JS. There are merely developer-oriented features in them, which will speed up and simplify your development. It's always a good idea to know the native stuff, but Sass isn't much different from it. Take the nesting that Sass provides: just use it and see what the resulting CSS is. If you do it that way, you will learn how exactly you benefit from Sass and make it possible to switch back to native. You also don't have to be afraid of being stuck, because Sass compiles into CSS, which means you can always ditch Sass and resume using the native results. That, AND, Sass features could very well slowly be standardized and added to CSS, just like how jQuery features slowly became native ones. Use Sass. It's awesome 👍

@gurgen5165 Год назад

@@GustvandeWal Thanks, very good and understandable reply. Probably the best comment I’ve ever seen on RU-vid 😅

@GustvandeWal Год назад

@@gurgen5165 No problem and thank you 😁

@arshad1781 Год назад

Thanks 👍

@WanderingCrow Год назад

Greetings! Do you have (or plan to have?) the same kind of course than "Flexbox Simplified" but for Grid? 'Cause I'd be interested in that too. Please and thank you, and have a great day :)

@rickardelimaa Год назад

20 views and 16 likes after 1 min. Pretty impressive. :D Even more impressive is that Zach Jensz that wrote a comment 1 day earlier than this video came out.

@KevinPowell Год назад

Patrons get early access to the videos :)

@windmaomao Год назад

to summarize: `flex-basis` is useless. Sorry this video is awesome, really helping us understand what's going on.

@Rocadamis Год назад

Clear as mud. I understand width, height, min/max-width & height, but (for me) what flex-basis actually DOES is essentially undefined here and still confusing to me.

@KevinPowell Год назад

It acts as width when the flex-direction is row, and acts as height when the flex-direction is column :)

@Rocadamis Год назад

@@KevinPowell I wish that helped. "Acting" as width and height doesn't really inform me of WHAT it's fundamental purpose actually is. Knowing this would help me in determining HOW I would use it in CSS. It's called "flex-basis" but what is it a "basis" OF?

@lp26197 Год назад

Hello, I want to ask you. I am a front-end developer. Is this field good in terms of the job? I have 4 years, and you are from the university. What do you advise me to learn something else besides the front-end so that I can find a good job in the future? Thank you

@kamasahdickson1549 Год назад

I wish one day you do a video about the significance of grid template rows😂...I don't know but I don't use it in 99% of projects that I do....and that alone makes me feel I don't know grid yet😂

@healinbeet Год назад

he's got a whole video on grid, i'm sure he talked about template rows/columns in there. do check it out :)

@jasonbourne757 5 месяцев назад

What if flex item doesn't have any content or height or width? Suppose, there is a flex container with a width and height of 400px, I create 9 empty flex items inside, and these items do not have any content, width or height. Will the flex basis make these 9 items fit the container ?

@michielderuyter8024 Год назад

4:28 "I am not going to worry why the width is stretched out" you could have mentioned that the default value for align-items is stretch

@lookupverazhou8599 Год назад

Thumbs up!

@noorulhuda1661 Год назад

Thanks Kevin got flexbasis

@bananenkotze Год назад

I‘m not sure what your where trying to explain in this video.. i‘ve always been using flex with width, never with flex-basis, and it seems that that was the right choice? i was expecting something cool or new with flex-basis, instead you‘re saying i shouldn‘t use it (in 99% of the cases)?

@isasayyed5777 Год назад

I didn't even know flex-basis exists

@_daniel.w Год назад

Currently learning web development, it's quite fun with Vue. It's the only one I like, I've tried many, but Vue is the only one I really enjoy using. Anyways, I'm early :)

@ralacerda12 Год назад

Same. Vue clicked with me in a way that React did not.

@fumast3rmasteroffu716 Год назад

Dear Kevin. I really love the content of your videos. But I have one big wish. Please concider having darker/darkish background colors as background color of you html content. I am having a hard time viewing anything with bright or white background. And if youtube videos have white background I can invert the colors of my screen. But most all your videos you have the code on a black background and the html content on a white so reversing the video just mean I lose the code or vice versa. So it would make wonders for someone with bad eyes as me if you could keep code background and html background content in darker colors. Keeping fingers crossed. And a big thanks for all the wonderfull content you create.

@KevinPowell Год назад

Noted! I often just roll with the defaults because it's fast, but super valid point and I'll look to update my starting demo files!

@zyniguitar Год назад

As a beginner programmer should I learn HTML/CSS , python or C ?

@KevinPowell Год назад

Depends on what you want to do? HTML/CSS is for front-end of websites, Python is used for backend of sites, AI, and a few other things, and C (C++, etc), is more of a general purpose language used to make software and some other stuff too. All very different, and very dependent on what type of development you want to do.

@Spytie1 Год назад

doesnt kyle from webdevsimplified have copyrights on flexboxsimplified ? :P

@KevinPowell Год назад

he has all the other ones, he missed his chance on that one. I'll sell it to him for the right price though :D

@anthonynjoroge5780 Год назад

Wait, is it "my front-end friends" or "my friend and friends"🤔

@user-cx6ec2kp6u Год назад

I just heard flex bzos over and over again

@sajedsoliman4780 Год назад

Simpilified. Hmmm. That's Kyle's brand 🙃

@VanegeEsperanto Год назад

Thanks, I will never use flex-basis.

@KevinPowell Год назад

It has it's use cases! It's just important to know what it's doing :D

@arjix8738 Год назад

You said Plex instead of Flex in the first minute

@coolworx Год назад

We need to figure out a way for the AI's to distill the essence of Kevin into an algorithm so that we can create that cool "learn anything" tool from the Matrix.