Flex στο Bootstrap 5

ελαστική κουτί

Η μεγαλύτερη διαφορά μεταξύ του Bootstrap 3 και του Bootstrap 4 & 5 είναι ότι το Bootstrap 5 χρησιμοποιεί flexbox αντί για float για τη διαχείριση του layout.

ένα modul elastic frame layout, μπορεί να σχεδιάσετε πιο εύκολα την δομή elastic responsive layout χωρίς να χρησιμοποιήσετε float ή positioning.

Αν δεν είστε φιλικά με το flex, μπορείτε να βρείτε στο Εκμάθηση CSS Flexbox μαθαίνετε.

Σημείωση:Οι εκδόσεις του IE9 και παλιότερες δεν υποστηρίζουν το Flexbox.

Σημείωση:Αν χρειάζεστε υποστήριξη για το IE8-9, χρησιμοποιήστε το Bootstrap 3. Είναι η πιο σταθερή έκδοση του Bootstrap, η ομάδα εξακολουθεί να υποστηρίζει την επιδιόρθωση κρίσιμων σφαλμάτων και αλλαγές στο έγγραφο. Αλλά δεν θα προσθέσει νέες λειτουργίες.

παράδειγμα

Για να δημιουργήσετε ένα flexbox container και να μετατρέψετε τα άμεσα αντικείμενα σε items flex, χρησιμοποιήστε d-flex Κλάση:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

δοκιμάστε το προσωπικά

παράδειγμα

Για να δημιουργήσετε ένα row inline flexbox container, χρησιμοποιήστε d-inline-flex Κλάση:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

δοκιμάστε το προσωπικά

Οριζόντια κατεύθυνση

Χρησιμοποιήστε .flex-row Παρουσίαση των flex στοιχείων οριζόντια (παράλληλα), είναι η προεπιλεγμένη ρύθμιση.

提示：使用 .flex-row-reverse Μπορεί να είναι οριζόντιας κατεύθυνσης δεξιάς αριστεράς

παράδειγμα

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

δοκιμάστε το προσωπικά

Κάθετη κατεύθυνση

Χρησιμοποιήστε .flex-column Παρουσίαση των flex στοιχείων κάθετα (επάνω-κάτω), ή να χρησιμοποιήσετε .flex-column-reverse Αναστροφή οριζόντιας κατεύθυνσης:

παράδειγμα

<div class="d-flex flex-column">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>

δοκιμάστε το προσωπικά

Ευθυγραμμίστε το περιεχόμενο

使用 .justify-content-* Η κλάση μπορεί να αλλάξει τον τρόπο εξακρίνισης των ελαστικών στοιχείων. Οι ισχύουσες κλάσεις είναι:

  • 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>

δοκιμάστε το προσωπικά

Ίσο πλάτος

在 flex 项目上使用 .flex-fill Μπορεί να τις υποχρεώσει να έχουν ίση πλάτος:

παράδειγμα

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Ελαστικό στοιχείο 1</div>
  <div class="p-2 bg-warning flex-fill">Ελαστικό στοιχείο 2</div>
  <div class="p-2 bg-primary flex-fill">Ελαστικό στοιχείο 3</div>
</div>

δοκιμάστε το προσωπικά

Εκτατική

在 flex 项目上使用 .flex-grow-1 Θα μπορούσε να χρησιμοποιήσει τον περιττό χώρο. Στο παρακάτω παράδειγμα, οι δύο πρώτες flex περιπτώσεις καταλαμβάνουν τον απαραίτητο χώρο, ενώ η τελευταία περιπτώση καταλαμβάνει τον απομένωσα διαθέσιμο χώρο:

παράδειγμα

<div class="d-flex">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary flex-grow-1">弹性项目 3</div>
</div>

δοκιμάστε το προσωπικά

提示：在 flex 项目上使用 收缩-1 可使其在必要时收缩。

Σειρά

使用 顺序 类可更改特定 flex 项的视觉顺序。有效的类从 0 到 5，其中最低的数字具有最高的优先级（order-1 显示在 order-2 之前，以此类推）：

