css div box responsive using flexbox | css flexbox tutorial

this video tutorial about , make a responsive css3 grids div container box layout usgin flex box absolute for beginners .
equal with height of div boxs using css and html

use flexbox style :

display : flex
flex-direction : row
justify-content : space-around
flex-flow : wrap

[GuitarreroDaniel]

No talking and pure code, amazing video man, thanks!

[pieterdeane]

This video saved my day busy with a responsive website

[ekg]

I love This Tutorial. No Talking.. Just Showing Code! 🔥🔥🔥

[ttu]

Thank you is not enough. My headache is now gone! Your amazing.

[annahabanna]

Gosh, I thought I would never find this gem. Thank you so much❤️ This exactly what I needed on my beginner's journey to web dev.

[gaishiya]

Thank you sooo soooo did save my 4 hrs of hard work

[reduke]

THANK YOU! GOD THANK YOU! you don't even understand how much this helped me.

[slimer]

Oh thank you so much! god bless you! this was WAY easy compared to other websites like man this is AMAZING!

[piyaponpoottima]

just what id been looking for. Thanks a lot!

[bekzatmurat]

Amazing video. thank you so much from 2022

[sushmapuli]

You just really helped me alotttt....Thank you so sooo muchh

[samailbe]

thank you so much! its really helpful for a beginner like me

[mahtab]

Thanks a lot, this was very help full.

[muhammadarifanjasrachmattu]

thanks buddy, u did a very helpfull job👍🏾

[websolution]

Thank you for your video. This helped me a lot.

[dhruvpatel]

Thank you so much for adding new bow in my designing kit

[Lonesimps]

<div class="container">

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>


<div>


<style type"text/css">

.container
width: 100%;
height: auto;
background: #007bbf;

/*add flexbox style*/

display: flex;
flex-direction: row;
justify-content: space-around;


}

.box{
width: 20%;
height:300px;
background: yellow;
width: 20px;
box-sizing: border-box;
font-size; 50px;

}

/*add responsive media quaries*/

@media screen and (max-width:1200px){
.box{
width: 40%;
}
}

@media screen and (max-width:600px){
.box{
width: 90%;
}
}

</style>

[aaroncatolico]

Although your code works, there is not even spacing between each box if youre looking at the padding around the container. In web design, you're always supposed to try aiming for a symmetrical design.

[zoro]

Thank you ❤️ this helped alot. Liked and subbed.

[fabriciomedeiros]

is possible when arrive 600px for exemple, transform this divs in Carousel ?