ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ

ຈັດການການຈັດວາງ, ການຈັດວາງ ແລະຂະໜາດຂອງຖັນຕາຂ່າຍ, ການນຳທາງ, ອົງປະກອບ ແລະອື່ນໆອີກໄດ້ໄວດ້ວຍຊຸດອັນເຕັມທີ່ຂອງເຄື່ອງໃຊ້ flexbox ທີ່ຕອບສະໜອງໄດ້. ສໍາລັບການປະຕິບັດທີ່ສັບສົນຫຼາຍ, CSS ແບບກໍານົດເອງອາດຈະມີຄວາມຈໍາເປັນ.

ເປີດໃຊ້ພຶດຕິກໍາ flex

ນຳ ໃຊ້ displayເຄື່ອງໃຊ້ຕ່າງໆເພື່ອສ້າງຕູ້ບັນຈຸ flexbox ແລະປ່ຽນ ອົງປະກອບຂອງເດັກນ້ອຍໂດຍກົງ ເປັນລາຍການ flex. ຕູ້ຄອນເທນເນີ 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
  • .d-xxl-flex
  • .d-xxl-inline-flex

ທິດທາງ

ກໍາ​ນົດ​ທິດ​ທາງ​ຂອງ​ລາຍ​ການ flex ໃນ​ພາ​ຊະ​ນະ flex ທີ່​ມີ​ອຸ​ປະ​ກອນ​ການ​ທິດ​ທາງ​. ໃນກໍລະນີຫຼາຍທີ່ສຸດ, ທ່ານສາມາດຍົກເລີກຫ້ອງຮຽນຕາມລວງນອນຢູ່ທີ່ນີ້ຍ້ອນວ່າຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບແມ່ນ row. ຢ່າງໃດກໍຕາມ, ທ່ານອາດຈະພົບກັບສະຖານະການທີ່ທ່ານຕ້ອງການເພື່ອກໍານົດຄ່ານີ້ຢ່າງຊັດເຈນ (ເຊັ່ນ: ການຈັດວາງທີ່ຕອບສະຫນອງ).

ໃຊ້ .flex-rowເພື່ອກໍານົດທິດທາງແນວນອນ (ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ), ຫຼື .flex-row-reverseເພື່ອເລີ່ມຕົ້ນທິດທາງແນວນອນຈາກດ້ານກົງກັນຂ້າມ.

Flex ລາຍການ 1
ລາຍການ Flex 2
ລາຍການ Flex 3
Flex ລາຍການ 1
ລາຍການ Flex 2
ລາຍການ Flex 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ເພື່ອເລີ່ມຕົ້ນທິດທາງຕັ້ງຈາກດ້ານກົງກັນຂ້າມ.

Flex ລາຍການ 1
ລາຍການ Flex 2
ລາຍການ Flex 3
Flex ລາຍການ 1
ລາຍການ Flex 2
ລາຍການ Flex 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
  • .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.

ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<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-axis ຖ້າ flex-direction: column). ເລືອກຈາກ start, end, center, baseline, ຫຼື stretch(ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ).

ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<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-axis ຖ້າ flex-direction: column). ເລືອກຈາກຕົວເລືອກດຽວກັນກັບ align-items: start, end, center, , baseline, ຫຼື stretch(ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ).

ລາຍການ Flex
ຈັດຮຽງລາຍການ flex
ລາຍການ Flex
ລາຍການ Flex
ຈັດຮຽງລາຍການ flex
ລາຍການ Flex
ລາຍການ Flex
ຈັດຮຽງລາຍການ flex
ລາຍການ Flex
ລາຍການ Flex
ຈັດຮຽງລາຍການ flex
ລາຍການ Flex
ລາຍການ Flex
ຈັດຮຽງລາຍການ flex
ລາຍການ Flex
<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ຫ້ອງຮຽນຢູ່ໃນຊຸດຂອງອົງປະກອບອ້າຍນ້ອງເພື່ອບັງຄັບໃຫ້ພວກເຂົາມີຄວາມກວ້າງເທົ່າກັບເນື້ອຫາຂອງພວກເຂົາ (ຫຼືຄວາມກວ້າງເທົ່າທຽມກັນຖ້າເນື້ອຫາຂອງພວກເຂົາບໍ່ເກີນກ່ອງຊາຍແດນຂອງພວກເຂົາ) ໃນຂະນະທີ່ເອົາພື້ນທີ່ອອກຕາມລວງນອນທີ່ມີຢູ່ທັງຫມົດ.

ລາຍການ Flex ທີ່ມີເນື້ອຫາຫຼາຍ
ລາຍການ Flex
ລາຍການ Flex
<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 ໃນການຂະຫຍາຍຕົວເພື່ອຕື່ມຂໍ້ມູນໃສ່ພື້ນທີ່ທີ່ມີຢູ່. ໃນຕົວຢ່າງຂ້າງລຸ່ມນີ້, .flex-grow-1ອົງປະກອບໃຊ້ພື້ນທີ່ທີ່ມີຢູ່ທັງຫມົດທີ່ມັນສາມາດເຮັດໄດ້, ໃນຂະນະທີ່ອະນຸຍາດໃຫ້ສອງລາຍການ flex ທີ່ຍັງເຫຼືອໃນພື້ນທີ່ທີ່ຈໍາເປັນຂອງພວກເຂົາ.

