ಫ್ಲೆಕ್ಸ್

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

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

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

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

<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

ನಿರ್ದೇಶನ

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

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

<div class="d-flex flex-row">
  <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ಎದುರು ಭಾಗದಿಂದ ಲಂಬ ದಿಕ್ಕನ್ನು ಪ್ರಾರಂಭಿಸಲು ಬಳಸಿ .

<div class="d-flex flex-column">
  <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

ವಿಷಯವನ್ನು ಸಮರ್ಥಿಸಿ

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

ಸ್ವಯಂ ಅಂಚುಗಳು

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

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

<div class="d-flex">
  <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">
  <div class="mr-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">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

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

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

<div class="d-flex align-items-start flex-column" 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" 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

ಆದೇಶ

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

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