ستاکەکان

یارمەتیدەرانی کورتکراوە کە لەسەرەوەی سوودمەندییەکانی فلیکسبۆکسمان دروست دەکەن بۆ ئەوەی نەخشەی پێکهاتەکان خێراتر و ئاسانتر لە جاران.

لەم پەیجەدا

ستاکەکان کورتە ڕێگایەک پێشکەش دەکەن بۆ جێبەجێکردنی ژمارەیەک تایبەتمەندی فلیکسبۆکس بۆ دروستکردنی بە خێرایی و ئاسانی نەخشە لە Bootstrap. هەموو شانازییەک بۆ چەمک و جێبەجێکردنی دەچێتە سەر پڕۆژەی سەرچاوە کراوەی پایلۆن .

سەرەکان بەرز دەکەنەوە! پشتگیری بۆ سوودمەندییەکانی gap لەگەڵ flexbox بەم دواییە زیادکرا بۆ Safari، بۆیە بیر لە پشتڕاستکردنەوەی پشتگیری مەبەستدار لە وێبگەڕەکەت بکەرەوە. شێوازی تۆڕ نابێت هیچ کێشەیەکی هەبێت. زیاتر بخوێنەوە .

ستونی

بەکاری بهێنە .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;
}