in English
ስታክስ
ኣብ ልዕሊ ፍሌክስቦክስ ዩቲሊቲታትና ዝሃንጹ ሓጸርቲ ጽሑፍ ሓገዝቲ ንኣቀማምጣ ኣካላት ካብ ዝኾነ እዋን ንላዕሊ ቅልጡፍን ቀሊልን ንምግባር።
ኣብዚ ገጽ
ስታክስ ኣብ ቡትስትራፕ ብቕልጡፍን ብቐሊሉን ኣቀማምጣ ንምፍጣር ብርክት ዝበሉ ናይ ፍሌክስቦክስ ባህርያት ንምትግባር ኣቋራጭ መገዲ ይህቡ። ኩሉ ክብሪ ናይቲ ኣምርን ኣተገባብራን ናብ ፕሮጀክት ክፉት ምንጪ ፓይሎን ይኸይድ ።
ርእሲ ንላዕሊ! ደገፍ ን gap utilities ምስ flexbox ኣብ ቀረባ እዋን ኣብ ሳፋሪ ተወሰኸ፣ ስለዚ ነቲ ዝሓሰብካዮ ናይ መርበብ ሓበሬታ ደገፍ ምርግጋጽ ኣብ ግምት ኣእቱ። ኣቀማምጣ ሽቦ ዝኾነ ጉዳይ ክህልዎ የብሉን።
ተወሳኺ ኣንብብ .
ንትኹል
.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;
}