Καλώδιο
Διαχειριστείτε γρήγορα τη διάταξη, τη στοίχιση και το μέγεθος των στηλών πλέγματος, της πλοήγησης, των στοιχείων και άλλων με μια πλήρη σειρά βοηθητικών προγραμμάτων flexbox με απόκριση. Για πιο σύνθετες υλοποιήσεις, μπορεί να είναι απαραίτητο προσαρμοσμένο CSS.
Ενεργοποιήστε τις ευέλικτες συμπεριφορές
Εφαρμόστε display
βοηθητικά προγράμματα για να δημιουργήσετε ένα κοντέινερ flexbox και να μετατρέψετε τα στοιχεία απευθείας παιδιών σε ευέλικτα αντικείμενα. Τα δοχεία και τα αντικείμενα Flex μπορούν να τροποποιηθούν περαιτέρω με πρόσθετες ιδιότητες flex.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
Υπάρχουν επίσης αποκριτικές παραλλαγές για .d-flex
και .d-inline-flex
.
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
.d-xxl-flex
.d-xxl-inline-flex
Κατεύθυνση
Ρυθμίστε την κατεύθυνση των flex αντικειμένων σε ένα flex δοχείο με βοηθητικά προγράμματα κατεύθυνσης. Στις περισσότερες περιπτώσεις μπορείτε να παραλείψετε την οριζόντια κλάση εδώ καθώς η προεπιλογή του προγράμματος περιήγησης είναι row
. Ωστόσο, μπορεί να αντιμετωπίσετε καταστάσεις όπου χρειάστηκε να ορίσετε ρητά αυτήν την τιμή (όπως αποκριτικές διατάξεις).
Χρησιμοποιήστε .flex-row
το για να ορίσετε μια οριζόντια κατεύθυνση (η προεπιλογή του προγράμματος περιήγησης) ή .flex-row-reverse
για να ξεκινήσετε την οριζόντια κατεύθυνση από την αντίθετη πλευρά.
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
Χρησιμοποιήστε .flex-column
το για να ορίσετε μια κατακόρυφη κατεύθυνση ή .flex-column-reverse
για να ξεκινήσετε την κατακόρυφη κατεύθυνση από την αντίθετη πλευρά.
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
Υπάρχουν επίσης αποκριτικές παραλλαγές για flex-direction
.
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse
Να αιτιολογήσετε το περιεχόμενο
Χρησιμοποιήστε justify-content
βοηθητικά προγράμματα σε δοχεία flexbox για να αλλάξετε την ευθυγράμμιση των flex στοιχείων στον κύριο άξονα (τον άξονα x για έναρξη, τον άξονα y αν flex-direction: column
). Επιλέξτε από start
(προεπιλογή προγράμματος περιήγησης), end
, center
, between
, around
ή evenly
.
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
Υπάρχουν επίσης αποκριτικές παραλλαγές για justify-content
.
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly
Ευθυγράμμιση στοιχείων
Χρησιμοποιήστε align-items
βοηθητικά προγράμματα σε δοχεία flexbox για να αλλάξετε την ευθυγράμμιση των flex στοιχείων στον εγκάρσιο άξονα (τον άξονα y για έναρξη, τον άξονα x αν flex-direction: column
). Επιλέξτε από start
, end
, center
, baseline
ή stretch
(προεπιλογή προγράμματος περιήγησης).
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
Υπάρχουν επίσης αποκριτικές παραλλαγές για align-items
.
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch
Ευθυγραμμίστε τον εαυτό σας
Χρησιμοποιήστε align-self
βοηθητικά προγράμματα σε στοιχεία flexbox για να αλλάξετε μεμονωμένα την ευθυγράμμισή τους στον εγκάρσιο άξονα (τον άξονα y για έναρξη, τον άξονα x αν flex-direction: column
). Επιλέξτε από τις ίδιες επιλογές όπως align-items
: start
, end
, center
, baseline
, ή stretch
(προεπιλογή προγράμματος περιήγησης).
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
Υπάρχουν επίσης αποκριτικές παραλλαγές για align-self
.
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch
Γέμισμα
Χρησιμοποιήστε την .flex-fill
κλάση σε μια σειρά από αδερφικά στοιχεία για να τα πιέσετε σε πλάτη ίσα με το περιεχόμενό τους (ή ίσα πλάτη εάν το περιεχόμενό τους δεν ξεπερνά τα πλαίσια περιγραμμάτων τους) καταλαμβάνοντας όλο τον διαθέσιμο οριζόντιο χώρο.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>
Υπάρχουν επίσης αποκριτικές παραλλαγές για flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
.flex-xxl-fill
Μεγαλώστε και συρρικνώστε
Χρησιμοποιήστε .flex-grow-*
βοηθητικά προγράμματα για να αλλάξετε την ικανότητα ενός ευέλικτου στοιχείου να μεγαλώνει για να γεμίζει τον διαθέσιμο χώρο. Στο παρακάτω παράδειγμα, τα .flex-grow-1
στοιχεία χρησιμοποιούν όλο τον διαθέσιμο χώρο που μπορούν, ενώ αφήνουν τα υπόλοιπα δύο ευέλικτα αντικείμενα τον απαραίτητο χώρο τους.
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>
Χρησιμοποιήστε .flex-shrink-*
βοηθητικά προγράμματα για να αλλάξετε την ικανότητα ενός ευέλικτου στοιχείου να συρρικνώνεται εάν είναι απαραίτητο. Στο παρακάτω παράδειγμα, το δεύτερο ευέλικτο στοιχείο με .flex-shrink-1
αναγκάζεται να τυλίξει τα περιεχόμενά του σε μια νέα γραμμή, «μικραίνει» για να αφήσει περισσότερο χώρο για το προηγούμενο ευέλικτο στοιχείο με .w-100
.
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
Υπάρχουν επίσης αποκριτικές παραλλαγές για flex-grow
και flex-shrink
.
.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
.flex-xxl-{grow|shrink}-0
.flex-xxl-{grow|shrink}-1
Αυτόματα περιθώρια
Το Flexbox μπορεί να κάνει μερικά εκπληκτικά πράγματα όταν συνδυάζεις ευθυγραμμίσεις flex με αυτόματα περιθώρια. Παρακάτω παρουσιάζονται τρία παραδείγματα ελέγχου ευέλικτων στοιχείων μέσω αυτόματων περιθωρίων: προεπιλογή (χωρίς αυτόματο περιθώριο), ώθηση δύο στοιχείων προς τα δεξιά ( .me-auto
) και ώθηση δύο στοιχείων προς τα αριστερά ( .ms-auto
).
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="me-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ms-auto p-2 bd-highlight">Flex item</div>
</div>
Με στοίχιση-αντικείμενα
Μετακινήστε κάθετα ένα εύκαμπτο αντικείμενο στο επάνω ή το κάτω μέρος ενός δοχείου αναμειγνύοντας τα align-items
, flex-direction: column
και margin-top: auto
ή margin-bottom: auto
.
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>
Κάλυμμα
Αλλάξτε τον τρόπο με τον οποίο τυλίγονται τα εύκαμπτα αντικείμενα σε ένα εύκαμπτο δοχείο. Επιλέξτε ανάμεσα σε καθόλου αναδίπλωση (η προεπιλογή του προγράμματος περιήγησης) με .flex-nowrap
, αναδίπλωση με .flex-wrap
ή αντίστροφη αναδίπλωση με .flex-wrap-reverse
.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
Υπάρχουν επίσης αποκριτικές παραλλαγές για flex-wrap
.
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse
Σειρά
Αλλάξτε την οπτική σειρά συγκεκριμένων ευέλικτων αντικειμένων με μια χούφτα order
βοηθητικά προγράμματα. Παρέχουμε μόνο επιλογές για να κάνετε ένα στοιχείο πρώτο ή τελευταίο, καθώς και επαναφορά για χρήση της παραγγελίας DOM. Όπως order
παίρνει οποιαδήποτε ακέραια τιμή από το 0 έως το 5, προσθέστε προσαρμοσμένο CSS για τυχόν πρόσθετες τιμές που απαιτούνται.
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>
Υπάρχουν επίσης αποκριτικές παραλλαγές για order
.
.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5
Επιπλέον, υπάρχουν επίσης responsive .order-first
και .order-last
κλάσεις που αλλάζουν το order
στοιχείο ενός στοιχείου εφαρμόζοντας order: -1
και order: 6
, αντίστοιχα.
.order-first
.order-last
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.order-xxl-last
Ευθυγράμμιση περιεχομένου
Χρησιμοποιήστε align-content
βοηθητικά προγράμματα σε δοχεία flexbox για να ευθυγραμμίσετε τα flex στοιχεία μεταξύ τους στον εγκάρσιο άξονα. Επιλέξτε από start
(προεπιλογή προγράμματος περιήγησης), end
, center
, between
, around
ή stretch
. Για να δείξουμε αυτά τα βοηθητικά προγράμματα, έχουμε επιβάλει flex-wrap: wrap
και αυξήσει τον αριθμό των ευέλικτων στοιχείων.
Ψηλά το κεφάλι! Αυτή η ιδιότητα δεν έχει καμία επίδραση σε μεμονωμένες σειρές ευέλικτων στοιχείων.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<div class="d-flex align-content-stretch flex-wrap">...</div>
Υπάρχουν επίσης αποκριτικές παραλλαγές για align-content
.
.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-around
.align-content-xxl-stretch
Αντικείμενο πολυμέσων
Θέλετε να αντιγράψετε το στοιχείο αντικειμένου πολυμέσων από το Bootstrap 4; Δημιουργήστε το ξανά σε χρόνο μηδέν με μερικά ευέλικτα βοηθητικά προγράμματα που επιτρέπουν ακόμη μεγαλύτερη ευελιξία και προσαρμογή από πριν.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
Και πείτε ότι θέλετε να κεντράρετε κάθετα το περιεχόμενο δίπλα στην εικόνα:
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
Sass
Utilities API
Τα βοηθητικά προγράμματα Flexbox δηλώνονται στο API βοηθητικών προγραμμάτων μας σε scss/_utilities.scss
. Μάθετε πώς να χρησιμοποιείτε το API βοηθητικών προγραμμάτων.
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),