स्टॅक करतात

घटक मांडावळ पयलीं परस बेगीन आनी सोपी करपाक आमच्या flexbox उपयुक्ततायांचेर तयार करपी आशुलिपी मदतगार.

ह्या पानाचेर

बूटस्ट्रॅपांत बेगीन आनी सोंपेंपणान मांडावळी तयार करपाक स्टॅक जायत्या flexbox गुणधर्म लागू करपाक शॉर्टकट दितात. संकल्पनेचें आनी कार्यान्वयनाचे सगळें श्रेय मुक्त स्रोत पायलोन प्रकल्पाक वता .

तकली वयर काडटा! flexbox आशिल्ल्या गॅप उपयुक्तताय खातीर आदार हालींच Safari कडेन जोडला, देखून तुमचो हेतू आशिल्लो ब्राउझर आदार सत्यापीत करपाचो विचार करात. ग्रिड मांडावळीक कसलेच प्रस्न आसूंक फावना. आनिकूय वाचात .

उबे

.vstackउबी मांडावळ तयार करपाक वापरात . स्टॅक केल्लीं वस्तू पूर्वनिर्धारीतपणान पुराय रुंदायेचीं आसतात. .gap-*वस्तूं मदीं जागो जोडपाक उपयुक्तताय वापरात .

पयली वस्तू

दुसरी वस्तू

तिसरो आयटम

एचटीएमएल हें नांव

<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-*वस्तूं मदीं जागो जोडपाक उपयुक्तताय वापरात .

पयली वस्तू

दुसरी वस्तू

तिसरो आयटम

एचटीएमएल हें नांव

<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स्पेसर म्हणून अशी आडवी मार्जिन उपयुक्तताय वापरप :

पयली वस्तू

दुसरी वस्तू

तिसरो आयटम

एचटीएमएल हें नांव

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

आनी उब्या नेमां सयत : १.

पयली वस्तू

दुसरी वस्तू

तिसरो आयटम

एचटीएमएल हें नांव

<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बटण आनी हेर घटक रांकोवपाखातीर वापरात :

एचटीएमएल हें नांव

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

एचटीएमएल हें नांव

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