Ιδιότητα flex-basis

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

Εφαρμόζεται σε συγκεκριμένο flex block.

Αυτή η ιδιότητα αποτελεί συστατικό μέρος της συντόμευσης flex.

Σύνταξη

cssεπιλογέας {
  flex-basis: οποιεσδήποτε μονάδες CSS (και ποσοστά) | auto;
}

Προεπιλεγμένη τιμή: auto.

Παράδειγμα

Ας υποθέσουμε ότι ο κύριος άξονας είναι οριζόντιος, και η 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;
}

Результат:

Δείτε επίσης