Flexbox Tutorial - Flexbox containers

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

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

50% 1

Dive in deep and learn how to really take control of flexbox: flexboxsimplified.com
Flexbox has pretty much replaced floats and clears, but there are a lot of properties to figure out when you're using it!
This video is the start of a short series looking at how Flexbox works. In this video, I break down the different flexbox properties that we can apply to a container, once we've set display: flex
The full playlist: • Flexbox Tutorial - Fle...
Here are a couple of really nice flexbox playgrounds, they can be a real life saver! flexboxplayground.catchmyfame....
flexbox.help/
---
Support me on Patreon: / kevinpowell
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.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powellom/Kev...

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

20 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@eliehaddad9561 4 года назад

How can anyone with his/her full brain capacity even dislike this video? The content, the flow, and Kevin are amazing!

@madalin2428 3 года назад

maybe by mistake 🤔

@IamPetrus 3 года назад

because we love Kevin!

@cidhorta8705 3 года назад

I totally agree with, Kevin is incredible and it's impressive someone can give him a dislike.

@anetthorvath8315 2 года назад

Trolls will be trolls I guess.

@davisnoah347 2 года назад

It's not that they don't like the video. It's just that they are unhappy and are currently watching the video.

@nuttaphonr.6498 3 года назад

Thanks for cool Flexbox Tutorial 4:05 Flex Direction 5:24 Flex Wrap 6:45 Setting nowrap will ignore width of item 7:50 Flex-flow = flex-direction+flex-wrap 9:33 Flex justify-content 11:09 align-items defaults is "strech" 11:43 align-items works as cross axis (if you are column then it row) 13:06 align-items Baseline align text same level 15:58 align-contents align all content in flex

@theshredguitarist25 2 года назад

Thank you!!!

@olaniranbashiratabimbola1906 Год назад

Thank you. It's sad I'm just getting to know you. But I'm happy and very grateful that I came across you🥰🥰

@priyamshankar468 Год назад

thanks

@libanesegeorge 4 года назад

Thanks for making this so simple. I've seen some other videos on the same topic but not many can simplify it the way your videos do. Thanks for the help and keep up the good work!

@ga7853 5 лет назад

This is the best tutorial on flexbox I have seen on the net, and you top that with those wonderful links for flex playground, Thanks a million you are the man for any CSS needs.

@ChristianThompson 5 лет назад

Great instruction! Currently in an online coding bootcamp. Your classes have been a huge help. Thanks!

@whytepencil3672 3 года назад

Wow, flex wrap is all I needed. But the video was all my coding career needed. Thanks a ton, Kevin!!!

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

Your content is amazing. I'm doing the 21days of challenge of Conquering Reponsive Layouts and I'm loving it. Thanks !

@xAndre-d-Moraes 7 лет назад

Kevin, yours tutorials are amazing. I started in the Workflow and will watch everything after. I'll watch this after done the others tutorials. Thank you!

@KevinPowell 7 лет назад

Thanks so much André!! I'm glad you're enjoying my videos!

@dableb 2 года назад

0 complaints, what a flawless video. Thank you for all you do, Kevin

@ImMisterEric 3 года назад

Kevin, your videos are a lifesaver! I'm just beginning my web development journey, day 1 of "school" tomorrow (01/11/2021). But I'm like to prepare as much as I can. This video is super helpful as flexbox is a bit confusing at first, as with anything. Thank you so much! I would support you, but thanks to the pandemic that's not possible at the moment. Soon I hope though! :)

@hightowergaming5301 3 года назад

THIS VIDEO MAN! I can't believe it... you've helped me to break down that flex positioning wall that was blocking my progress. I really can't thank you enough. I actually understand the relationships between justify and align... they're axis (dependant on column or row) and how they position the items. MASSIVE result for me. THANKS

@simeonieroteev4555 6 лет назад

Man, you are awesome!! Before I watch the video I knew "How Flexbox works", but after the video I know really how works!! Thank you!

@KevinPowell 6 лет назад

Thanks so much Simeon, glad that it's helped!

@ericcorona2817 Год назад

Mann, this is very helpful. I really love the way you explain, how you express yourself. It's so clean and simple, it's like the KISS rule. "Keep it simple"

@MuhammadAhmedAshraf 2 года назад

explicitly explained this channel has so much value in it

@bojant011 4 года назад

Another amazing tutorial! You made it so easy to watch and understand. Thank you!

