ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
Check
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;
}