Learn CSS flexbox in 10 minutes! 💪

#CSS #course #tutorial
CSS flexbox introduction tutorial example explained
00:00:00 intro
00:00:12 HTML setup
00:00:52 CSS setup
00:01:58 display: flex
00:02:18 flex-direction
00:02:58 justify-content
00:04:13 CSS setup
00:04:48 align-items
00:05:48 flex-wrap
00:06:41 align content
00:07:43 gap
00:08:30 align-self
00:09:21 order
00:09:46 conclusion

[@BroCodez]

Bro Code


1
2
3
4


/* style.css */
.container{
display: flex;
height: 90vh;
}
.box{
width: 150px;
height: 150px;
font-size: 8em;
text-align: center;
border-radius: 15px;
}
#box1{
background-color: hsl(0, 100%, 70%);
}
#box2{
background-color: hsl(52, 100%, 70%);
}
#box3{
background-color: hsl(111, 100%, 70%);
}
#box4{
background-color: hsl(201, 100%, 70%);
}

[@Zakibinxaaji1]

Thanks bro 😊

[@divineeshio8887]

Bro thanks

[@Free.DrAfia]

I don't understand why people don't watch his channel, like its so easy explanation, I didn't get bored. My concepts get more clear. THANKA TO BRO CODD

[@chiggywiggy524]

Wait for some time, it's been only around 2 months. Besides, if you search flexbox on youtube only older videos from different creaters will come up. People are unable to find these videos because of algorithm.

[@G_.G_.G]

Best teachers award goes to "Bro code" 👏🏻👏🏻

[@jdspillers77]

This one was probably the best explanation I have found so far. Conceptually Flex-box makes complete sense to me, but for some reason, I have been struggling with it when building pages. This tutorial helped iron out some of the confusion I was still having.

[@deniseauneelvestad3206]

OMG, you are seriously the one who teaches just how I understand things. I've watched plenty of other videos, but you are the only one who talks to my brain so it understands. Thank you

[@secretr5024]

I was really struggling with learning how to structure content and this helped a lot!!!

[@willwill1738]

Most succinct and down to earth teaching on Flexbox with easy code example and lead you a thorough understanding, million thanks Pal!!!

[@mikiyasayele9767]

you are legend...you make my frontend journey easy

[@chansfor]

A master class in how to present technical material. Thank you!

[@zahid1909]

You are a real Master, bro! Respect!!

[@pctechinfosys]

One of the best & precise description of Flex box😃

[@khurumshahzad6521]

Amazing explaination in a short time

[@capslock3250]

Amazing tutorial. Thanks 👍

[@-Corvo_Attano]

Whole Flexbox concepts covered in just 10 minutes

[@nnejiben]

This is really good and very helpful. Thank you!

[@SaidSaeed-bcbcaa]

thank you my brother your voice its awsome and you explain everything in easy way. you help so much I am from morocco

[@danielisaac3722]

Tanks bro helpful Playlist

[@anuc1804]

Please do a video on grid as well

[@namanthacker]

Wonderful video man
Thanks a lot

[@mirzakhursheedabbas4184]

🎉bro iam curiously waiting for ur new series finally it happens.your a captain America for code beginners bro😊

[@Crowmeir]

My bro I'm on my journey to force myself in learning CSS so I won't have to google way too much. Your vids definitely helps a lot!

[@dennispacho9532]

Huge respect to this man

[@MrKhulaid]

Bro code, your content is amazing, bro. Keep up the amazing work, bro 😊

[@CorDeLapis]

I'm from Brazil and i have a technical english.
I could understand everything what you taught about flexbox.

[@rimavedeckiene2203]

thank you. I understood flexbox. God luck🤩

[@djfago6240]

I have a special name that I always call him with...( Bro Genius). Sometimes I wonder how big his brain is. Thank you for everything sir .

[@josephmiller3823]

Learning front end right now I dislike it so far waiting for backend but you’re making it a lot easier

[@OUTSS1]

Such a helpful video thank u

[@sereneflatun]

Thank you so much ⭐️

[@kerimtim]

Thanks great video.
I was also expecting to see flex-grow, flex-shrink

[@sam4457]

amazing amazing video

[@boriwayeoluwatosin2521]

Thank you ❤

[@gentlman847]

bro you are the best may Allah bless you 🤲

[@chilli_Tea]

God died a long tìme ago new kid

[@imadiman528]

You're a gigachad thanks a bunch

[@chrissylaurenbutler3639]

Super Helpful. My teacher makes no sense

[@vaibhavwadhavane874]

amazing bro.

[@ayMillmusic]

Life savior 🎉

[@kathikr9360]

Thank you

[@user-ht9sy4yc2e]

Lovely😊

[@kubataiupov1245]

Thanks bro!

[@jay-in-az]

Good video. Q: instead of the number and color, is it possible to have a graphic inserted into the box?

[@masfiqurrahman984]

Super talented

[@MarkyGoldstein]

In 1993 this was a dream, and in 2009 it became a plan

[@makansari1425]

Lovely

[@KingShortssz]

+1 subscriber!

[@giorgiberdzenishvili4115]

მადლობა. thanks.

[@user-ug5cy5ve4g]

amazing explanation thanks(:

[@kentkent23722]

where are you from

[@suyashman7964]

Epic bro

[@salwaahmadz6215]

Finally, I can center a div

[@S_Y_R_Falcon]

thanks

[@horacinis]

I thought the default value for align-items was stretch, and not flex-start 😕
Thanks for such a great video!

[@andycheung83a]

Will you do Grid Please

[@ShashankJ04]

one grid video please!!!!!

[@abuqeisimran9676]

Easy to understand, and really help me, the newbie. Thanks a ton Sir.

[@Osamzkitchen]

Pls can you post shopping cart tutorial

[@rohitpariyar1095]

Please explain CSS GRID

[@SOLDAT_MENDES]

css grid is a powerful layout system in css that allows you to create grid-based designs. it helps you divide your webpage into rows and columns, making it easier to position and align elements. it's a great tool for creating responsive and flexible layouts.

[@yashwantlahre4863]

​@@SOLDAT_MENDEShe meant in video but still thanks 👍

[@makuaac4199]

❤❤❤❤

[@sherlockholms2544]

Hello . Please do a front-end project from scratch

[@govind9060]

wish you were my college teacher..

[@NLEXPLORER]

I suggest to use grid. Grid is much more easer and way less code then flexbox. This is a littlebit old fasioned coding and does not have the flexability as Grid.

[@setasan]

Althoght i am more of a grid guy i really enjoy flexbox despise being so verbose.

[@Alex-uc9gp]

hallå kan du göra min kod

[@heygaurav]

Comment if you're watching Adit?

[@Irfans.official]

The way you explain it melt my heart 💖 thanks a lot 🪄

[@Ella_1994]

.Bro-Code {
text-align: THE BEST;
}