Source

Καλώδιο

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

Ενεργοποιήστε τις ευέλικτες συμπεριφορές

Εφαρμόστε displayβοηθητικά προγράμματα για να δημιουργήσετε ένα κοντέινερ flexbox και να μετατρέψετε τα στοιχεία απευθείας παιδιών σε ευέλικτα αντικείμενα. Τα δοχεία και τα αντικείμενα Flex μπορούν να τροποποιηθούν περαιτέρω με πρόσθετες ιδιότητες flex.

Είμαι ένα δοχείο flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Είμαι ένα ενσωματωμένο δοχείο flexbox!
<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

Κατεύθυνση

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

Χρησιμοποιήστε .flex-rowτο για να ορίσετε μια οριζόντια κατεύθυνση (η προεπιλογή του προγράμματος περιήγησης) ή .flex-row-reverseγια να ξεκινήσετε την οριζόντια κατεύθυνση από την αντίθετη πλευρά.

Ευέλικτο στοιχείο 1
Flex στοιχείο 2
Ευέλικτο στοιχείο 3
Ευέλικτο στοιχείο 1
Flex στοιχείο 2
Ευέλικτο στοιχείο 3
<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για να ξεκινήσετε την κατακόρυφη κατεύθυνση από την αντίθετη πλευρά.

Ευέλικτο στοιχείο 1
Flex στοιχείο 2
Ευέλικτο στοιχείο 3
Ευέλικτο στοιχείο 1
Flex στοιχείο 2
Ευέλικτο στοιχείο 3
<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

Να αιτιολογήσετε το περιεχόμενο

Χρησιμοποιήστε justify-contentβοηθητικά προγράμματα σε δοχεία flexbox για να αλλάξετε την ευθυγράμμιση των flex στοιχείων στον κύριο άξονα (τον άξονα x για έναρξη, τον άξονα y αν flex-direction: column). Επιλέξτε από start(προεπιλογή προγράμματος περιήγησης), end, center, betweenή around.

Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
<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>

Υπάρχουν επίσης αποκριτικές παραλλαγές για justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

Ευθυγράμμιση στοιχείων

Χρησιμοποιήστε 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-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

Γέμισμα

Χρησιμοποιήστε την .flex-fillτάξη σε μια σειρά από αδερφικά στοιχεία για να τα πιέσετε σε ίσα πλάτη ενώ καταλαμβάνουν όλο τον διαθέσιμο οριζόντιο χώρο. Ιδιαίτερα χρήσιμο για πλοήγηση ίσου πλάτους ή δικαιολογημένης πλοήγησης.

Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</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-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

Αυτόματα περιθώρια

Το Flexbox μπορεί να κάνει μερικά εκπληκτικά πράγματα όταν συνδυάζεις ευθυγραμμίσεις flex με αυτόματα περιθώρια. Παρακάτω παρουσιάζονται τρία παραδείγματα ελέγχου ευέλικτων στοιχείων μέσω αυτόματων περιθωρίων: προεπιλογή (χωρίς αυτόματο περιθώριο), ώθηση δύο στοιχείων προς τα δεξιά ( .mr-auto) και ώθηση δύο στοιχείων προς τα αριστερά ( .ml-auto).

Δυστυχώς, το IE10 και το IE11 δεν υποστηρίζουν σωστά τα αυτόματα περιθώρια σε ευέλικτα στοιχεία των οποίων η γονική τιμή έχει μη προεπιλεγμένη justify-contentτιμή. Δείτε αυτήν την απάντηση StackOverflow για περισσότερες λεπτομέρειες.

Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
Εύκαμπτο στοιχείο
<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="mr-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="ml-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

Σειρά

Αλλάξτε την οπτική σειρά συγκεκριμένων ευέλικτων αντικειμένων με μια χούφτα orderβοηθητικά προγράμματα. Παρέχουμε μόνο επιλογές για να κάνετε ένα στοιχείο πρώτο ή τελευταίο, καθώς και επαναφορά για χρήση της παραγγελίας DOM. Όπως orderλαμβάνει οποιαδήποτε ακέραια τιμή (π.χ., 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-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

Ευθυγράμμιση περιεχομένου

Χρησιμοποιήστε 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