ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
Check
in English

ಫ್ಲೆಕ್ಸ್

ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳು, ನ್ಯಾವಿಗೇಶನ್, ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ಲೇಔಟ್, ಜೋಡಣೆ ಮತ್ತು ಗಾತ್ರವನ್ನು ತ್ವರಿತವಾಗಿ ನಿರ್ವಹಿಸಿ. ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಅನುಷ್ಠಾನಗಳಿಗಾಗಿ, ಕಸ್ಟಮ್ CSS ಅಗತ್ಯವಾಗಬಹುದು.

ಫ್ಲೆಕ್ಸ್ ನಡವಳಿಕೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ

displayಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಧಾರಕವನ್ನು ರಚಿಸಲು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಅನ್ವಯಿಸಿ ಮತ್ತು ನೇರ ಮಕ್ಕಳ ಅಂಶಗಳನ್ನು ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳಾಗಿ ಪರಿವರ್ತಿಸಿ. ಫ್ಲೆಕ್ಸ್ ಕಂಟೈನರ್‌ಗಳು ಮತ್ತು ವಸ್ತುಗಳನ್ನು ಹೆಚ್ಚುವರಿ ಫ್ಲೆಕ್ಸ್ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಮತ್ತಷ್ಟು ಮಾರ್ಪಡಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.

ನಾನು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಕಂಟೇನರ್!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
ನಾನು ಇನ್‌ಲೈನ್ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಕಂಟೇನರ್!
html
<div class="d-inline-flex p-2">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

ನಿರ್ದೇಶನ

ದಿಕ್ಕಿನ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳ ದಿಕ್ಕನ್ನು ಹೊಂದಿಸಿ. ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಆಗಿರುವುದರಿಂದ ನೀವು ಸಮತಲ ವರ್ಗವನ್ನು ಇಲ್ಲಿ ಬಿಟ್ಟುಬಿಡಬಹುದು row. ಆದಾಗ್ಯೂ, ನೀವು ಈ ಮೌಲ್ಯವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಹೊಂದಿಸಬೇಕಾದ ಸಂದರ್ಭಗಳನ್ನು ನೀವು ಎದುರಿಸಬಹುದು (ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ಲೇಔಟ್‌ಗಳಂತೆ).

.flex-rowಸಮತಲ ದಿಕ್ಕನ್ನು ಹೊಂದಿಸಲು (ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್) ಅಥವಾ .flex-row-reverseಎದುರು ಭಾಗದಿಂದ ಅಡ್ಡ ದಿಕ್ಕನ್ನು ಪ್ರಾರಂಭಿಸಲು ಬಳಸಿ .

ಫ್ಲೆಕ್ಸ್ ಐಟಂ 1
ಫ್ಲೆಕ್ಸ್ ಐಟಂ 2
ಫ್ಲೆಕ್ಸ್ ಐಟಂ 3
ಫ್ಲೆಕ್ಸ್ ಐಟಂ 1
ಫ್ಲೆಕ್ಸ್ ಐಟಂ 2
ಫ್ಲೆಕ್ಸ್ ಐಟಂ 3
html
<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

.flex-columnಲಂಬ ದಿಕ್ಕನ್ನು ಹೊಂದಿಸಲು ಅಥವಾ .flex-column-reverseಎದುರು ಭಾಗದಿಂದ ಲಂಬ ದಿಕ್ಕನ್ನು ಪ್ರಾರಂಭಿಸಲು ಬಳಸಿ .

ಫ್ಲೆಕ್ಸ್ ಐಟಂ 1
ಫ್ಲೆಕ್ಸ್ ಐಟಂ 2
ಫ್ಲೆಕ್ಸ್ ಐಟಂ 3
ಫ್ಲೆಕ್ಸ್ ಐಟಂ 1
ಫ್ಲೆಕ್ಸ್ ಐಟಂ 2
ಫ್ಲೆಕ್ಸ್ ಐಟಂ 3
html
<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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ಮುಖ್ಯ ಅಕ್ಷದಲ್ಲಿ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳ ಜೋಡಣೆಯನ್ನು ಬದಲಾಯಿಸಲು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಕಂಟೇನರ್‌ಗಳಲ್ಲಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ (ಪ್ರಾರಂಭಿಸಲು x- ಅಕ್ಷ, y- ಅಕ್ಷ ಇದ್ದರೆ flex-direction: column). start(ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್), , end, center, between, aroundಅಥವಾ evenly.

ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
<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(ಪ್ರಾರಂಭಿಸಲು y- ಅಕ್ಷ, x- ಅಕ್ಷ ಇದ್ದರೆ flex-direction: column). start, end, center, baseline, ಅಥವಾ 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-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(ಪ್ರಾರಂಭಿಸಲು y- ಅಕ್ಷ, x- ಅಕ್ಷ ಇದ್ದರೆ flex-direction: column). ಅದೇ ಆಯ್ಕೆಗಳಿಂದ ಆಯ್ಕೆಮಾಡಿ align-items: start, end, center, baseline, ಅಥವಾ stretch(ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್).

ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಜೋಡಿಸಲಾದ ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಜೋಡಿಸಲಾದ ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಜೋಡಿಸಲಾದ ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಜೋಡಿಸಲಾದ ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಜೋಡಿಸಲಾದ ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
<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ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಸಮತಲ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುವಾಗ ಅವರ ವಿಷಯಕ್ಕೆ ಸಮಾನವಾದ ಅಗಲಗಳಿಗೆ (ಅಥವಾ ಅವರ ವಿಷಯವು ಅವರ ಗಡಿ-ಪೆಟ್ಟಿಗೆಗಳನ್ನು ಮೀರದಿದ್ದರೆ ಸಮಾನ ಅಗಲಗಳಿಗೆ) ಒತ್ತಾಯಿಸಲು ಸಹೋದರ ಅಂಶಗಳ ಸರಣಿಯಲ್ಲಿ ವರ್ಗವನ್ನು ಬಳಸಿ .

