CSS Flexbox Tutorial for beginners
HTML-код
- Опубликовано: 21 апр 2023
- 👉 Get the best web hosting to deploy your websites: www.hostinger.com/coding2go
✌️ Use our discount code CODING2GO to get 10% off on all web hosting packages with a duration of 12 months or more
#css #flexbox #webdevelopment
In this video you are going to learn everything you need to know about CSS Flexbox.
With Flexbox, you can easily control the alignment and size of your HTML elements, allowing you to create complex layouts that were previously difficult to achieve with traditional CSS.
By the end of this video you will be able to create modern and responsive websites like a pro!
contents of this video:
1. main-axis & cross-axis - flex-direction
2. alignment - justify-content & align-items
3. flexibility modifier - flex-grow, flex-shrink, flex-basis
4. flex-wrap
CSS starting code:
*{
margin: 0;
padding: 0;
}
body{
height: 100%;
background-color: #222831;
}
.item{
width: 25px;
height: 25px;
background-color: #3FA9F5;
border-radius: 3px;
color: #fff;
text-align: center;
margin: 5px;
padding: 30px;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
Hey guys, we hope you enjoyed the video. The next flexbox video (practical project) is coming next week.
I have trying to understand the flex box on my course and your explanation was way way better, and it hit my brain in the right way, thank you so much!
Excellent job. Looking forward.
Amazing! Well explained and easy to understand. Maybe you could do a video on grid too?
Very informative Thx
upload faster bro you take decades to upload next video 😢
We will be more active now. I promise.