ລາຍການ Flex
ລາຍການ Flex
ລາຍການ flex ທີສາມ
<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 ຖ້າຈໍາເປັນ. ໃນຕົວຢ່າງຂ້າງລຸ່ມນີ້, ລາຍການ flex ທີສອງກັບ .flex-shrink-1ຖືກບັງຄັບໃຫ້ຫໍ່ເນື້ອໃນຂອງມັນກັບແຖວໃຫມ່, "ຫົດຕົວ" ເພື່ອໃຫ້ພື້ນທີ່ເພີ່ມເຕີມສໍາລັບລາຍການ flex ທີ່ຜ່ານມາກັບ .w-100.

ລາຍການ Flex
ລາຍການ Flex
<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 alignment ກັບຂອບອັດຕະໂນມັດ. ສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້ແມ່ນສາມຕົວຢ່າງຂອງການຄວບຄຸມລາຍການ flex ຜ່ານຂອບອັດຕະໂນມັດ: ຄ່າເລີ່ມຕົ້ນ (ບໍ່ມີຂອບອັດຕະໂນມັດ), ຍູ້ສອງລາຍການໄປທາງຂວາ ( .me-auto), ແລະຍູ້ສອງລາຍການໄປທາງຊ້າຍ ( .ms-auto).

ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<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>

ດ້ວຍການຈັດຮຽງລາຍການ

ຍ້າຍໜຶ່ງລາຍການ flex ຕາມແນວຕັ້ງໄປຫາເທິງ ຫຼືລຸ່ມຂອງຖັງໂດຍການປະສົມ align-items, flex-direction: column, ແລະ margin-top: autoຫຼື margin-bottom: auto.

ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<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 ໃນຖັງ flex. ເລືອກຈາກບໍ່ມີການຫໍ່ຫຍັງເລີຍ (ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ) ດ້ວຍ .flex-nowrap, wrapping with .flex-wrap, ຫຼື reverse wrapping with .flex-wrap-reverse.

ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<div class="d-flex flex-nowrap">
  ...
</div>
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<div class="d-flex flex-wrap">
  ...
</div>
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<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

ສັ່ງ

ປ່ຽນແປງ ລໍາດັບ ສາຍຕາ ຂອງລາຍການ flex ສະເພາະດ້ວຍມືຂອງຜົນ orderປະໂຫຍດ. ພວກເຮົາພຽງແຕ່ໃຫ້ທາງເລືອກໃນການເຮັດໃຫ້ລາຍການທໍາອິດຫຼືສຸດທ້າຍ, ເຊັ່ນດຽວກັນກັບການປັບໃຫມ່ເພື່ອນໍາໃຊ້ຄໍາສັ່ງ DOM. ເມື່ອ orderເອົາຄ່າຈຳນວນເຕັມຈາກ 0 ຫາ 5, ເພີ່ມ CSS ແບບກຳນົດເອງສຳລັບຄ່າເພີ່ມເຕີມທີ່ຕ້ອງການ.

ລາຍການ flex ທໍາອິດ
ລາຍການ flex ທີສອງ
ລາຍການ flex ທີສາມ
<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

ນອກຈາກນັ້ນ, ຍັງມີການຕອບສະ ໜອງ .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ແລະເພີ່ມຈໍານວນລາຍການ flex.

ລະວັງ! ຄຸນສົມບັດນີ້ບໍ່ມີຜົນຕໍ່ກັບແຖວດຽວຂອງລາຍການ flex.

ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<div class="d-flex align-content-end flex-wrap">...</div>
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<div class="d-flex align-content-center flex-wrap">...</div>
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<div class="d-flex align-content-between flex-wrap">...</div>
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<div class="d-flex align-content-around flex-wrap">...</div>
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<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? ສ້າງມັນຄືນໃຫມ່ໃນເວລາບໍ່ດົນກັບສິ່ງອໍານວຍຄວາມສະດວກ flex ຈໍານວນຫນ້ອຍທີ່ອະນຸຍາດໃຫ້ມີຄວາມຍືດຫຍຸ່ນແລະການປັບແຕ່ງຫຼາຍກວ່າແຕ່ກ່ອນ.

Placeholder Image
ນີ້ແມ່ນບາງເນື້ອໃນຈາກອົງປະກອບສື່. ທ່ານສາມາດປ່ຽນແທນອັນນີ້ດ້ວຍເນື້ອຫາໃດກໍໄດ້ ແລະປັບຕາມຄວາມຕ້ອງການ.
<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>

ແລະເວົ້າວ່າທ່ານຕ້ອງການຕັ້ງເນື້ອຫາຢູ່ທາງກາງຂ້າງຮູບ:

Placeholder Image
ນີ້ແມ່ນບາງເນື້ອໃນຈາກອົງປະກອບສື່. ທ່ານສາມາດປ່ຽນແທນອັນນີ້ດ້ວຍເນື້ອຫາໃດກໍໄດ້ ແລະປັບຕາມຄວາມຕ້ອງການ.
<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>

ຊາສ

Utilities API

Utilities 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,
      ),
    ),