Learn CSS flexbox in 10 minutes! πͺ
132,399
Published 2023-09-21
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
All Comments (21)
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bro Code</title> <link rel="stylesheet" href="style.css"> <body> <div class="container"> <div class="box" id="box1">1</div> <div class="box" id="box2">2</div> <div class="box" id="box3">3</div> <div class="box" id="box4">4</div> </div> </body> </html> /* 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%); }
-
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
-
Best teachers award goes to "Bro code" ππ»ππ»
-
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 <3
-
I watch a lot of coding videos on YouTube 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 YouTubers 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....
-
I was really struggling with learning how to structure content and this helped a lot!!!
-
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.
-
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!!!
-
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
-
This is really good and very helpful. Thank you!
-
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
-
πbro iam curiously waiting for ur new series finally it happens.your a captain America for code beginners broπ
-
Simple,straightforward and understandable β€
-
Wonderful video man Thanks a lot
-
Tanks bro helpful Playlist
