Tāpae
Ko nga kaiawhina poto e hanga ana i runga ake o a maatau taputapu pouaka ngawari kia tere ake ai te whakatakotoranga o nga waahanga me te ngawari ake.
Ka tukuna e Stacks he pokatata mo te whakamahi i te maha o nga taonga pouaka ngawari kia tere, ngawari hoki te hanga tahora ki Bootstrap. Ko nga nama katoa mo te ariā me te whakatinanatanga ka haere ki te kaupapa Pylon puna tuwhera .
Poutū
Whakamahia .vstack
hei hanga whakatakotoranga poutū. Ko nga mea kua taapuhia he whanui-katoa na te taunoa. Whakamahia .gap-*
nga taputapu hei taapiri mokowhiti i waenga i nga taonga.
<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>
Whakapae
Whakamahia .hstack
mo nga whakatakotoranga whakapae. Ko nga mea kua taapuhia he mea whakatekau ma te taunoa, ka tango noa i te whanui e tika ana. Whakamahia .gap-*
nga taputapu hei taapiri mokowhiti i waenga i nga taonga.
<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>
Te whakamahi i nga taputapu tawhē whakapae penei .ms-auto
i te mokowhiti:
<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>
Me nga ture poutū :
<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>
Tauira
Whakamahia .vstack
hei tāpae pātene me ētahi atu huānga:
<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>
Waihangatia he puka rōraina me .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>
Sass
.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;
}