Pilas

Taquigrafía yanapaqkuna chaymanta flexbox yanapakuyniyku patapi ruwanku componente churayta aswan utqaylla chaymanta aswan facil ñawpaqmanta ruwanapaq.

Kay p'anqapi

Pilas huk llalliq ñanta qun huk yupay flexbox kaqninkunata churanapaq usqhaylla chaymanta mana sasachu Bootstrap kaqpi churanakuna ruwanapaq. Tukuy yupaychay yuyaypaq chaymanta ruwaypaq rin kichasqa qullqisapa Pylon llamk'ayman .

¡Umakuna wichayman! Yanapakuy gap yanapakuykunapaq flexbox kaqwan chayllaraq yapasqa Safari kaqman, chayrayku qhaway chiqaqchayta munasqa maskaq yanapakuyniyki. Rejilla churayqa mana ima sasachakuyniyuqchu kanan tiyan. Astawan ñawinchay .

Sayanpa

.vstackSayaq churanakunata ruwanapaq llamk’achiy . Pilasqa imakuna hunt'a anchoyuqmi ñawpaqmanta. Utilidades nisqawan .gap-*imakunapura espaciota yapanaykipaq.

Ñawpaq kaq item

Iskay kaq item

Kimsa kaq item

html nisqapi

<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 .hstackpara layouts horizontales nisqapaq. Pilasqa imakuna sayaq chawpichasqa kanku ñawpaqmanta chaymanta necesario anchonkullata hap'inku. Utilidades nisqawan .gap-*imakunapura espaciota yapanaykipaq.

Ñawpaq kaq item

Iskay kaq item

Kimsa kaq item

html nisqapi

<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:

Ñawpaq kaq item

Iskay kaq item

Kimsa kaq item

html nisqapi

<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 :

Ñawpaq kaq item

Iskay kaq item

Kimsa kaq item

html nisqapi

<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 .vstackpara pilar botones y otros elementos:

html nisqapi

<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:

html nisqapi

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