Learn CSS flexbox in 10 minutes! 💪
Vložit
- čas přidán 1. 06. 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 CZcams 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 CZcamsrs 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!!!
A master class in how to present technical material. Thank you!
You are a real Master, bro! Respect!!
One of the best & precise description of Flex box😃
This is a really super easy explanation for new programmers. ❤
Amazing explaination in a short time
Tanks bro helpful Playlist
thank you my brother your voice its awsome and you explain everything in easy way. you help so much I am from morocco
Amazing tutorial. Thanks 👍
Wonderful video man
Thanks a lot
Bro code, your content is amazing, bro. Keep up the amazing work, bro 😊
🎉bro iam curiously waiting for ur new series finally it happens.your a captain America for code beginners bro😊
This is really good and very helpful. Thank you!
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 amazing video
thank you. I understood flexbox. God luck🤩
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
Huge respect to this man
Whole Flexbox concepts covered in just 10 minutes
Such a helpful video thank u
Thanks great video.
I was also expecting to see flex-grow, flex-shrink
Learning front end right now I dislike it so far waiting for backend but you’re making it a lot easier
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 .
Lovely😊
Thank you so much ⭐️
amazing bro.
Super Helpful. My teacher makes no sense
Thank you ❤
Good video. Q: instead of the number and color, is it possible to have a graphic inserted into the box?
bro you are the best may Allah bless you 🤲
God died a long tìme ago new kid
Epic bro
Lovely
Thanks bro!
Super talented
Life savior 🎉
amazing explanation thanks(:
where are you from
You're a gigachad thanks a bunch
Thank you
+1 subscriber!
მადლობა. thanks.
Easy to understand, and really help me, the newbie. Thanks a ton Sir.
thanks
I thought the default value for align-items was stretch, and not flex-start 😕
Thanks for such a great video!
In 1993 this was a dream, and in 2009 it became a plan
Finally, I can center a div
Will you do Grid Please
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 👍
Hello . Please do a front-end project from scratch
wish you were my college teacher..
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?
The way you explain it melt my heart 💖 thanks a lot 🪄
.Bro-Code {
text-align: THE BEST;
}