Το μοντέλο flex

Το μοντέλο flex ή flexbox όπως αναφέρεται συχνότερα έρχεται να καλύψει αδυναμίες για το layout που έχουν άλλες τεχνικές όπως με το position, display, float, tables κλπ.

Έχει σχεδιαστεί για μονοδιάστατη (οριζόντια ή κάθετη) διάταξη στοιχείων και γι'αυτό διακρίνουμε δύο άξονες που είναι:

  • The main axis
  • The cross axis

Όταν έχουμε ορίσει ως main axis τον οριζόντιο άξονα, τότε ο cross axis αναφέρεται στον κάθετο και αντίστροφα.

flex container και flex elements

Τα στοιχεία που πρόκειται να διαταχθούν (οριζόντια ή κάθετα) λέγονται flex elements και ο περιέκτης (container) που τα περιέχει λέγεται flex container.

Για να ισχύει το flexing πρέπει το container να περιέχει την ιδιότητα: display:flex; και την ιδιότητα flex-direction:row; ή flex-direction:column; η οποία θα καθορίζει τον άξονα διάταξης στοιχείων (οριζόντια ή κάθετα). Η τιμή flex-direction:row; είναι η προκαθορισμένη και έτσι μπορεί να παραληφθεί άν έχουμε οριζόντια διάταξη.

<!DOCTYPE html>
<html>
	<head>
		<title>the flex model</title>
		<meta charset="utf-8" />
		<style>
			.flex-container {
				display: flex;
				flex-direction: row;
				background-color: orange;
			}

			.flex-container > div {
				background-color: #f1f1f1;
				margin: 10px;
				padding: 20px;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div>flex element 1</div>
			<div>flex element 2</div>
			<div>flex element 3</div>  
		</div>
	</body>
</html>
flex element 1
flex element 2
flex element 3

Τα στοιχεία flex elements συμπεριφέρονται ως inline-block στοιχεία και το ύψος τους είναι ίσο με το 100% του γονικού.

Αλλάξτε τις διαστάσεις από το παραπάνω παράδειγμα για να δείτε το αποτέλεσμα. Σύρετε την κάτω δεξιά γωνία από το πορτοκαλί πλαίσιο.