ಬಹಳಷ್ಟು ವಿಷಯದೊಂದಿಗೆ ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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-grow-1ಎಲಿಮೆಂಟ್‌ಗಳು ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಜಾಗವನ್ನು ಬಳಸುತ್ತವೆ, ಉಳಿದ ಎರಡು ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳಿಗೆ ಅವುಗಳ ಅಗತ್ಯ ಜಾಗವನ್ನು ಅನುಮತಿಸುತ್ತವೆ.

ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಮೂರನೇ ಫ್ಲೆಕ್ಸ್ ಐಟಂ
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

.flex-shrink-*ಅಗತ್ಯವಿದ್ದರೆ ಕುಗ್ಗಿಸುವ ಫ್ಲೆಕ್ಸ್ ಐಟಂನ ಸಾಮರ್ಥ್ಯವನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ . ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ಜೊತೆಗಿನ ಎರಡನೇ ಫ್ಲೆಕ್ಸ್ ಐಟಂ .flex-shrink-1ಅದರ ವಿಷಯಗಳನ್ನು ಹೊಸ ಸಾಲಿಗೆ ಕಟ್ಟಲು ಒತ್ತಾಯಿಸಲಾಗುತ್ತದೆ, ಜೊತೆಗೆ ಹಿಂದಿನ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗೆ ಹೆಚ್ಚಿನ ಸ್ಥಳವನ್ನು ಅನುಮತಿಸಲು "ಕುಗ್ಗಿಸುತ್ತದೆ" .w-100.

ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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 ಕೆಲವು ಅದ್ಭುತವಾದ ಕೆಲಸಗಳನ್ನು ಮಾಡಬಹುದು. ಸ್ವಯಂ ಅಂಚುಗಳ ಮೂಲಕ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳನ್ನು ನಿಯಂತ್ರಿಸುವ ಮೂರು ಉದಾಹರಣೆಗಳನ್ನು ಕೆಳಗೆ ತೋರಿಸಲಾಗಿದೆ: ಡೀಫಾಲ್ಟ್ (ಸ್ವಯಂ ಅಂಚು ಇಲ್ಲ), ಎರಡು ಐಟಂಗಳನ್ನು ಬಲಕ್ಕೆ ತಳ್ಳುವುದು ( .me-auto), ಮತ್ತು ಎರಡು ಐಟಂಗಳನ್ನು ಎಡಕ್ಕೆ ತಳ್ಳುವುದು ( .ms-auto).

ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
html
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

ಅಲೈನ್-ಐಟಂಗಳೊಂದಿಗೆ

align-items, flex-direction: columnಮತ್ತು margin-top: autoಅಥವಾ ಮಿಶ್ರಣ ಮಾಡುವ ಮೂಲಕ ಒಂದು ಫ್ಲೆಕ್ಸ್ ಐಟಂ ಅನ್ನು ಕಂಟೇನರ್‌ನ ಮೇಲ್ಭಾಗ ಅಥವಾ ಕೆಳಭಾಗಕ್ಕೆ ಲಂಬವಾಗಿ ಸರಿಸಿ margin-bottom: auto.

ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
html
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

ಸುತ್ತು

ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳನ್ನು ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್ನಲ್ಲಿ ಹೇಗೆ ಸುತ್ತುವಂತೆ ಬದಲಾಯಿಸಿ. .flex-nowrap, ನೊಂದಿಗೆ ಸುತ್ತುವುದು .flex-wrapಅಥವಾ ರಿವರ್ಸ್ ವ್ರ್ಯಾಪಿಂಗ್ ನೊಂದಿಗೆ ಯಾವುದೇ ಸುತ್ತುವಿಕೆಯಿಂದ (ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್) ಆಯ್ಕೆಮಾಡಿ .flex-wrap-reverse.

ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
<div class="d-flex flex-nowrap">
  ...