παράδειγμα

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">弹性项目 1</div>
  <div class="p-2 bg-warning order-2">弹性项目 2</div>
  <div class="p-2 bg-primary order-1">弹性项目 3</div>
</div>

δοκιμάστε το προσωπικά

自动外边距

使用 向右推（将项目向右推）或使用 向左推（将项目向左推）可轻松地为弹性项目添加自动边距：

παράδειγμα

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 bg-primary">弹性项目 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">弹性项目 1</div>
  <div class="p-2 bg-warning">弹性项目 2</div>
  <div class="p-2 me-auto bg-primary">弹性项目 3</div>
</div>

δοκιμάστε το προσωπικά

Διαλογή

通过 不包裹（默认）、包裹 或 反向包裹，可控制 flex 项目如何包装在 flex 容器中。

παράδειγμα

<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

δοκιμάστε το προσωπικά

Ευθυγραμμίστε το περιεχόμενο

Χρησιμοποιήστε 内容对齐-* 类控制弹性项目的垂直对齐方式。有效的类是：

  • 内容对齐起始(προεπιλεγμένο)
  • 内容对齐末端
  • 居中对齐内容
  • .align-content-between
  • .align-content-around
  • .align-content-stretch

Σημείωση:Αυτές οι κλάσεις δεν έχουν επίδραση στα μονοδιάστατα ελαστικά στοιχεία.

Κάντε κλικ στο παρακάτω κουμπί για να δείτε τη διαφορά μεταξύ των πέντε κλάσεων, ενημερώνοντας τη βιβλιοθήκη του ελαστικού στοιχείου για την οριζόντια προσαρμογή:

παράδειγμα

<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>

δοκιμάστε το προσωπικά

Ευθυγραμμίστε τα στοιχεία

Χρησιμοποιήστε .align-items-* Κλάση ελέγχουΜονοδιάστατοΗ οριζόντια προσαρμογή του ελαστικού στοιχείου. Εγtige κλάσεις είναι:

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-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-self-* Κλάση ελέγχουΟρίζει το ελαστικό στοιχείοΗ οριζόντια προσαρμογή. Εγtige κλάσεις είναι:

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch(προεπιλεγμένο)

κάντε κλικ στο παρακάτω κουμπί για να δείτε τη διαφορά μεταξύ των πέντε κλάσεων:

παράδειγμα

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Item Flex 1</div>
  <div class="p-2 border align-self-start">Item Flex 2</div>
  <div class="p-2 border">Item Flex 3</div>
</div>

δοκιμάστε το προσωπικά

ευελιξία Flex Class

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

* μπορεί να αντικατασταθεί από sm, md, lg, xl ή xxl, που αντιπροσωπεύουν μικρή, μέση, μεγάλη, υπερμεγέθη και εξαιρετικά μεγάλη οθόνη.

αναζήτηση συγκεκριμένων κλάσεων ευελιξίας ..

