Ιδιότητα flex-basis

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

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

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

Σύνταξη

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

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

Παράδειγμα

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

<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; /* άξονας οριζόντιος */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* μέγεθος στοιχείου */
	border: 1px solid green;
}

Παράδειγμα

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

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

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

Δείτε επίσης

ιδιότητα flex-direction,
που ορίζει την κατεύθυνση των αξόνων των flex blocks
ιδιότητα justify-content,
που ορίζει τη στοίχιση κατά μήκος του κύριου άξονα
ιδιότητα align-items,
που ορίζει τη στοίχιση κατά μήκος του εγκάρσιου άξονα
ιδιότητα flex-wrap,
που ορίζει την πολυγραμμικότητα των flex blocks
ιδιότητα flex-flow,
συντόμευση για flex-direction και flex-wrap
ιδιότητα order,
που ορίζει τη σειρά των flex blocks
ιδιότητα align-self,
που ορίζει τη στοίχιση ενός μόνο block
ιδιότητα flex-grow,
που ορίζει την "απληστία" των flex blocks
ιδιότητα flex-shrink,
που ορίζει τη συμπιεστότητα των flex blocks
ιδιότητα flex,
συντόμευση για flex-grow, flex-shrink και flex-basis