Herrangskikking van blokke met media-navrae in CSS

Laat ons leer hoe om herrangskikking van blokke op verskillende skermwydtes uit te voer. As voorbeeld sal ons die volgende gedrag implementeer:

Om te begin, laat ons die HTML-kode van ons blokke skryf:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

Laat ons nou style vir die ouer van ons blokke skryf:

css.parent {
  display: flex;
  width: 90%;
  margin: 50px auto;
  border: 1px solid red;
}

Laat ons nou style vir die blokke self skryf, sonder om die eienskappe te spesifiseer wat sal verander deur media-navrae:

css.child {
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid green;
}

Op 'n groot skermwydte, laat die spasie tussen blokke outomaties bereken word:

css@media (min-width: 500px) {
  .parent {
    justify-content: space-between;
  }
}

Laat ons die breedte van ons blokke net minder as 50% stel om ruimte te laat vir 'n spasie:

css@media (min-width: 500px) {
  .child {
    width: 49.5%;
  }
}

Op 'n klein skermwydte, plaas ons ons blokke in 'n kolom:

css@media (max-width: 500px) {
  .parent {
    flex-direction: column;
  }
}

Laat ons 'n onderste spasie aan hulle toewys:

css@media (max-width: 500px) {
  .child {
    margin-bottom: 10px;
  }
}

Laat ons alles bymekaar sit en die volgende kode kry:

css.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%;
  }
}