Πλακίδια με αυτόματο πλάτος μπλοκ στο CSS

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

Ας υποθέσουμε ότι έχουμε έναν γονέα όπως εδώ:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

Ας υποθέσουμε ότι τα στοιχεία αυτής της πλακιδωτής διάταξης είναι 4 μπλοκ στη σειρά:

.child {
	box-sizing: border-box;
	width: 200px;
	height: 100px;
	border: 1px solid green;
}

Ας ορίσουμε το πλάτος των μπλοκ μας έτσι, ώστε το καθένα από αυτά να καταλαμβάνει το ένα τέταρτο του γονέα. Για αυτό ας ορίσουμε το μέγεθός τους σε 25%:

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

Ορίστε στα μπλοκ πλάτος σε ποσοστά έτσι, ώστε στην πλακιδωτή διάταξη να υπάρχουν τρία μπλοκ στη σειρά.

Ορίστε στα μπλοκ πλάτος σε ποσοστά έτσι, ώστε στην πλακιδωτή διάταξη να υπάρχουν δύο μπλοκ στη σειρά.

Ορίστε στα μπλοκ πλάτος σε ποσοστά έτσι, ώστε στην πλακιδωτή διάταξη να υπάρχει ένα μπλοκ στη σειρά.