κλάση περιγραφή παράδειγμα
container ευελιξίας
.d-*-flex δημιουργία flexbox container για διαφορετικές οθόνες. Δοκιμάστε το
.d-*-inline-flex δημιουργία row flexbox container για διαφορετικές οθόνες. Δοκιμάστε το
κατεύθυνση
.flex-*-row οριζόντια εμφάνιση των ευελιξιών των στοιχείων στις οθόνες. Δοκιμάστε το
.flex-*-row-reverse υπερεκτάσταση των ευελιξιών των στοιχείων οριζόντια και δεξιά στις οθόνες. Δοκιμάστε το
.flex-*-column καθεκλήματα των ευελιξιών των στοιχείων στις οθόνες. Δοκιμάστε το
.flex-*-column-reverse εμφάνιση των ευελιξιών των στοιχείων κάθετα με αντίστροφη σειρά στις οθόνες. Δοκιμάστε το
υπόθεμα
.justify-content-*-start εμφάνιση των ευελιξιών των στοιχείων από την αρχή (αριστερή σειρά) στις οθόνες. Δοκιμάστε το
.justify-content-*-end εμφάνιση των ευελιξιών των στοιχείων στο τέλος (δεξιά σειρά) στις οθόνες. Δοκιμάστε το
.justify-content-*-center εμφάνιση των ευελιξιών των στοιχείων στο κέντρο του διατηρητήρα στις οθόνες. Δοκιμάστε το
.justify-content-*-between ισόμετρος εμφάνιση των ευελιξιών των στοιχείων στις οθόνες. Δοκιμάστε το
.justify-content-*-around εμφάνιση των ευελιξιών των στοιχείων γύρω από τις οθόνες. Δοκιμάστε το
πλήρωση / ίση διάσταση
.flex-*-fill επιβάλλετε την ίδια διάσταση των ευελιξίας των στοιχείων σε διαφορετικές οθόνες. Δοκιμάστε το
επεκτασιμότητα
.flex-*-grow-0 μη επιτρέψτε την επέκταση των στοιχείων σε διαφορετικές οθόνες.
.flex-*-grow-1 καθορισμός διάστασης των στοιχείων σε διαφορετικές οθόνες.
καθορισμός
.flex-*-shrink-0 Μη συρρίκνωση των στοιχείων σε διαφορετικές οθόνες.
.flex-*-shrink-1 Συρρίκνωση των στοιχείων σε διαφορετικές οθόνες.
Σειρά
.order-*-0-12 Αλλαγή σειράς από 0 έως 12 σε μικρές οθόνες. Δοκιμάστε το
Διαλογή
.flex-*-nowrap Μη διαλογή των στοιχείων σε διαφορετικές οθόνες. Δοκιμάστε το
.flex-*-wrap Διαλογή των στοιχείων σε διαφορετικές οθόνες. Δοκιμάστε το
.flex-*-wrap-reverse Αναστρέψτε τη διαλογή των στοιχείων σε διαφορετικές οθόνες. Δοκιμάστε το
Ευθυγραμμίστε το περιεχόμενο
.align-content-*-start Ευθυγραμμίστε τα στοιχεία από την αρχή στις διαφορετικές οθόνες. Δοκιμάστε το
.align-content-*-end Ευθυγραμμίστε τα στοιχεία στο τέλος των διαφορετικών οθονών. Δοκιμάστε το
.align-content-*-center Ευθυγραμμίστε τα στοιχεία στο κέντρο των διαφορετικών οθονών. Δοκιμάστε το
.align-content-*-around Ευθυγραμμίστε τα στοιχεία γύρω από τις διαφορετικές οθόνες. Δοκιμάστε το
.align-content-*-stretch Εκτείνετε τα στοιχεία σε διαφορετικές οθόνες. Δοκιμάστε το
Ευθυγραμμίστε τα στοιχεία
.align-items-*-start Ευθυγραμμίστε τα στοιχεία από την αρχή στις διαφορετικές οθόνες. Δοκιμάστε το
.align-items-*-end Ευθυγραμμίστε τα στοιχεία στο τέλος των διαφορετικών οθονών. Δοκιμάστε το
.align-items-*-center Ευθυγραμμίστε τα στοιχεία στο κέντρο των διαφορετικών οθονών. Δοκιμάστε το
.align-items-*-baseline Ευθυγραμμίστε τα στοιχεία στη βάση της στις διαφορετικές οθόνες. Δοκιμάστε το
.align-items-*-stretch Εκτείνετε τα στοιχεία σε μια γραμμή σε διαφορετικές οθόνες. Δοκιμάστε το
Ευθυγραμμίστε τον εαυτό
.align-self-*-start Ευθυγραμμίστε τα ευελιξία στοιχείων από την αρχή στις διαφορετικές οθόνες. Δοκιμάστε το
.align-self-*-end Ευθυγραμμίστε τα ευελιξία στοιχείων στο τέλος των διαφορετικών οθονών. Δοκιμάστε το
.align-self-*-center Ευθυγραμμίστε τα ευελιξία στοιχείων στο κέντρο των διαφορετικών οθονών. Δοκιμάστε το
.align-self-*-baseline Ευθυγραμμίστε τα ευελιξία στοιχείων στη βάση της διαφορετικών οθονών. Δοκιμάστε το
.align-self-*-stretch Εκτείνετε τα ευελιξία στοιχείων σε διαφορετικές οθόνες. Δοκιμάστε το