Pilas
Taquigrafía yanapaqkuna chaymanta flexbox yanapakuyniyku patapi ruwanku componente churayta aswan utqaylla chaymanta aswan facil ñawpaqmanta ruwanapaq.
Pilas huk llalliq ñanta qun huk yupay flexbox kaqninkunata churanapaq usqhaylla chaymanta mana sasa Bootstrap kaqpi churanakuna ruwanapaq. Tukuy yupaychay yuyaypaq chaymanta ruwaypaq rin kichasqa qullqisapa Pylon llamk'ayman .
Sayanpa
.vstack
Sayaq churanakunata ruwanapaq llamk’achiy . Pilasqa imakuna hunt'a anchoyuqmi ñawpaqmanta. Utilidades nisqawan .gap-*
imakunapura espaciota yapanaykipaq.
<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>
Kinranpa
Utilizar .hstack
para layouts horizontales nisqapaq. Pilasqa imakuna sayaq chawpichasqa kanku ñawpaqmanta chaymanta necesario anchonkullata hap'inku. Utilidades nisqawan .gap-*
imakunapura espaciota yapanaykipaq.
<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>
Espaciadores hina hina margen horizontal yanapakuykunata llamk'achispa .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>
Hinaspa sayaq kamachikuykunawan :
<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>
Ejemplos
Utilizar .vstack
para pilar botones y otros elementos:
<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>
Huk chiru ukhupi formulariota ruway kaykunawan .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;
}