Стекҳо
Ёрдамчиёни стенография, ки дар болои утилитаҳои flexbox мо сохта мешаванд, то тарҳбандии ҷузъҳоро аз ҳарвақта зудтар ва осонтар кунанд.
Стекҳо миёнабурро барои татбиқи як қатор хосиятҳои flexbox барои зуд ва ба осонӣ сохтани тарҳҳо дар Bootstrap пешниҳод мекунанд. Ҳама кредит барои консепсия ва татбиқ ба лоиҳаи кушодаи Pylon дода мешавад.
Амудӣ
.vstack
Барои сохтани тарҳҳои амудӣ истифода баред . Унсурҳои чуќурї аз рӯи нобаёнӣ пурра паҳн мешаванд. Утилитҳоро .gap-*
барои илова кардани фосила байни ашё истифода баред.
<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>
Уфуқӣ
.hstack
Барои тарҳҳои уфуқӣ истифода баред . Элементҳои ҷамъшуда ба таври амудӣ дар марказ ҷойгир шудаанд ва танҳо паҳнои лозимии онҳоро мегиранд. Утилитҳоро .gap-*
барои илова кардани фосила байни ашё истифода баред.
<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>
Истифодаи утилитаҳои маржаи уфуқӣ ба монанди .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>
Ва бо қоидаҳои амудӣ :
<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>
Мисолхо
.vstack
Барои стек тугмаҳо ва дигар элементҳоро истифода баред :
<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>
Эҷоди шакли дохилӣ бо .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>
Сасс
.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;
}