Το μοντέλο 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 elements
συμπεριφέρονται ως inline-block
στοιχεία και το ύψος τους είναι ίσο με το 100% του γονικού.
Αλλάξτε τις διαστάσεις από το παραπάνω παράδειγμα για να δείτε το αποτέλεσμα. Σύρετε την κάτω δεξιά γωνία από το πορτοκαλί πλαίσιο.