Flex ng Bootstrap 5

Flexible Box

Ang pinakamalaking pagkakaiba ng Bootstrap 3 at Bootstrap 4 & 5 ay ang Bootstrap 5 na gumagamit ng flexbox sa halip ng floating upang mahawakan ang layout.

ang flexible box layout module, na nagiging mas madali na disenyo ang flexible responsive layout structure, na walang paggamit ng floating o positioning.

Kung hindi ka pamilyar sa flex, maaari mong makasalita sa aming CSS Flexbox Tutorial sa pag-aaral.

Komento:Hindi suporta ng Flexbox ang mga bersyon ng IE9 at mas maaga.

Komento:Kung kailangan ng suporta sa IE8-9, gamitin ang Bootstrap 3. Ito ang pinakamalaking bersyon ng Bootstrap, ang pangkat ay patuloy na sumusuporta sa kanyang pinakamahalagang pag-aayos ng mga error at pagbabago ng dokumentasyon. Subalit hindi ito magdagdag ng anumang bagong pag-andar.

Instance

Kung gusto mong lumikha ng flexbox container at palitan ang direktang mga anak bilang flex item, gamitin ang d-flex Klase:}

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

Try it yourself

Instance

Kung gusto mong lumikha ng inline flexbox container, gamitin ang d-inline-flex Klase:}

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

Try it yourself

direksyong patirik

Gamitin ang .flex-row Ipakita ang flex item sa paraan na horizontal (nakakapareho), ito ang default na setting.

提示：使用 .flex-row-reverse Maaari nang magkaroon ng kanan ang lapad sa horizontal na direksyon:

Instance

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

Try it yourself

direksyong patimbugan

Gamitin ang .flex-column Ipapakita ang flex item sa paraan na vertical (nakakaguluhan sa isang ibang), o gamitin .flex-column-reverse Ibalik ang paraan ng pagpapakita ng vertical na direksyon:

Instance

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

Try it yourself

Iayos ang nilalaman

使用 .justify-content-* Ang klase ay maaaring magbago ang alinlangan ng flex item. Ang mga wastong klase ay:：

  • sa simula(Default)
  • sa dulo
  • sa gitna
  • sa pagitan
  • sa paligid

Instance

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

Try it yourself

Pantay na lapad

在 flex 標項上使用 .flex-fill Maaari nang pilitin na magkaroon ng pantay na lapad:

Instance

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Flex Item 1</div>
  <div class="p-2 bg-warning flex-fill">Flex Item 2</div>
  <div class="p-2 bg-primary flex-fill">Flex Item 3</div>
</div>

Try it yourself

Ihahabol

在 flex 標項上使用 .flex-grow-1 Maaari itong gamitin ang sobrang espasyo. Sa mga sumusunod na halimbawa, ang unang dalawang flex item ay nagamit ng kinakailangang espasyo, at ang huling item ay nagamit ang sobrang puwang na magagamit:

Instance

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

Try it yourself

提示：在 flex 標項上使用 .flex-shrink-1 可使其在必要時收縮。

Kapagitan

使用 .order 類可更改特定 flex 標項的視覺順序。有效的類從 0 到 5，其中最低的數字具有最高的優先級（order-1 顯示在 order-2 之前，以此類推）：

Instance

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

Try it yourself

自動外邊距

使用 .ms-auto（將項目向右推）或使用 .me-auto（將項目向左推）可輕鬆為彈性項目添加自動邊距：

Instance

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

Try it yourself

Palit ng linya

通過 .flex-nowrap（默認）、.flex-wrap 或 .flex-wrap-reverse，可控制 flex 標項如何包裝在 flex 容器中。

Instance

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

Try it yourself

Iayos ang nilalaman

Gamitin ang .align-content-* 類控制彈性項目的垂直對齊方式。

  • .align-content-start(Default)
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch

Komento:Ang mga klase na ito ay walang epekto sa malakas na proyekto na naglalagay ng isang linya.

I-klik ang sumusunod na pindutan, upang makita ang pagkakaiba ng limang klase sa pamamagitan ng pagbabago ng patinding piling ng malakas na proyekto sa insasyon na boks:

Instance

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

Try it yourself

Iayos ang item

