in English

ರಾಶಿಗಳು

ಕಾಂಪೊನೆಂಟ್ ಲೇಔಟ್ ಅನ್ನು ಎಂದಿಗಿಂತಲೂ ವೇಗವಾಗಿ ಮತ್ತು ಸುಲಭವಾಗಿಸಲು ನಮ್ಮ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳ ಮೇಲೆ ನಿರ್ಮಿಸುವ ಸಂಕ್ಷಿಪ್ತ ಸಹಾಯಕರು.

ಈ ಪುಟದಲ್ಲಿ

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

ತಲೆ ಎತ್ತಿ! ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನೊಂದಿಗೆ ಗ್ಯಾಪ್ ಉಪಯುಕ್ತತೆಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಇತ್ತೀಚೆಗೆ ಸಫಾರಿಗೆ ಸೇರಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ ನಿಮ್ಮ ಉದ್ದೇಶಿತ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಪರಿಶೀಲಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಗ್ರಿಡ್ ಲೇಔಟ್ ಯಾವುದೇ ಸಮಸ್ಯೆಗಳನ್ನು ಹೊಂದಿರಬಾರದು. ಹೆಚ್ಚು ಓದಿ .

ಲಂಬವಾದ

ಲಂಬ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಬಳಸಿ .vstack. ಸ್ಟ್ಯಾಕ್ ಮಾಡಲಾದ ಐಟಂಗಳು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಪೂರ್ಣ ಅಗಲವಾಗಿರುತ್ತದೆ. .gap-*ಐಟಂಗಳ ನಡುವೆ ಜಾಗವನ್ನು ಸೇರಿಸಲು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ .

ಮೊದಲ ಐಟಂ

ಎರಡನೇ ಐಟಂ

ಮೂರನೇ ಐಟಂ

html

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

ಸಮತಲ

.hstackಸಮತಲ ವಿನ್ಯಾಸಗಳಿಗಾಗಿ ಬಳಸಿ . ಜೋಡಿಸಲಾದ ಐಟಂಗಳು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತವೆ ಮತ್ತು ಅವುಗಳ ಅಗತ್ಯ ಅಗಲವನ್ನು ಮಾತ್ರ ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ. .gap-*ಐಟಂಗಳ ನಡುವೆ ಜಾಗವನ್ನು ಸೇರಿಸಲು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ .

ಮೊದಲ ಐಟಂ

ಎರಡನೇ ಐಟಂ

ಮೂರನೇ ಐಟಂ

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

.ms-autoಸ್ಪೇಸರ್‌ಗಳಂತೆ ಸಮತಲ ಅಂಚು ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸುವುದು :

ಮೊದಲ ಐಟಂ

ಎರಡನೇ ಐಟಂ

ಮೂರನೇ ಐಟಂ

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

ಮತ್ತು ಲಂಬ ನಿಯಮಗಳೊಂದಿಗೆ :

ಮೊದಲ ಐಟಂ

ಎರಡನೇ ಐಟಂ

ಮೂರನೇ ಐಟಂ

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

ಉದಾಹರಣೆಗಳು

.vstackಗುಂಡಿಗಳು ಮತ್ತು ಇತರ ಅಂಶಗಳನ್ನು ಜೋಡಿಸಲು ಬಳಸಿ :

html

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

ಇದರೊಂದಿಗೆ ಇನ್‌ಲೈನ್ ಫಾರ್ಮ್ ಅನ್ನು ರಚಿಸಿ .hstack:

html

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

ಸಾಸ್

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}