I have a section containing 4 centered divs.
Here is what I want to achieve:
When the screen width is over 1280px, display all 4 divs in a row. When the screen width is less than 1280px, show 2 divs per row. And when the screen width is under 640px, display one div per row.
HTML
<section class="gallery">
<div class="flex flex--center">
<div class="gallery-div">
</div>
<div class="gallery-div">
</div>
<div class="gallery-div">
</div>
<div class="gallery-div">
</div>
</div>
</section>
CSS
.flex{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex--center{
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.gallery-div{
background-color:pink;
width:300px;
height300px;
margin:10px 5px;}
@media (max-width: 640px) {
.home-section .flex {
display: block;
}