Αναδιάταξη μπλοκ μέσω media queries στο 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;
}
Τώρα ας γράψουμε τα στυλ για τα ίδια τα μπλοκ, χωρίς να καθορίσουμε εκείνες τις ιδιότητες που θα αλλάζουν μέσω media queries:
.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%;
}
}