ስታክስ

ኣብ ልዕሊ ፍሌክስቦክስ ዩቲሊቲታትና ዝሃንጹ ሓጸርቲ ጽሑፍ ሓገዝቲ ንኣቀማምጣ ኣካላት ካብ ዝኾነ እዋን ንላዕሊ ቅልጡፍን ቀሊልን ንምግባር።

ኣብዚ ገጽ

ስታክስ ኣብ ቡትስትራፕ ብቕልጡፍን ብቐሊሉን ኣቀማምጣ ንምፍጣር ብርክት ዝበሉ ናይ ፍሌክስቦክስ ባህርያት ንምትግባር ኣቋራጭ መገዲ ይህቡ። ኩሉ ክብሪ ናይቲ ኣምርን ኣተገባብራን ናብ ፕሮጀክት ክፉት ምንጪ ፓይሎን ይኸይድ ።

ርእሲ ንላዕሊ! ደገፍ ን gap utilities ምስ flexbox ኣብ ቀረባ እዋን ኣብ ሳፋሪ ተወሰኸ፣ ስለዚ ነቲ ዝሓሰብካዮ ናይ መርበብ ሓበሬታ ደገፍ ምርግጋጽ ኣብ ግምት ኣእቱ። ኣቀማምጣ ሽቦ ዝኾነ ጉዳይ ክህልዎ የብሉን። ተወሳኺ ኣንብብ .

ንትኹል

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