CSS Μέσα Εκτύπωσης
Το μοντέλο διάταξης CSS Flexbox
Πριν από την εισαγωγή του μοντέλου διάταξης Flexbox, τα διαθέσιμα μοτίβα διάταξης ήταν τα εξής τέσσερα:
- Block, χρησιμοποιείται για μέρη της ιστοσελίδας (παράρτημα)
- Row (Inline), χρησιμοποιείται για κείμενο
- Ταμπήλες, χρησιμοποιούνται για δεδομένα δυάδων πίνακων
- Τοποθεσία, χρησιμοποιείται για την ακριβή τοποθεσία των στοιχείων
Το μοντέλο διάταξης Flexbox, μπορεί να σχεδιάσει πιο εύκολα ευέλικτες δομές αλληλεπιδραστικής διάταξης, χωρίς να χρειάζεται να χρησιμοποιήσετε ροές ή τοποθετήσεις.
Υποστήριξη περιηγητή
Όλοι οι σύγχρονοι περιηγητές υποστηρίζουν flexbox Προσόντα.
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Στοιχεία Flexbox
Για να ξεκινήσετε να χρησιμοποιείτε το μοντέλο Flexbox, πρέπει πρώτα να ορίσετε το Flex κουτί.
Τα παραπάνω στοιχεία δείχνουν έναν flex κουτί με τρία flex στοιχεία (μπλε περιοχή).
Example
κουτί flex που περιέχει τρία flex στοιχεία:
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div>
γονικού στοιχείου (κουτί)
με την προσθήκη του display Η ιδιότητα ρυθμίζεται σε: flexΟ flex κουτίς θα είναι ελαστικός:
Example
.flex-container {
display: flex;
}
Ακολουθούν οι ιδιότητες του flex κουτιού:
flex-direction 属性
flex-direction Η ιδιότητα καθορίζει σε ποια κατεύθυνση θα τακτοποιηθούν τα flex στοιχεία στον κουτί.
Example
column Η τιμή θα ρυθμίσει τα flex στοιχεία κάθετα (από πάνω προς κάτω):
.flex-container {
display: flex;
flex-direction: column;
}
Example
column-reverse Η τιμή θα τακτοποιήσει τα flex στοιχεία κάθετα (από κάτω προς πάνω):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Example
row Η τιμή θα τακτοποιήσει τα flex στοιχεία οριζόντια (από αριστερά προς δεξιά):
.flex-container {
display: flex;
flex-direction: row;
}
Example
row-reverse Η τιμή θα τακτοποιήσει τα flex στοιχεία οριζόντια (από δεξιά προς αριστερά):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-wrap 属性
flex-wrap Η ιδιότητα καθορίζει αν πρέπει να γίνει wrap των flex στοιχείων.
Το παρακάτω παράδειγμα περιέχει 12 flex στοιχεία για καλύτερη δemonstration της ιδιότητας flex-wrap.
Example
wrap Η τιμή καθορίζει ότι τα flex στοιχεία θα γίνουν wrap αν χρειαστεί:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Example
nowrap Η τιμή καθορίζει ότι δεν θα γίνει wrap των flex στοιχείων (προεπιλεγμένο):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Example
wrap-reverse Η τιμή καθορίζει ότι αν χρειαστεί, τα ελαστικά στοιχεία θα ανατραπούν σε αντίθετη σειρά:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow 属性
flex-flow Η ιδιότητα είναι μια συντομευμένη ιδιότητα για την ταυτόχρονη ρύθμιση των ιδιοτήτων flex-direction και flex-wrap.
Example
.flex-container {
display: flex;
flex-flow: row wrap;
}
justify-content 属性
justify-content Η ιδιότητα χρησιμοποιείται για την alignment των flex στοιχείων:
Example
center Η τιμή θα συγκεντρώσει τα flex στοιχεία στο κέντρο του κουτιού:
.flex-container {
display: flex;
justify-content: center;
}
Example
flex-start Η τιμή θα συγκεντρώσει τα flex στοιχεία στο ξεκίνημα του κουτιού (προεπιλεγμένο):
.flex-container {
display: flex;
justify-content: flex-start;
}
Example
flex-end Η τιμή θα εμφανίσει τα flex στοιχεία συγκεντρωμένα στο τέλος του κουτιού:
.flex-container {
display: flex;
justify-content: flex-end;
}
Example
space-around Η τιμή δείχνει τα flex στοιχεία με χώρο πριν, μεταξύ και μετά τις γραμμές:
.flex-container {
display: flex;
justify-content: space-around;
}
Example
space-between Η τιμή δείχνει τα flex στοιχεία με χώρο μεταξύ των γραμμών:
.flex-container {
display: flex;
justify-content: space-between;
}
align-items 属性
align-items Η ιδιότητα χρησιμοποιείται για τη vertical alignment των flex στοιχείων.
Σε αυτές τις παραδείξεις, χρησιμοποιούμε κουτί με ύψος 200 εικονοστοιχείων για να δείξουμε καλύτερα την ιδιότητα align-items.
Example
center The value aligns the flex items in the middle of the container:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Example
flex-start The value aligns the flex items at the top of the container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Example
flex-end The value aligns the elastic items at the bottom of the container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Example
stretch The value stretches the flex items to fill the container (default):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Example
baseline The value aligns the flex items by the baseline:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Note:This example uses different font-sizes to demonstrate that the items are aligned to the text baseline:
align-content 属性
align-content The property is used to align the elastic lines.
In these examples, we use a container with a height of 600 pixels and set the flex-wrap property to wrap to better demonstrate the align-content property.
Example
space-between The value displays the elastic lines with equal spacing between them:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Example
space-around The value displays the elastic line with spaces before, between, and after it:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Example
stretch The value stretches the elastic line to occupy the remaining space (default):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Example
center The value displays the elastic line in the middle of the container:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Example
flex-start The value displays the elastic line at the beginning of the container:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Example
flex-end The value displays the elastic line at the end of the container:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Perfect centering
In the following example, we will solve a very common styling problem: perfect centering.
Solution: set justify-content and align-items The properties are set to center, and then the flex items will be perfectly centered:
Example
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
Child elements (items)
The direct children of a flex container become automatic elastic (flex) items.
Οι παραπάνω στοιχεία αντιπροσωπεύουν τέσσερα μπλε στοιχεία flex μέσα σε έναν γκρι ελαστικό κουτί.
Example
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
Οι ιδιότητες που χρησιμοποιούνται για τα στοιχεία flex είναι:
orderflex-growflex-shrinkflex-basisflexalign-self
Η ιδιότητα order
order Η ιδιότητα καθορίζει τη σειρά των στοιχείων flex.
Το πρώτο στοιχείο flex στο κώδικα δεν χρειάζεται να εμφανίζεται ως το πρώτο στοιχείο στη διάταξη.
order Η τιμή πρέπει να είναι αριθμός, η προεπιλεγμένη τιμή είναι 0.
Example
order Η ιδιότητα μπορεί να αλλάζει τη σειρά των στοιχείων flex.
<div class="flex-container"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div>
Η ιδιότητα flex-grow
flex-grow Η ιδιότητα καθορίζει πόσο θα αύξηται ένα στοιχείο flex σε σύγκριση με τα άλλα στοιχεία flex.
Η τιμή πρέπει να είναι αριθμός, η προεπιλεγμένη τιμή είναι 0.
Example
Να είναι η ταχύτητα αύξησης του τρίτου ελαστικού στοιχείου οκτώ φορές μεγαλύτερη από αυτή των άλλων ελαστικών στοιχείων:
<div class="flex-container"> <div style="flex-grow: 1">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 8">3</div> </div>
Η ιδιότητα flex-shrink
flex-shrink Η ιδιότητα καθορίζει πόσο θα συρρικνώνεται ένα στοιχείο flex σε σύγκριση με τα άλλα στοιχεία flex.
Η τιμή πρέπει να είναι αριθμός, η προεπιλεγμένη τιμή είναι 0.
Example
Να μην συρρικνώνεται το τρίτο ελαστικό στοιχείο με τον ίδιο βαθμό με τα άλλα ελαστικά στοιχεία:
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-shrink: 0">3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div>
Η ιδιότητα flex-basis
flex-basis Η ιδιότητα καθορίζει την αρχική μήκος του στοιχείου flex.
Example
Να οριστεί η αρχική μήκος του τρίτου ελαστικού στοιχείου σε 200 εικονοστοιχεία:
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-basis: 200px">3</div> <div>4</div> </div>
Η ιδιότητα flex
flex Η ιδιότητα είναι η συντομευμένη μορφή των ιδιοτήτων flex-grow, flex-shrink και flex-basis.
Example
Να μην επιτρέπεται η αύξηση του τρίτου ελαστικού στοιχείου (0), η συρρίκνωση (0) και η αρχική μήκος να είναι 200 εικονοστοιχεία:
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex: 0 0 200px">3</div> <div>4</div> </div>
Η ιδιότητα align-self
align-self Ο χαρακτηριστής καθορίζει τον τρόπο προσαρμογής των επιλεγμένων στοιχείων ενός ελαστικού κουτιού.
align-self The property will override the default alignment set by the container's align-items property.
In these examples, we use a container 200 pixels high to better demonstrate the align-self property:
Example
Align the third flexible item to the center of the container:
<div class="flex-container"> <div>1</div> <div>2</div> <div style="align-self: center">3</div> <div>4</div> </div>
Example
Align the second flexible item to the top of the container, and the third flexible item to the bottom of the container:
<div class="flex-container"> <div>1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div>
Responsive Image Gallery Using Flexbox
Create a responsive image gallery using flexbox, which changes between four, two, or full-width images based on screen size:
Responsive Website Using Flexbox
Create responsive websites using flexbox, including flexible navigation bars and flexible content:
CSS Flexbox Properties
The following table lists the CSS properties used with flexbox:
| Properties | Description |
|---|---|
| display | Specifies the box type used for HTML elements. |
| flex-direction | Specifies the direction of flexible items within the flexible container. |
| justify-content | Horizontally align these items when the flexible items do not use all the available space on the main axis. |
| align-items | Vertically align these items when the flexible items do not use all the available space on the main axis. |
| flex-wrap | Specifies whether flexible items should wrap, if there is not enough space on a single flex line to contain them. |
| align-content | Modifies the behavior of the flex-wrap property. Similar to align-items, but it aligns the flex line instead of the flexible items. |
| flex-flow | The shorthand properties of flex-direction and flex-wrap. |
| order | Specifies the order of flexible items relative to other flexible items within the same container. |
| align-self | Used for flexible items. Overrides the container's align-items property. |
| flex | The shorthand properties of the flex-grow, flex-shrink, and flex-basis attributes. |