@caybokotze 7 лет назад

Thanks man! You are changing the world by allowing people the opportunity to learn more about something practical like web development. Great work!

@KevinPowell 7 лет назад

Thanks so much for your kind words! It's something that I really have a passion for, and hopefully I can help a few people with it along the way 😁

@jamie7622 3 года назад

2.2k likes. 10 dislikes. That's a great ratio and a testament to your quality of content. Keep up the good work Kevin, you do a great job in these videos.

@MrDev3dworx 3 года назад

Love the way you explain things in short and simple way. It's really helpful. I was looking at your videos to find one about Fixed, Fluid, Adaptive and Responsive layout design concept but couldn't found it. I would really appreciate if you can make one to describe the difference and which one you think is the best. Many thanks.

@ajanigloryadeniyi760 Год назад

I've been skipping learning flexbox as a front-end developer I developed a website and after using various media queries for various screen sizes I discovered that my website is still not responsive. I saw your 21 days responsive design lesson and ever since responsiveness as been a simple task for me to perform using my CSS. Thanks for this KP.

@karunabenjamin3744 3 года назад

Before i start the video i thought i'll never ever clear the concept of flex its so confusing.... but after watching ur video my all doubts are clear. Thank you sir for making the videos like these.... Lots of love and thanks from India.

@joyvideos1802 4 года назад

28,000 views, but not even 1000 likes. this definitely worth a watch. appreciate guys. he's doing great job

@audiocologne Год назад

Dear Kevin, all your videos are so brilliant and help me a lot. Thankful Barbara from Germany 😊

@jemsworld 4 года назад

Nice and simple way put together and your tip of using playground is the life saver 👍

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

Just wanted to say how much I'm enjoying your videos, Kevin. You're a great teacher!! :)

@GigMyRig 2 года назад

Kevin, I cannot thank you enough for what you do and how you do it. You are a wonderful teacher and the reason that I have fallen in love wtih CSS 😍

@dandange 5 лет назад

Kevin, you are awesome, I've learnt so much from your tutorials. Keep the good work!!!

@KevinPowell 5 лет назад

Thanks so much dangange! Glad to hear my videos are helping you out :)

@Gs0c 2 года назад

Thank you for being so helpful! Amazing content!

@ahmadsameh5300 3 года назад

thanks Kevin very much , this was so helpful

@angladephil 4 года назад

Thank you Sir ! @12:00, very important notice since, if I got it right, the property 'flex-direction : row/column' SWITCHES the x and y axis ! Keep on the good job, please !

@marieking5969 5 лет назад

You’ve been the most helpful person I’ve found. Thanks!

@KevinPowell 5 лет назад

Glad you've found my content helpful!

@gombaleumarius9913 3 года назад

still watching in 2021! Thank you so much Kevin

@loukasavgerinos3990 Год назад

Hi there, you re solved me for now a small problem i had, to understand some things. Thanks, keep up the good work🎸

@zaheerasghar5133 3 года назад

Excellent tutorial

@nathalieferreiraBR 2 года назад

thank yooouu!! Was able to fix a design problem in my webpage!!

@kresimircosic6158 6 лет назад

Keep up the videos man. I know you're small now but I like the way you explain stuff to a non-English native speaker like myself.

@KevinPowell 6 лет назад

Awesome, glad that I'm clear even if English isn't your native language! Thanks for the vote of confidence 😁.

@inestamessi290 7 лет назад

i was looking for responsive navbar for mobile phone and i find out your channel i just wanna to say thank you and by the way you have amazing videos here keep it up u will have more subscribers to ur channel if you keep the great tutorials sorry for my bad english Thank you

@KevinPowell 7 лет назад

Thanks so much!!

@saurabh75prakash 2 года назад

Excellent video, thanks 🙏

@alexmachin1785 7 лет назад

finally a simple video for flexbox 👐👐

@KevinPowell 7 лет назад

I think some people avoid it because it can come across as complicated. It definately had a lot of properties, but it doesn't have to be hard. I did just realize I should do 4 videos in this series though, because there are some really neat tips and tricks that I should talk about too.

@suranjithnishalaka7395 2 года назад

@Kevin, You are the CSS to my HTML

@emmanuelsedemogun6220 7 месяцев назад

You are an amazing tutor.👏👏👏

@Elmngh 4 года назад

Amazing tutorial thanks

@Itsokyash_ Год назад

