in English

Դարեր

Հակիրճ օգնականներ, որոնք կառուցված են մեր flexbox կոմունալ ծրագրերի վրա՝ բաղադրիչների դասավորությունն ավելի արագ և հեշտ դարձնելու համար, քան երբևէ:

Այս էջում

Stacks-ն առաջարկում է դյուրանցում մի շարք flexbox հատկությունների կիրառման համար՝ Bootstrap-ում արագ և հեշտությամբ դասավորություններ ստեղծելու համար: Հայեցակարգի և իրականացման ողջ վարկը բաժին է ընկնում բաց կոդով Pylon նախագծին :

Գլուխը վեր Վերջերս Safari-ին ավելացվել է flexbox-ի հետ բացվող կոմունալ ծառայությունների աջակցությունը, այնպես որ ստուգեք ձեր նախատեսվող դիտարկիչի աջակցությունը: Ցանցի դասավորությունը չպետք է խնդիրներ ունենա: Կարդալ ավելին .

Ուղղահայաց

Օգտագործեք .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են որպես spacers.

Առաջին կետ

Երկրորդ կետ

Երրորդ կետ

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