Reorganizacija blokova preko media upita u CSS
Hajde da naučimo kako da izvršimo reorganizaciju blokova na različitoj širini ekrana. Za primer, implementirajmo ovakvo ponašanje:
Za početak napišimo HTML kod naših blokova:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
Sada hajde da napišemo stilove roditelju naših blokova:
.parent {
display: flex;
width: 90%;
margin: 50px auto;
border: 1px solid red;
}
Sada napišimo stilove samim blokovima, bez navođenja onih svojstava koja će se menjati media upitima:
.child {
box-sizing: border-box;
padding: 20px;
border: 1px solid green;
}
Na velikoj širini ekrana neka razmak između blokova bude izračunat automatski:
@media (min-width: 500px) {
.parent {
justify-content: space-between;
}
}
Postavimo širinu našim blokovima malo manju od
50%, da ostavimo mesta
za razmak:
@media (min-width: 500px) {
.child {
width: 49.5%;
}
}
Na maloj širini ekrana postavimo naše blokove u kolonu:
@media (max-width: 500px) {
.parent {
flex-direction: column;
}
}
Postavimo im donji razmak:
@media (max-width: 500px) {
.child {
margin-bottom: 10px;
}
}
Sastavimo sve zajedno i dobijamo sledeći kod:
.parent {
display: flex;
width: 90%;
margin: 50px auto;
}
.child {
box-sizing: border-box;
padding: 20px;
border: 1px solid green;
}
@media (max-width: 500px) {
.parent {
flex-direction: column;
}
.child {
margin-bottom: 10px;
}
}
@media (min-width: 500px) {
.parent {
justify-content: space-between;
}
.child {
width: 49.5%;
}
}