Πλακιδίων στο Flexbox σε CSS

Ας μάθουμε τώρα πώς να δημιουργούμε πλακιδίων χρησιμοποιώντας flexbox. Αρχικά, θα τακτοποιήσουμε τα flex blocks σε πολλαπλές σειρές, με τρία blocks ανά σειρά.

Για να το κάνουμε αυτό, θα ορίσουμε στο γονέα των flex blocks ένα πλάτος 300px και το flex-wrap στην τιμή wrap, και στα παιδικά στοιχεία ένα πλάτος 100px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ας προσθέσουμε τώρα οριζόντιο κενό μεταξύ των blocks μας. Για να το κάνουμε αυτό, θα αυξήσουμε το πλάτος του γονέα για να δημιουργήσουμε επιπλέον χώρο για τα περιθώρια.

Εφόσον έχουμε τρία blocks ανά σειρά, αυτό σημαίνει ότι υπάρχουν δύο κενά μεταξύ τους. Ας υποθέσουμε ότι θέλουμε κάθε κενό να έχει πλάτος 10px. Αυτό σημαίνει ότι το πλάτος του γονέα πρέπει να αυξηθεί κατά 20px, δηλαδή να γίνει όχι 300px, αλλά 320px.

Ας ορίσουμε τώρα στο γονέα των blocks την ιδιότητα justify-content στην τιμή space-between και θα έχουμε το επιθυμητό κενό μεταξύ των blocks:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ας προσθέσουμε τώρα το ίδιο κενό μεταξύ των blocks και κάθετα. Για να το κάνουμε αυτό μπορούμε να ορίσουμε την ιδιότητα align-content στην τιμή space-between.

Ωστόσο, για να γίνει αυτό, πρέπει να ορίσουμε ύψος στο γονέα, διαφορετικά το align-content δεν θα λειτουργήσει. Ας ορίσουμε το ύψος σε 320px. Σε αυτήν την περίπτωση, θα χωρέσουν ακριβώς τρεις σειρές blocks με 100px ύψος συν δύο κενά μεταξύ των σειρών των 10px.

Ας το εκτελέσουμε:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Όλα λειτουργούν υπέροχα, αλλά υπάρχουν ορισμένα προβλήματα, τα οποία θα εξετάσουμε στο επόμενο μάθημα.