Реорганизација на блокови преку медија-записи во CSS
Ајде да научиме како да извршуваме реорганизација на блокови на различни широчини на екранот. Како пример, да ја имплементираме оваа поведба:
За почеток, да го напишеме HTML кодот на нашите блокови:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
Сега да ги напишеме стиловите за родителот на нашите блокови:
.parent {
display: flex;
width: 90%;
margin: 50px auto;
border: 1px solid red;
}
Сега да ги напишеме стиловите за самите блокови, без да ги назначиме оние својства кои ќе се менуваат со медија-записи:
.child {
box-sizing: border-box;
padding: 20px;
border: 1px solid green;
}
На голема широчина на екранот, просторот помеѓу блоковите нека се пресметува автоматски:
@media (min-width: 500px) {
.parent {
justify-content: space-between;
}
}
Да поставиме широчина на нашите блокови малку помала
од 50%, за да оставиме простор
за маргина:
@media (min-width: 500px) {
.child {
width: 49.5%;
}
}
На мала широчина на екранот, да ги поставиме нашите блокови во колона:
@media (max-width: 500px) {
.parent {
flex-direction: column;
}
}
Да им зададеме долна маргина:
@media (max-width: 500px) {
.child {
margin-bottom: 10px;
}
}
Да собереме сè заедно и да го добиеме следниот код:
.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%;
}
}