Kevin Sir your the best teacher for CSS

@LearnEnglishByCartoon 6 лет назад

Thanks for your videos.

@KevinPowell 6 лет назад

No problem!

@the_kickers_of_the_coconut6375 4 года назад

great tutorial!!

@oyatsukikagami1960 4 года назад

love you tutorials Kevin

@ahmedEchch 6 лет назад

Thank you so much Kevin

@KevinPowell 6 лет назад

No problem;

@alexandra.thegreat 3 года назад

That's a bit confusing when the flex-direction is set to row and items take up a column space 🙄 but anyway, it is what it is 😁 Kevin you're an amazing teacher, I love your videos, they're superuseful. Keep up the fanstastic work!!!

@samyakshah9119 2 года назад

Kevin Powel is god of CSS!

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

this as been very helpful

@ren2674 2 года назад

You are a lifesaver!

@user-sl5ft9md3m 3 года назад

You are probably my favorite person

@Ramkirat1991 6 лет назад

@kevin powell Awesome Brilliant Outstanding superb Thank you!

@KevinPowell 6 лет назад

So glad that you liked it!

@anitsingh9373 3 года назад

"just try one and if it's the wrong one use the other one". And I thought I was just a noob 😂

@ahmedmamdouh3964 2 года назад

Brute Force solutions are always the answer 😂

@calvinkwok7158 6 лет назад

Looks cool, i never used it before, wanna try it...

@KevinPowell 6 лет назад

Flexbox is amazing. It can be a bit overwhelming at first because there are a lot of properties, but just how easy it is to have a parent div with three child divs inside... give the parent a display: flex; and you have columns... and you don't need clears! Amazing.

@RainOnline 3 года назад

Im just gona leave my Thank you comment before even watching the video, there is no way I wont leave this video with flexbox knowledge. Thank you

@zt.5677 3 года назад

You must have heard many times: Thank you!

@BlackDev 2 года назад

watching this after playing flex zombies is amazing

@holysign4633 6 лет назад

Amazing video.truly the best on flexbox. By the way..that single disliker.who???

@KevinPowell 6 лет назад

Lol, there always has to be someone!

@Ana_Mzn Год назад

thank you!

@MontyKsycki 5 лет назад

Thank You!!! :)

@sahilparanjape5211 3 года назад

JusTiFy content ---- i feel you!

@osmdrcn8076 2 года назад

thanks!

@this.channel 5 лет назад

I feel this series would be perfect, if the final video featured workarounds for IE and Safari flex bugs.

@KevinPowell 5 лет назад

While I know IE has issues, curious which Safari bugs you're referring to.

@this.channel 5 лет назад

@@KevinPowell Sorry, I just realised most of them are fixed, I guess. Here is a good source of flexbugs for IE and Safari, of which most (or even all) are fixed for Safari: github.com/philipwalton/flexbugs

@jasonleelawlight 2 года назад

Thanks!

@KevinPowell 2 года назад

Thank you!

@rajansood964 3 года назад

Thanks

@ivanc8494 6 лет назад

Greaaaaat !!!

@KevinPowell 6 лет назад

Thanks :D

@bloc-notes6751 5 лет назад

Thank !

@nickygello9105 3 года назад

Thank YOu

@setarifsetari 2 года назад

You're awesome

@uimonk 3 года назад

ur legend

@keaton718 11 месяцев назад

Should we follow along in VSC when we watch these videos?

@cesarlara3974 6 лет назад

So I know HTML and CSS and floats so would you recommend getting into flex box so I can avoid using floats and clears in the future?

@KevinPowell 6 лет назад

I would! It is a bit more complicated, but it is more intuitive as well in my opinion, and gives you a lot more control. Floats are clears aren't going to be relevant for much longer, except for a few minor things (not so much layout stuff anyway).

@pauljohn3898 2 года назад

Great

@learntocode1878 3 года назад

I want to have one div being the main content on the left - another two small div at the right - then about three more s div at the bottom. Tried with flexbox but wasnt bale to get this. Obviously each div box will have different size but can't seem to get the about layout

@SunroseStudios 2 года назад

it seems like `align-items:center` functions the same as `align-content:space-around` in terms of content that has wrapping involved

@user-cn4qb7nr2m 6 лет назад

Are you intentionally keeping color scheme in explanation and faceCam consistent? :)

@KevinPowell 6 лет назад

