סטאַקס

סטענאָגראַפיע העלפּערס וואָס בויען אויף שפּיץ פון אונדזער פלעקסבאָקס יוטילאַטיז צו מאַכן קאָמפּאָנענט אויסלייג פאַסטער און גרינגער ווי אלץ.

אויף דעם בלאַט

סטאַקס פאָרשלאָגן אַ דורכוועג פֿאַר אַפּלייינג אַ נומער פון פלעקסבאָקס פּראָפּערטיעס צו געשווינד און לייכט שאַפֿן לייאַוץ אין באָאָטסטראַפּ. אַלע קרעדיט פֿאַר דעם באַגריף און ימפּלאַמענטיישאַן גייט צו די אָפֿן מקור פּילאָן פּרויעקט .

קאָפּ אַרויף! סופּפּאָרט פֿאַר ריס יוטילאַטיז מיט פלעקסבאָקס איז לעצטנס צוגעגעבן צו 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;
}