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.

I tenei wharangi

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 .

Mahunga ake! Ko te tautoko mo nga taputapu aputa me te flexbox i honoa mai ki a Safari, na me whakaaro ki te manatoko i to tautoko tirotiro. Ko te whakatakotoranga matiti kaore he take. Pānuitia atu .

Poutū

Whakamahia .vstackhei 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.

Tuemi tuatahi

Tuemi tuarua

Tuatoru mea

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>

Whakapae

Whakamahia .hstackmo 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.

Tuemi tuatahi

Tuemi tuarua

Tuatoru mea

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>

Te whakamahi i nga taputapu tawhē whakapae penei .ms-autoi te mokowhiti:

Tuemi tuatahi

Tuemi tuarua

Tuatoru mea

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>

Me nga ture poutū :

Tuemi tuatahi

Tuemi tuarua

Tuatoru mea

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>

Tauira

Whakamahia .vstackhei tāpae pātene me ētahi atu huānga:

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>

Waihangatia he puka rōraina me .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>

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