css div box responsive using flexbox | css flexbox tutorial
HTML-код
- Опубликовано: 30 окт 2017
- 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
No talking and pure code, amazing video man, thanks!
Thank you is not enough. My headache is now gone! Your amazing.
I love This Tutorial. No Talking.. Just Showing Code! 🔥🔥🔥
Oh thank you so much! god bless you! this was WAY easy compared to other websites like man this is AMAZING!
THANK YOU! GOD THANK YOU! you don't even understand how much this helped me.
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.
just what id been looking for. Thanks a lot!
This video saved my day busy with a responsive website
Thank you sooo soooo muchhhhhhhhhhhh!..you did save my 4 hrs of hard work
Amazing, man! Thanks a lot!
Thank you for your video. This helped me a lot.
thank you so much! its really helpful for a beginner like me
You just really helped me alotttt....Thank you so sooo muchh
Thank you ❤️ this helped alot. Liked and subbed.
thanks buddy, u did a very helpfull job👍🏾
Thanks a lot, this was very help full.
Thanks bro, this helped alot
Thank you!!!! Was sooooo util!!
THNAKYOUUUUU SOO MUCH IT IS MUCH HELPFUL FOR ME
Amazing video. thank you so much from 2022
really helpful, thanks!
Thanks ! you helped me. only I need to adjust to my customer's taste.
Thank you so much!
Thank you so much for adding new bow in my designing kit
Amazing thanks man
Thanks bro it solved my problem
Sangat membantu untuk permasalahan projek saya mantap
Thank you!
Thank you.♥
Oh thank you so much!
Thank You.
You z best.
thanks bro you solver my problem
I am brazil. Thank uoy so much!!!
hi brazil.. your welycum
@@Lonesimps I luv cyum
Great!
Thanks man.
nice video
you are a W mate
thank you!
Thanks a lot!
Really it's a great vid, very informative and also useful. Thank u a lot best.
oh ur welcyum
Thank you. :)
many thanks
thanks great works
is possible when arrive 600px for exemple, transform this divs in Carousel ?
thanks a lot
Realy nice tutorial but next time can you then make a file with the text
Amazing
Tq so muchu bro😍
THANK YOUUUUUUUUU
Thanks 🌸
thanks mate
Thx bro❤️🤲
awesome
Grettings, what could i do if i want to keep on adding boxes
?
Thanxx buddy
thank you
god bless you 😭😭
Thanks
Great
Thanksss
U r Awsm
Thank u
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.
thanks
👏👏👈🔔
I Love You
I just want the white page so not many people know how to do this thank you.
thnx
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.
*juice substance noises*
TF?
@@Lonesimps Juice as in self-made cyum, sorry for confusing you.
@@azziewatermelon You have both Confused me Muchly...
Is the same effect possible without media queries?
How
can we write the text in the box
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%;
}
}
noice one my nickel gallium
Haks 911
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.
not all heroes wear capes
What editor?
Sublime Text 3
God, how come so many people remember all this codes and how the hell should my brain learn this ?
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%
}
}
You are a secret hero man
@@nathanch3365 Thank you
Faltou o áudio explicando
yeh dekh dekh ke banna rha h ......
no sound
Hlw sir plx 🥹 help
tidak membantuu
Please let me copy and paste the text you poser.
thnx alot
Thank you!
thank you