ಫ್ಲೆಕ್ಸ್

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

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

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

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

<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

ನಿರ್ದೇಶನ

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

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

<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ಎದುರು ಭಾಗದಿಂದ ಲಂಬ ದಿಕ್ಕನ್ನು ಪ್ರಾರಂಭಿಸಲು ಬಳಸಿ .

<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ಮುಖ್ಯ ಅಕ್ಷದಲ್ಲಿ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳ ಜೋಡಣೆಯನ್ನು ಬದಲಾಯಿಸಲು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಕಂಟೇನರ್‌ಗಳಲ್ಲಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ (ಪ್ರಾರಂಭಿಸಲು x- ಅಕ್ಷ, y- ಅಕ್ಷ ಇದ್ದರೆ flex-direction: column). 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>

ಗಾಗಿ ರೆಸ್ಪಾನ್ಸಿವ್ ವ್ಯತ್ಯಾಸಗಳು ಸಹ ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ 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(ಪ್ರಾರಂಭಿಸಲು 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-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

ಭರ್ತಿ ಮಾಡಿ

.flex-fillಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಸಮತಲ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುವಾಗ ಅವರ ವಿಷಯಕ್ಕೆ ಸಮಾನವಾದ ಅಗಲಗಳಿಗೆ (ಅಥವಾ ಅವರ ವಿಷಯವು ಅವರ ಗಡಿ-ಪೆಟ್ಟಿಗೆಗಳನ್ನು ಮೀರದಿದ್ದರೆ ಸಮಾನ ಅಗಲಗಳಿಗೆ) ಒತ್ತಾಯಿಸಲು ಸಹೋದರ ಅಂಶಗಳ ಸರಣಿಯಲ್ಲಿ ವರ್ಗವನ್ನು ಬಳಸಿ .

<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-grow-*ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ತುಂಬಲು ಫ್ಲೆಕ್ಸ್ ಐಟಂ ಬೆಳೆಯುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ . ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, .flex-grow-1ಎಲಿಮೆಂಟ್‌ಗಳು ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಜಾಗವನ್ನು ಬಳಸುತ್ತವೆ, ಉಳಿದ ಎರಡು ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳಿಗೆ ಅವುಗಳ ಅಗತ್ಯ ಜಾಗವನ್ನು ಅನುಮತಿಸುತ್ತವೆ.

<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-shrink-1ಅದರ ವಿಷಯಗಳನ್ನು ಹೊಸ ಸಾಲಿಗೆ ಸುತ್ತುವಂತೆ ಒತ್ತಾಯಿಸಲಾಗುತ್ತದೆ, ಜೊತೆಗೆ ಹಿಂದಿನ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗೆ ಹೆಚ್ಚಿನ ಸ್ಥಳವನ್ನು ಅನುಮತಿಸಲು "ಕುಗ್ಗಿಸುವಿಕೆ" .w-100.

<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 ಕೆಲವು ಅದ್ಭುತವಾದ ಕೆಲಸಗಳನ್ನು ಮಾಡಬಹುದು. ಸ್ವಯಂ ಅಂಚುಗಳ ಮೂಲಕ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳನ್ನು ನಿಯಂತ್ರಿಸುವ ಮೂರು ಉದಾಹರಣೆಗಳನ್ನು ಕೆಳಗೆ ತೋರಿಸಲಾಗಿದೆ: ಡೀಫಾಲ್ಟ್ (ಸ್ವಯಂ ಅಂಚು ಇಲ್ಲ), ಎರಡು ಐಟಂಗಳನ್ನು ಬಲಕ್ಕೆ ತಳ್ಳುವುದು ( .mr-auto), ಮತ್ತು ಎರಡು ಐಟಂಗಳನ್ನು ಎಡಕ್ಕೆ ತಳ್ಳುವುದು ( .ml-auto).

justify-contentದುರದೃಷ್ಟವಶಾತ್, IE10 ಮತ್ತು IE11 ಪೋಷಕರು ಡೀಫಾಲ್ಟ್ ಅಲ್ಲದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರುವ ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳಲ್ಲಿ ಸ್ವಯಂ ಮಾರ್ಜಿನ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ . ಹೆಚ್ಚಿನ ವಿವರಗಳಿಗಾಗಿ ಈ StackOverflow ಉತ್ತರವನ್ನು ನೋಡಿ .

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

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

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

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

ಆದೇಶ

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

<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 ಜೋಡಿಸಲು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಕಂಟೈನರ್‌ಗಳಲ್ಲಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ . (ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್), , , , , ಅಥವಾ . ಈ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು, ನಾವು ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳ ಸಂಖ್ಯೆಯನ್ನು ಜಾರಿಗೊಳಿಸಿದ್ದೇವೆ ಮತ್ತು ಹೆಚ್ಚಿಸಿದ್ದೇವೆ.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-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