Στοιχεία Flex στο CSS

Εκτός από τους τύπους μπλοκ μοντέλων που μελετήσαμε υπάρχει και ένας ακόμη - τα στοιχεία flex. Για να λάβουμε τέτοια στοιχεία, πρέπει ο γονέας αυτών των στοιχείων να ορίσει την ιδιότητα display στην τιμή flex. Ο ίδιος ο γονέας θα παραμείνει στοιχείο μπλοκ, αλλά οι απόγονοί του θα γίνουν στοιχεία flex.

Τα στοιχεία flex, όπως και τα στοιχεία μπλοκ, μπορούν να έχουν πλάτος και ύψος, margin και padding. Ωστόσο, σε αντίθεση με τα στοιχεία μπλοκ, από προεπιλογή τα στοιχεία flex ταξινομούνται σε σειρά μέσα στον γονέα τους.

Ας δοκιμάσουμε:

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

.parent {
	display: flex; /* οι απόγονοι θα είναι στοιχεία flex */
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}