Hahaha, that's hilarious. I wish I could say that I had, lol.

@learntocode1878 3 года назад

How can you make a complex flexbox layout please? Would appreciate if you make a video for this please

@rupeshogale4384 6 лет назад

Amezing bro really I got what I want I am from India

@KevinPowell 6 лет назад

Awesome, glad to hear that :D

@marius090995 2 года назад

Hello,how can you split the editor like this, I am new to vs code but its seems way more easier to just have the css right below the html and the browser to the right. Please advise,thanks!

@dwayne6402 3 года назад

So the main axis goes across but the cross axis goes down.... hmmm not at all intuitive. lol. I love your approach very scientific "use one if its wrong use the other". Man I did that with three wives that didn't work out so well for me. Grab another beer and try again.😄

@jaynetan6589 Год назад

Thanks cuz I just made a big move in getting comfortable with CSS!! U da 🐐Goat! But 1 question about the Position absolute Vs relative explained video tho, I'm kinda losing my mind at how I didn't set the margin of the red box & yet I checked the browser, it showed margin of 100... Whereas in the video u made, u didn't seem to set any margins for your child (red box) Is this a default value the browsers have set for you??

@KevinPowell Год назад

Thanks so much! As for the margins, by default a div has 0 margin, maybe there was something in your CSS adding it? It might not have been on that specific box, but on all divs or something?

@summerdives 4 года назад

I like this tutorial. I found it funny that Kevin's voice changes when we go to the tutorial part, is he using two different microphones?

@sontredis2579 4 года назад

Summer Liu lmfao

@rakib17874 3 года назад

Probably in a different room/studio. His voice echoes up and increases the volume

@mexicaninpoland8009 2 года назад

I’m using visual studio and I can’t see the modifications until I go to Google to check my index, what are you using to code and watch instantly the modifications???

@celerystick 3 года назад

i wish i learned flexbox sooner

@igorr4682 Год назад

always reminds me of the closing tag for fragment in react

@SquaredbyX 2 года назад

How many CSS properties only affect 1 level of nesting?

@asaber1553 3 года назад

yoe are very great

@HekmatKhyber 5 лет назад

Hello Kevin, thanks from your best instruction and teaching, if possible please rename teach video by number suffixes. Regards

@KevinPowell 5 лет назад

I didn't number these ones because they sort of stand on their own as well, while I made them in a specific order, I'm not sure the order is super important... well except the 3rd one I guess?

@thedarkglovemusic 3 года назад

Dude, thank you for having a tiny intro

@cesarlara3974 6 лет назад

How do you start a portfolio for beginners? Like where do you start?

@KevinPowell 6 лет назад

Start with something simple! Find some layouts on line, or sketch something out, and see if you can put it together! I do have a few series on building pages from scratch that might help as well.

@cesarlara3974 6 лет назад

What is the difference between flex box and CSS grid? Or which one is better?

@KevinPowell 6 лет назад

Flexbox has been around longer and has better browser support. You could build a layout with it today unless you need IE9 support. The Grid is VERY new, and while all the big browsers support it, it's only the newest versions that do, so support isn't as great yet. Flexbox is 1-dimensional, meaning that it can create either a row or a column. The grid is 2-dimensional. We can create rows and columns at the same time. It also allows us to make rows and columns, and then place content where we need to on the grid. With flexbox, you're creating either a row or column, and then fill it up with the divs you need.

@marketinginhouse 2 года назад

We can make a fully responsive website, WITHOUT using Media Queries?

@joyvideos1802 4 года назад

Some grid CSS is new to me.. : autoflow/minmax

@ogochukwuonyima4035 6 лет назад

How do I create my own bootstrap for responsiveness

@sergioalcantar3290 2 года назад

It's a lot to take in at once. I'm at my second viewing right now and know I'll need three or four before I go to the next. There's my truth.

@KevinPowell 2 года назад

No harm in that at all! Go over it, practice and play with it, revisit it and keep learning!

@malihaabbasi.9789 3 года назад

Why make a whole different file for CSS when you have the style tag?

@jawadhaider1704 3 года назад

Making a different CSS file is most flexible in case there are more than one page on a website because with an external style sheet, you can change the look of an entire website by changing just one file. You don't have to manually change each style tag in each HTML file.

@rakinbhuiyan3313 2 года назад

Sorry, really confused about the container thing nothing is working i dont think it applies to what im doing? Would really like some feedback and help