Bootstrap 5 Flex

Flexbox

ຄວາມແຕກຕ່າງທີ່ໃຫຍ່ລະຫວ່າງ Bootstrap 3 ແລະ Bootstrap 4 & 5 ແມ່ນ Bootstrap 5 ທີ່ບໍ່ໃຊ້ການສະໝອງແຕ່ນຳໃຊ້ flexbox ເພື່ອຈັດການອອກແບບ.

ສະພາບບອກບັນຈຸ flexbox ທີ່ສາມາດອອກແບບຄວາມພັດທະນາການຄຳທົດແທນລາຍການຄືນບໍ່ຕ້ອງໃຊ້ການສະໝອງຫຼືການຕິດຕັ້ງ.

ຖ້າທ່ານບໍ່ຮູ້ກ່ຽວກັບ flex，ທ່ານສາມາດນໍາໃຊ້ ການຮຽນ CSS Flexbox ການຮຽນ.

ຄວາມຄິດ:IE9 ແລະກ່ອນນີ້ບໍ່ສາມາດສະຖານະການ Flexbox.

ຄວາມຄິດ:ຖ້າທ່ານຕ້ອງການສະຖານະການ IE8-9 ກະລຸນານໍາໃຊ້ Bootstrap 3. ນີ້ແມ່ນສະພາບ Bootstrap ທີ່ຄົງທີ່ສຸດທີ່ທີມຍັງສະຫນັບສະຫນູນສຳລັບການສ້ອມແປງຂໍ້ບັນຫາຫຼັກແລະການປ່ຽນແປງເອກະສານ。ວ່າຈະບໍ່ມີການເພີ່ມຫຼັກຫຼາຍຫຍັງໃນນັ້ນ。

ຕົວຢ່າງ

ສຳລັບການສ້າງບໍລິສັດ flexbox ແລະປ່ຽນເປັນລູກຊົນ 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>

ທ້າທາຍຕື່ມ

ຕົວຢ່າງ

ສຳລັບການສ້າງບໍລິສັດ flexbox ອິນລາຍ，ກະລຸນານໍາໃຊ້ 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 ໃດໜຶ່ງ. .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 ໃດໜຶ່ງ. .flex-grow-1 ສາມາດໃຊ້ອານານິຄົມທີ່ຫຼາຍກວ່າ:

ຕົວຢ່າງ

<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 ໃນລາຍການ flex ໃດໜຶ່ງ. .flex-shrink-1 ສາມາດກະຈາຍຄວາມຫຼາຍຂອງລາຍການ flex ໃນຂະນະທີ່ຈຳເປັນ.

顺序

ໃຊ້ .order ຄວບຄຸມວິທີທາງສີວະພາບຂອງລາຍການ 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>

ທ້າທາຍຕື່ມ

ຂອບເຂດພາຍໃນລາຍການລວມງ່າຍດາຍ

ໃຊ້ .ms-auto（ທີ່ຈະຍ້າຍອອກເປັນປີກປາຍຂອງຍັງສາຍລາຍການລວມມາທີ່ສະຫຼາກຫຼາຍທີ່ສຸດ）ຫຼືໃຊ້ .me-auto（ທີ່ຈະຍ້າຍອອກເປັນປີກປາຍຂອງຍັງສາຍລາຍການລວມມາທີ່ສະຫຼາກຫຼາຍທີ່ສຸດ）ສາມາດເພີ່ມຂອບເຂດພາຍໃນລາຍການລວມງ່າຍດາຍຫຼາຍ:

ຕົວຢ່າງ

<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-nowrap（ຄົນປະດິດ）、.flex-wrap ຫຼື .flex-wrap-reverseສາມາດຄວບຄຸມວິທີການກັບລວມ 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-* ຄວບຄຸມການຕັດສິດທາງວາງລະບົບລວມທີ່ມີຢູ່ແມ່ນ:

  • .align-content-start（默认）
  • .align-content-end
  • .align-content-center
  • .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-* ການຄວບຄຸມປະເພດສີນວິນທິດຄັນການປະສານທີ່ຕາຍນອກຂອງຜູ້ສະເໜີອິດສະຫລະ

  • .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-* ການຄວບຄຸມປະເພດການກຳນົດຂອງຜູ້ສະເໜີອິດສະຫລະການປະສານທີ່ຕາຍນອກ

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

ທ້າທາຍຕື່ມ

ປະເພດ flex ທີ່ຕອບສະໜອງ

ປະເພດພາບຢູ່ອານຸສາວະລີທັງໝົດມີປະເພດການຕອບສະໜອງພາຍໃນເພື່ອຮັບປະກັນທີ່ຈະຈັດການປະເພດ flex ໃນຂະໜາດຈໍານວນຈອງຫຼາຍອັນທີ່ຈະກະຈາຍຄວາມສະບາຍ

* ສິນລະບຸບສຳລັບ sm、md、lg、xl ຫຼື xxl ຊຶ່ງມີຄວາມໝາຍວ່າສະໜາມນ້ອຍ、ກາງ、ໃຫຍ່、ຂະໜາດໃຫຍ່ແລະຂະໜາດຫຼາຍຫຼາຍ

ຄົ້ນຫາປະເພດພາບຢູ່ອານຸສາວະລີ ..

ປະເພດ ການອະທິບາຍ ຕົວຢ່າງ
ສະຖານທີ່ພາບຢູ່ອານຸສາວະລີ
.d-*-flex ສ້າງສະຖານທີ່ flexbox ອານຸສາວະລີໃນໜ້າຈໍານວນຈອງຫຼາຍອັນ ທົດລອງອີກ
.d-*-inline-flex ສ້າງສະຖານທີ່ flexbox ອານຸສາວະລີໃນໜ້າຈໍານວນຈອງຫຼາຍອັນ ທົດລອງອີກ
ການອອກອາກາດ
.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 ຫົວອາຊີບຢູ່ໃນໜ້າຈໍານວນສະແດງຕົວຈາກໜ້າຈໍານວນສະແດງຕົວ. ທົດລອງອີກ