in English

Стекҳо

Ёрдамчиёни стенография, ки дар болои утилитаҳои flexbox мо сохта мешаванд, то тарҳбандии ҷузъҳоро аз ҳарвақта зудтар ва осонтар кунанд.

Дар ин саҳифа

Стекҳо миёнабурро барои татбиқи як қатор хосиятҳои flexbox барои зуд ва ба осонӣ сохтани тарҳҳо дар Bootstrap пешниҳод мекунанд. Ҳама кредит барои консепсия ва татбиқ ба лоиҳаи кушодаи Pylon дода мешавад.

Сарҳо боло! Дастгирии коммуналӣ бо flexbox ба наздикӣ ба Safari илова карда шуд, аз ин рӯ тафтиш кунед, ки дастгирии пешбинишудаи браузери худро тафтиш кунед. Тарҳбандии шабака набояд ягон мушкилот дошта бошад. Муфассалтар хонед .

Амудӣ

.vstackБарои сохтани тарҳҳои амудӣ истифода баред . Унсурҳои чуќурї аз рӯи нобаёнӣ пурра паҳн мешаванд. Утилитҳоро .gap-*барои илова кардани фосила байни ашё истифода баред.

Моддаи якум

Моддаи дуюм

Моддаи сеюм

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>

Уфуқӣ

.hstackБарои тарҳҳои уфуқӣ истифода баред . Элементҳои ҷамъшуда ба таври амудӣ дар марказ ҷойгир шудаанд ва танҳо паҳнои лозимии онҳоро мегиранд. Утилитҳоро .gap-*барои илова кардани фосила байни ашё истифода баред.

Моддаи якум

Моддаи дуюм

Моддаи сеюм

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>

Истифодаи утилитаҳои маржаи уфуқӣ ба монанди .ms-autoҷудокунандаҳо:

Моддаи якум

Моддаи дуюм

Моддаи сеюм

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>

Ва бо қоидаҳои амудӣ :

Моддаи якум

Моддаи дуюм

Моддаи сеюм

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>

Мисолхо

.vstackБарои стек тугмаҳо ва дигар элементҳоро истифода баред :

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>

Эҷоди шакли дохилӣ бо .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>

Сасс

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