</div>
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
<div class="d-flex flex-wrap">
  ...
</div>
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
<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

ಆದೇಶ

ಕೆಲವು ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ನಿರ್ದಿಷ್ಟ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳ ದೃಶ್ಯ ಕ್ರಮವನ್ನು ಬದಲಾಯಿಸಿ . orderನಾವು ಐಟಂ ಅನ್ನು ಮೊದಲ ಅಥವಾ ಕೊನೆಯದಾಗಿ ಮಾಡುವ ಆಯ್ಕೆಗಳನ್ನು ಮಾತ್ರ ಒದಗಿಸುತ್ತೇವೆ, ಹಾಗೆಯೇ DOM ಆದೇಶವನ್ನು ಬಳಸಲು ಮರುಹೊಂದಿಸುತ್ತೇವೆ. order0 ರಿಂದ 5 ರವರೆಗೆ ಯಾವುದೇ ಪೂರ್ಣಾಂಕ ಮೌಲ್ಯವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಅಗತ್ಯವಿರುವ ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಮೌಲ್ಯಗಳಿಗೆ ಕಸ್ಟಮ್ CSS ಸೇರಿಸಿ .

ಮೊದಲ ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಎರಡನೇ ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಮೂರನೇ ಫ್ಲೆಕ್ಸ್ ಐಟಂ
html
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">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ಬದಲಾಯಿಸುವ ತರಗತಿಗಳು ಇವೆ.orderorder: -1order: 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 ಜೋಡಿಸಲು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಕಂಟೈನರ್‌ಗಳಲ್ಲಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ . (ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್), , , , , ಅಥವಾ . ಈ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು, ನಾವು ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳ ಸಂಖ್ಯೆಯನ್ನು ಜಾರಿಗೊಳಿಸಿದ್ದೇವೆ ಮತ್ತು ಹೆಚ್ಚಿಸಿದ್ದೇವೆ.startendcenterbetweenaroundstretchflex-wrap: wrap

ತಲೆ ಎತ್ತಿ! ಈ ಆಸ್ತಿಯು ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳ ಒಂದೇ ಸಾಲುಗಳ ಮೇಲೆ ಯಾವುದೇ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.

ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
<div class="d-flex align-content-end flex-wrap">...</div>
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
<div class="d-flex align-content-center flex-wrap">...</div>
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
<div class="d-flex align-content-between flex-wrap">...</div>
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
<div class="d-flex align-content-around flex-wrap">...</div>
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
ಫ್ಲೆಕ್ಸ್ ಐಟಂ
<div class="d-flex align-content-stretch flex-wrap">...</div>

ಗೆ ಸ್ಪಂದಿಸುವ ವ್ಯತ್ಯಾಸಗಳು ಸಹ ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-between
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-between
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-between
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-between
  • .align-content-xl-around
  • .align-content-xl-stretch
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

ಮಾಧ್ಯಮ ವಸ್ತು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ನಿಂದ ಮೀಡಿಯಾ ಆಬ್ಜೆಕ್ಟ್ ಘಟಕವನ್ನು ಪುನರಾವರ್ತಿಸಲು ನೋಡುತ್ತಿರುವಿರಾ ? ಮೊದಲಿಗಿಂತ ಹೆಚ್ಚು ನಮ್ಯತೆ ಮತ್ತು ಗ್ರಾಹಕೀಕರಣವನ್ನು ಅನುಮತಿಸುವ ಕೆಲವು ಫ್ಲೆಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ಅದನ್ನು ಮರುಸೃಷ್ಟಿಸಿ.

Placeholder Image
ಇದು ಮಾಧ್ಯಮ ಘಟಕದಿಂದ ಕೆಲವು ವಿಷಯವಾಗಿದೆ. ನೀವು ಇದನ್ನು ಯಾವುದೇ ವಿಷಯದೊಂದಿಗೆ ಬದಲಾಯಿಸಬಹುದು ಮತ್ತು ಅಗತ್ಯವಿರುವಂತೆ ಸರಿಹೊಂದಿಸಬಹುದು.
html
<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
ಇದು ಮಾಧ್ಯಮ ಘಟಕದಿಂದ ಕೆಲವು ವಿಷಯವಾಗಿದೆ. ನೀವು ಇದನ್ನು ಯಾವುದೇ ವಿಷಯದೊಂದಿಗೆ ಬದಲಾಯಿಸಬಹುದು ಮತ್ತು ಅಗತ್ಯವಿರುವಂತೆ ಸರಿಹೊಂದಿಸಬಹುದು.
html
<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>

ಸಾಸ್

ಉಪಯುಕ್ತತೆಗಳ API

ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ನಮ್ಮ ಉಪಯುಕ್ತತೆಗಳ 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
    ),
    "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,
      ),
    ),