Source

Flex

ຈັດການການຈັດວາງ, ການຈັດວາງ ແລະຂະໜາດຂອງຖັນຕາຂ່າຍ, ການນຳທາງ, ອົງປະກອບ ແລະອື່ນໆອີກໄດ້ໄວດ້ວຍຊຸດອັນເຕັມທີ່ຂອງເຄື່ອງໃຊ້ 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

ທິດທາງ

ກໍາ​ນົດ​ທິດ​ທາງ​ຂອງ​ລາຍ​ການ 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

ປັບປຸງເນື້ອຫາ

ໃຊ້ justify-contentປະໂຫຍດໃນກ່ອງບັນຈຸ flexbox ເພື່ອປ່ຽນການຈັດຮຽງຂອງລາຍການ flex ໃນແກນຫຼັກ (ແກນ x ເພື່ອເລີ່ມຕົ້ນ, ແກນ y ຖ້າ flex-direction: column). ເລືອກຈາກ start(ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ), end, center, between, ຫຼື around.

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

ການປ່ຽນແປງທີ່ຕອບສະຫນອງຍັງມີຢູ່ສໍາລັບ 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-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-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

ຕື່ມ

ໃຊ້ .flex-fillຫ້ອງຮຽນຢູ່ໃນຊຸດຂອງອົງປະກອບຂອງອ້າຍເອື້ອຍນ້ອງເພື່ອບັງຄັບໃຫ້ພວກເຂົາມີຄວາມກວ້າງເທົ່າທຽມກັນໃນຂະນະທີ່ເອົາພື້ນທີ່ອອກຕາມລວງນອນທີ່ມີຢູ່ທັງຫມົດ. ໂດຍສະເພາະທີ່ເປັນປະໂຫຍດສໍາລັບຄວາມກວ້າງເທົ່າທຽມກັນ, ຫຼືສົມເຫດສົມຜົນ, ນໍາທາງ.

ລາຍການ Flex
ລາຍການ Flex
ລາຍການ Flex
<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 ໃນການຂະຫຍາຍຕົວເພື່ອຕື່ມຂໍ້ມູນໃສ່ພື້ນທີ່ທີ່ມີຢູ່. ໃນຕົວຢ່າງຂ້າງລຸ່ມນີ້, .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

ຂອບອັດຕະໂນມັດ

Flexbox ສາມາດເຮັດບາງສິ່ງທີ່ຫນ້າຫວາດສຽວໄດ້ໃນເວລາທີ່ທ່ານປະສົມ flex alignment ກັບຂອບອັດຕະໂນມັດ. ສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້ແມ່ນສາມຕົວຢ່າງຂອງການຄວບຄຸມລາຍການ flex ຜ່ານຂອບອັດຕະໂນມັດ: ຄ່າເລີ່ມຕົ້ນ (ບໍ່ມີຂອບອັດຕະໂນມັດ), ຍູ້ສອງລາຍການໄປທາງຂວາ ( .mr-auto), ແລະຍູ້ສອງລາຍການໄປທາງຊ້າຍ ( .ml-auto).

ແຕ່ຫນ້າເສຍດາຍ, IE10 ແລະ IE11 ບໍ່ສະຫນັບສະຫນູນຂອບອັດຕະໂນມັດໃນລາຍການ flex ທີ່ພໍ່ແມ່ມີຄ່າທີ່ບໍ່ແມ່ນຄ່າເລີ່ມຕົ້ນ justify-content. ເບິ່ງຄໍາຕອບ StackOverflow ນີ້ ສໍາລັບລາຍລະອຽດເພີ່ມເຕີມ.

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

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

ຍ້າຍໜຶ່ງລາຍການ 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 ສະເພາະດ້ວຍມືຂອງຜົນ orderປະໂຫຍດ. ພວກເຮົາພຽງແຕ່ໃຫ້ທາງເລືອກໃນການເຮັດໃຫ້ລາຍການທໍາອິດຫຼືສຸດທ້າຍ, ເຊັ່ນດຽວກັນກັບການປັບໃຫມ່ເພື່ອນໍາໃຊ້ຄໍາສັ່ງ DOM. ຕາມທີ່ orderເອົາຄ່າ integer ໃດ (ຕົວຢ່າງ, 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-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ແລະເພີ່ມຈໍານວນລາຍການ 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