Gamitin ang .align-items-* Klase ng kontrolIsa sa isang linyaAng patinding piling ng malakas na proyekto. Ang makatwirang klase ay:

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch(Default)

I-klik ang sumusunod na pindutan upang makita ang pagkakaiba ng limang klase:

Instance

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

Try it yourself

Self-piling

Gamitin ang .align-self-* Klase ng kontrolTukuyin ang malakas na proyektoAng paraan ng patinding piling. Ang makatwirang klase ay:

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch(Default)

Click the button below to see the difference between the five classes:

Instance

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

Try it yourself

Responsive Flex Classes

All flexible classes come with additional responsive classes, making it easy to set specific flex classes at specific screen sizes.

* symbol can be replaced with sm, md, lg, xl, or xxl, representing small, medium, large, extra-large, and extra-extra-large screens.

Search for specific flexible classes ...

Class Description Examples
Flexible container
.d-*-flex Create flexbox containers for different screens. Subukan
.d-*-inline-flex Create inline flexbox containers for different screens. Subukan
Direction
.flex-*-row Display flexible items horizontally across different screens. Subukan
.flex-*-row-reverse Display flexible items horizontally and right-aligned across different screens. Subukan
.flex-*-column Display flexible items vertically across different screens. Subukan
.flex-*-column-reverse Display flexible items vertically in reverse order across different screens. Subukan
Content aligned in a row
.justify-content-*-start Display flexible items from the beginning (left-aligned) across different screens. Subukan
.justify-content-*-end Display flexible items at the end (right-aligned) across different screens. Subukan
.justify-content-*-center Display flexible items in the center of the flexible container across different screens. Subukan
.justify-content-*-between Display flexible items evenly across different screens. Subukan
.justify-content-*-around Display flexible items 'around' on different screens. Subukan
Fill / Equal width
.flex-*-fill Force the flexible items to have equal width across different screens. Subukan
Expand
.flex-*-grow-0 Do not allow items to expand across different screens.
.flex-*-grow-1 Make items expand across different screens.
Shrink
.flex-*-shrink-0 Huwag pababa ang item sa iba't-ibang screen.
.flex-*-shrink-1 Pababa ang item sa iba't-ibang screen.
Kapagitan
.order-*-0-12 Baguhin ang pagkakasunod-sunod mula 0 hanggang 12 sa maliit na screen. Subukan
Palit ng linya
.flex-*-nowrap Huwag ipalit ng linya ang mga item sa iba't-ibang screen. Subukan
.flex-*-wrap Ipalit ng linya ang mga item sa iba't-ibang screen. Subukan
.flex-*-wrap-reverse Baligtarin ang pagpalit ng linya ng mga item sa iba't-ibang screen. Subukan
Iayos ang nilalaman
.align-content-*-start Iayos ang mga item mula sa simula ng iba't-ibang screen. Subukan
.align-content-*-end Iayos ang mga item sa huli ng iba't-ibang screen. Subukan
.align-content-*-center Iayos ang mga item sa gitna ng iba't-ibang screen. Subukan
.align-content-*-around Iayos ang mga item sa paligid ng iba't-ibang screen. Subukan
.align-content-*-stretch Hikayatin ang mga item sa iba't-ibang screen. Subukan
Iayos ang item
.align-items-*-start Iayos ang isang linya ng item mula sa simula ng iba't-ibang screen. Subukan
.align-items-*-end Iayos ang isang linya ng item sa huli ng iba't-ibang screen. Subukan
.align-items-*-center Iayos ang isang linya ng item sa gitna ng iba't-ibang screen. Subukan
.align-items-*-baseline Iayos ang isang linya ng item sa base line ng iba't-ibang screen. Subukan
.align-items-*-stretch Hikayatin ang isang linya ng item sa iba't-ibang screen. Subukan
Iayos ang sarili
.align-self-*-start Iayos ang mga flexible item mula sa simula ng iba't-ibang screen. Subukan
.align-self-*-end Iayos ang mga flexible item sa huli ng iba't-ibang screen. Subukan
.align-self-*-center Iayos ang mga flexible item sa gitna ng iba't-ibang screen. Subukan
.align-self-*-baseline Iayos ang mga flexible item sa base line ng iba't-ibang screen. Subukan
.align-self-*-stretch Hikayatin ang mga flexible item sa iba't-ibang screen. Subukan