Ιδιότητα flex

Η ιδιότητα flex είναι μια συντομογραφία για τις flex-basis, flex-shrink και flex-grow.

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

Η σειρά των τιμών δεν έχει σημασία. Η δεύτερη και η τρίτη παράμετροι (flex-shrink, flex-basis) δεν είναι υποχρεωτικές.

Τιμές

Δείτε τις αντίστοιχες ιδιότητες.

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

Παράδειγμα

Ας υποθέσουμε ότι έχουμε 3 στοιχεία. Το πλάτος κάθε ενός από αυτά είναι 200px και συνολικά ισούται με 600px, που είναι μεγαλύτερο από το πλάτος του γονικού περιέκτη, το οποίο είναι 300px. Ας ορίσουμε για το πρώτο στοιχείο πλάτος 200px, για το δεύτερο στοιχείο - 300px, για το τρίτο στοιχείο - 100px. Σε όλα τα στοιχεία ας είναι η τιμή flex-basis ίση με 1, και το flex-shrink - 1, 2, 3 αντίστοιχα με τον τακτικό αριθμό του στοιχείου:

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

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex: 200px 1 1;
}
.elem2 {
	flex: 300px 1 2;
}
.elem3 {
	flex: 100px 1 3;
}

Δείτε επίσης

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