css div box responsive using flexbox | css flexbox tutorial

preview_player
Показать описание
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!

GuitarreroDaniel
Автор

This video saved my day busy with a responsive website

pieterdeane
Автор

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

ekg
Автор

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

ttu
Автор

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.

annahabanna
Автор

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

gaishiya
Автор

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

reduke
Автор

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

slimer
Автор

just what id been looking for. Thanks a lot!

piyaponpoottima
Автор

Amazing video. thank you so much from 2022

bekzatmurat
Автор

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

sushmapuli
Автор

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

samailbe
Автор

Thanks a lot, this was very help full.

mahtab
Автор

thanks buddy, u did a very helpfull job👍🏾

muhammadarifanjasrachmattu
Автор

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

websolution
Автор

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

dhruvpatel
Автор

<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>

Lonesimps
Автор

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.

aaroncatolico
Автор

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

zoro
Автор

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

fabriciomedeiros
welcome to shbcf.ru