Μέγεθος ευέλικτου στοιχείου κατά μήκος του κύριου άξονα

Οι ιδιότητες width και height ορίζουν το πλάτος και το ύψος του ευέλικτου στοιχείου ανεξάρτητα από την κατεύθυνση των αξόνων. Δηλαδή, εάν ο άξονας είναι οριζόντιος, τότε το width θα ορίζει το πλάτος, αλλά εάν ο άξονας είναι κατακόρυφος, τότε το width θα συνεχίσει να ορίζει το πλάτος. Μερικές φορές αυτή η συμπεριφορά δεν είναι βολική.

Στο ευέλικτο μοντέλο υπάρχει μια ειδική ιδιότητα flex-basis, που ορίζει το μέγεθος του στοιχείου κατά μήκος του κύριου άξονα. Αυτό σημαίνει ότι εάν ο κύριος άξονας είναι οριζόντιος - αυτή η ιδιότητα θα ορίζει το πλάτος των στοιχείων, ενώ εάν είναι κατακόρυφος - τότε το ύψος. Αυτή η ιδιότητα πρέπει να οριστεί στα ίδια τα ευέλικτα στοιχεία, και όχι στον γονέα τους. Ας δούμε με παραδείγματα.

Ας υποθέσουμε ότι ο κύριος άξονας είναι οριζόντιος, και το flex-basis έχει την τιμή 50px. Σε αυτήν την περίπτωση, το πλάτος των στοιχείων θα είναι 50px:

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

css.parent {
  display: flex;
  flex-direction: row; /* ο άξονας είναι οριζόντιος */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;   /* μέγεθος στοιχείου */
  border: 1px solid green;
}

Результат:

Ας γυρίσουμε τώρα τον άξονα, χωρίς να αλλάξουμε την τιμή της ιδιότητας flex-basis. Σε αυτήν την περίπτωση το ύψος των στοιχείων θα είναι 50px:

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

css.parent {
  display: flex;
  flex-direction: column; /* ο άξονας είναι κατακόρυφος */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат: