Rafu

Visaidizi vya mkono mkato ambavyo huunda juu ya huduma zetu za flexbox ili kufanya mpangilio wa vipengele haraka na rahisi zaidi kuliko hapo awali.

Katika ukurasa huu

Rafu hutoa njia ya mkato ya kutumia idadi ya vipengele vya flexbox ili kuunda kwa haraka na kwa urahisi miundo katika Bootstrap. Sifa zote za dhana na utekelezaji huenda kwa mradi wa Pylon wa chanzo huria .

Vichwa juu! Usaidizi wa huduma za pengo na flexbox uliongezwa kwenye Safari hivi majuzi, kwa hivyo zingatia kuthibitisha usaidizi wako wa kivinjari. Mpangilio wa gridi haipaswi kuwa na masuala. Soma zaidi .

Wima

Tumia .vstackkuunda mipangilio ya wima. Vipengee vilivyopangwa kwa rafu ni upana kamili kwa chaguo-msingi. Tumia .gap-*huduma kuongeza nafasi kati ya vitu.

Kipengee cha kwanza

Kipengee cha pili

Kipengee cha tatu

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

Mlalo

Tumia .hstackkwa mipangilio ya usawa. Vipengee vilivyopangwa huwekwa katikati kiwima kwa chaguo-msingi na huchukua tu upana unaohitajika. Tumia .gap-*huduma kuongeza nafasi kati ya vitu.

Kipengee cha kwanza

Kipengee cha pili

Kipengee cha tatu

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

Kutumia huduma za ukingo wa usawa kama .ms-autovile spacers:

Kipengee cha kwanza

Kipengee cha pili

Kipengee cha tatu

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

Na sheria za wima :

Kipengee cha kwanza

Kipengee cha pili

Kipengee cha tatu

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

Mifano

Tumia .vstackkuweka vitufe na vitu vingine:

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

Unda fomu ya ndani na .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;
}