css div box responsive using flexbox | css flexbox tutorial

[@GuitarreroDaniel]

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

[@ek1g]

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

[@pieterdeane2830]

This video saved my day busy with a responsive website

[@tt2u2187]

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.

[@reduke]

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

[@gaishiya7696]

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

[@slimer6023]

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

[@sunalayo9805]

Thanks ! you helped me. only I need to adjust to my customer's taste.

[@piyaponpoottima8377]

just what id been looking for. Thanks a lot!

[@bekzatmurat1341]

Amazing video. thank you so much from 2022

[@its_personal78]

100% understandable Thanks

[@SpectralScares354]

very informative video bro❣❣

[@sushmapuli1233]

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

[@nghiacter64]

nice video

[@dhruvpatel6621]

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

[@adityakashyup132]

Thanxx buddy

[@techawatch]

Thank you so helpful.

[@Islamputh]

thnx alot

[@rgshopbd]

thanks a lot

[@shahmeerahmed3602]

THNAKYOUUUUU SOO MUCH IT IS MUCH HELPFUL FOR ME

[@mahtab5337]

Thanks a lot, this was very help full.

[@samailbe4533]

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

[@fernandonogueira2291]

Amazing, man! Thanks a lot!

[@RianF987]

Thanks bro, this helped alot

[@FingleAnimes]

Thank you!!!! Was sooooo util!!

[@kakoozaxenyondo00]

Thanks

[@krisnadwisetyadi2964]

Amazing thanks man

[@websolution7181]

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

[@niteshbisht31]

Thanks bro it solved my problem

[@Misathebotter]

really helpful, thanks!

[@Lonesimps]

1
2
3
4
.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%;
}
}

[@azziewatermelon]

noice one my nickel gallium

[@Lonesimps]

Haks 911

[@arcchay]

Hola, quería ahorrarme tiempo copiando tu código pero me tardé más, tienes unos errorcillos: En la clase .box la línea 4 no es "width" sino
"margin" y después de "font-size" tiene punto y coma y es dos puntos.De todas formas se agradece.

[@sockmonkeyjg]

not all heroes wear capes

[@muhammadarifanjasrachmattu6404]

thanks buddy, u did a very helpfull job👍🏾

[@zoro635]

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

[@fredericforclif7953]

many thanks

[@Siahtcomc]

Thanksss

[@muhammadbilal6865]

html
1
2
3
4
5
6
css
.container{
width: 100%;
height: auto;
background: #73AD21;
/*add flexbox style*/
display: flex;
flex-direction: row;
justify-content: space-around;
flex-flow: wrap;
}
.box{
width: 20%;
height: 300px;
background: yellow;
margin: 20px;
box-sizing: border-box;
font-size: 50px;
}
/* add responive media queries */
@media screen and (max-width:1200px){
.box{
width:40%
}
}
@media screen and (max-width:600px){
.box{
width:90%
}
}

[@nathanch3365]

You are a secret hero man

[@muhammadbilal6865]

@@nathanch3365 Thank you

[@aaroncatolico7550]

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.

[@George-th8zr]

Oh thank you so much!

[@RodrigoSJesus]

I am brazil. Thank uoy so much!!!

[@Lonesimps]

hi brazil.. your welycum

[@azziewatermelon]

@@Lonesimps I luv cyum

[@ytBlowLo]

you are a W mate

[@niteshpariharr]

thanks bro you solver my problem

[@xaida419]

Grettings, what could i do if i want to keep on adding boxes
?

[@usamariaz3765]

Amazing

[@ashwininimbarte2303]

thnx

[@fabriciomedeiros987]

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

[@sanaemetate7173]

Really it's a great vid, very informative and also useful. Thank u a lot best.

[@Lonesimps]

oh ur welcyum

[@AnjaLSL]

Thanks 🌸

[@fabriciomedeiros987]

Thanks a lot!

[@mpferrypermana134]

Sangat membantu untuk permasalahan projek saya mantap

[@relaxationmeditation4538]

awesome

[@sapphiresky9603]

I just want the white page so not many people know how to do this thank you.

[@Matrix92100]

Thx bro❤️🤲

[@zbigniews497]

Thank you so much!

[@godofsyco4615]

Great

[@godofsyco4615]

U r Awsm

[@nishanthann6142]

Tq so muchu bro😍

[@habibabebo2813]

THANK YOUUUUUUUUU

[@Ginfio]

Thank You.
You z best.

[@godofsyco4615]

Thank u

[@2233vineet]

thanks mate

[@nayaunglin5015]

thanks

[@frederikplet1579]

Realy nice tutorial but next time can you then make a file with the text

[@alf1516]

Thanks man.

[@aravinddev8708]

can we write the text in the box

[@AndressaQuadro]

Thank you!

[@TheDudeway]

God, how come so many people remember all this codes and how the hell should my brain learn this ?

[@Henry_Nunez]

👏👏👈🔔

[@ifelipesilva]

Great!

[@luispaulo4008]

Thank you. :)

[@Nuizahaha]

Thank you.♥

[@neoTriny]

god bless you 😭😭

[@3dmaster199]

thanks great works

[@RSTao77432]

Hello, Do you know how to build responsive & Scale divs vertical size in ratio with the width; (So images & container divs keep their aspect ratio's?) I have been playing with Vmin Vmax etc for weeks.

[@azziewatermelon]

*juice substance noises*

[@Lonesimps]

TF?

[@azziewatermelon]

@@Lonesimps Juice as in self-made cyum, sorry for confusing you.

[@RSTao77432]

@@azziewatermelon You have both Confused me Muchly...

[@raghavendrakesari337]

I Love You

[@prajwalthokdive227]

yeh dekh dekh ke banna rha h ......

[@arimirarim]

Is the same effect possible without media queries?

[@rahuljethwa2531]

How

[@frederikplet1579]

What editor?

[@WebZoneCode]

Sublime Text 3

[@KomalSingh-u8r]

Hlw sir plx 🥹 help

[@CanalOBH]

Faltou o áudio explicando

[@shafiqshams3065]

no sound

[@najwa2865]

tidak membantuu

[@rachaelhatcher2505]

Please let me copy and paste the text you poser.

[@rommeljohnsevilla7535]

thank you

[@giusxepe5469]

thank you!

[@robabsolent]

Thank you!

[@kunalgulati3358]

thank you