Εργασία με Flexboxes στο CSS
Όπως γνωρίζετε, υπάρχει η ιδιότητα justify-content,
που ευθυγραμμίζει τα στοιχεία κατά μήκος του κύριου άξονα.
Υπάρχει επίσης η ιδιότητα align-items, που
ευθυγραμμίζει τα στοιχεία κατά μήκος του εγκάρσιου άξονα. Ας
παίξουμε λίγο μαζί της.
Ας υποθέσουμε ότι τώρα τα μπλοκ είναι διατεταγμένα σε σειρά,
δηλαδή ο εγκάρσιος άξονας είναι κατευθυνόμενος προς τα κάτω. Με
τη βοήθεια του align-items ας τοποθετήσουμε αυτά τα μπλοκ
στο κέντρο:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Ας προσθέσουμε τώρα περισσότερα μπλοκ, ας προσθέσουμε
αλλαγή γραμμής με τη βοήθεια του flex-wrap,
ας αυξήσουμε το ύψος του γονέα από 300px σε
500px και ας δούμε πώς θα λειτουργήσει το align-items
σε αυτήν την περίπτωση πολλαπλών γραμμών:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Όπως βλέπουμε, κάτι δεν κεντράρει πολύ καλά. Σαν κάθε γραμμή να κεντράρεται από μόνη της στον χώρο που της έχει διατεθεί. Ας κάνουμε όλες οι γραμμές ως ένα ενιαίο σύνολο να πάνε στο κέντρο του γονέα.
Για αυτό πρέπει να χρησιμοποιήσετε την ιδιότητα align-content,
που χρειάζεται για κείμενο πολλαπλών γραμμών.
Ας ξαναγράψουμε τον κώδικά μας:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Η ιδιότητα align-content δέχεται τις
ίδιες τιμές όπως και το align-items.
Η τιμή space-between
Ας δούμε για παράδειγμα την τιμή
space-between. Ας ορίσουμε στο γονέα
ύψος 320px. Εφόσον έχουμε τρεις
γραμμές, και κατά συνέπεια δύο αποστάσεις μεταξύ
των γραμμών, τότε αυτές οι αποστάσεις θα είναι κάθε μία
10px:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: space-between;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Η τιμή stretch
Ας δοκιμάσουμε την τιμή stretch.
Για αυτό ας αφαιρέσουμε το ύψος από τα παιδιά, και στον γονέα
ας ορίσουμε ύψος 600px για πιο
εμφανή αποτέλεσμα.
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: stretch;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
Η τιμή stretch για το align-content είναι
η προεπιλεγμένη τιμή. Αν αφαιρέσουμε εντελώς το ύψος
από τα παιδιά, αφαιρέσουμε την ιδιότητα align-content,
αλλά αφήσουμε το ύψος του γονέα και το flex-wrap
- όλα θα λειτουργούν το ίδιο:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
Αν όμως αφαιρέσουμε και το flex-wrap
- όλα θα γίνουν μονής γραμμής:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
Ας αναστρέψουμε τον άξονα
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Ειδικές συνθήκες
Χωρίς flex-wrap: wrap τίποτα δεν λειτουργεί ας υποθέσουμε ότι έχουμε μία γραμμή:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Ας αφαιρέσουμε το flex-wrap: wrap - το align-content: center θα σταματήσει να λειτουργεί:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
