Learn CSS flexbox in 10 minutes! 💪
ฝัง
- เผยแพร่เมื่อ 26 มิ.ย. 2024
- #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
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%);
}
Thanks bro 😊
Bro thanks
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
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.
Best teachers award goes to "Bro code" 👏🏻👏🏻
I watch a lot of coding videos on TH-cam for reference to subjects I'm not clear on. You do the best job at passing in between tasks while entering your code. You're a great teacher. Other TH-camrs rush through the content and talk too much and too quickly. But you hands down hit it right on the nail. For that I must say thanks. You understand that the people that watch these videos are mostly beginners / students and not professional web developers. Thanks....
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.
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
I was really struggling with learning how to structure content and this helped a lot!!!
you are legend...you make my frontend journey easy
Most succinct and down to earth teaching on Flexbox with easy code example and lead you a thorough understanding, million thanks Pal!!!
In 1993 this was a dream, and in 2009 it became a plan
You are a real Master, bro! Respect!!
A master class in how to present technical material. Thank you!
One of the best & precise description of Flex box😃
Amazing explaination in a short time
Huge respect to this man
Whole Flexbox concepts covered in just 10 minutes
🎉bro iam curiously waiting for ur new series finally it happens.your a captain America for code beginners bro😊
Tanks bro helpful Playlist
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!
Amazing tutorial. Thanks 👍
thank you my brother your voice its awsome and you explain everything in easy way. you help so much I am from morocco
amazing amazing video
Bro code, your content is amazing, bro. Keep up the amazing work, bro 😊
This is a really super easy explanation for new programmers. ❤
This is really good and very helpful. Thank you!
Wonderful video man
Thanks a lot
I'm from Brazil and i have a technical english.
I could understand everything what you taught about flexbox.
Please do a video on grid as well
thank you. I understood flexbox. God luck🤩
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 .
Learning front end right now I dislike it so far waiting for backend but you’re making it a lot easier
Life savior 🎉
Lovely😊
Thank you so much ⭐️
amazing bro.
Epic bro
Such a helpful video thank u
You're a gigachad thanks a bunch
Thanks bro!
Thank you ❤
bro you are the best may Allah bless you 🤲
God died a long tìme ago new kid
Lovely
მადლობა. thanks.
really helpful
Thanks great video.
I was also expecting to see flex-grow, flex-shrink
Super talented
Super Helpful. My teacher makes no sense
Thank you
+1 subscriber!
Good video. Q: instead of the number and color, is it possible to have a graphic inserted into the box?
Finally, I can center a div
thanks
amazing explanation thanks(:
where are you from
❤❤❤❤
I thought the default value for align-items was stretch, and not flex-start 😕
Thanks for such a great video!
Will you do Grid Please
Is there are similar property to align self to the other axis
one grid video please!!!!!
thanks bro code
Pls can you post shopping cart tutorial
Please explain CSS GRID
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.
@@SOLDAT_MENDEShe meant in video but still thanks 👍
Easy to understand, and really help me, the newbie. Thanks a ton Sir.
wish you were my college teacher..
Hello . Please do a front-end project from scratch
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.
Althoght i am more of a grid guy i really enjoy flexbox despise being so verbose.
hallå kan du göra min kod
Comment if you're watching Adit?
.Bro-Code {
text-align: THE BEST;
}
The way you explain it melt my heart 💖 thanks a lot 🪄