האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
Check
in English

פלעקס

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

געבן פלעקס ביכייוויערז

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

איך בין אַ פלעקסבאָקס קאַנטיינער!
HTML
<div class="d-flex p-2">I'm a flexbox container!</div>
איך בין אַ ינלינע פלעקסבאָקס קאַנטיינער!
HTML
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

אָפּרופיק ווערייישאַנז אויך עקסיסטירן פֿאַר .d-flexאון .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex
  • .d-xxl-flex
  • .d-xxl-inline-flex

ריכטונג

שטעלן די ריכטונג פון פלעקס זאכן אין אַ פלעקס קאַנטיינער מיט ריכטונג יוטילאַטיז. אין רובֿ פאלן איר קענען פאַרלאָזן די האָריזאָנטאַל קלאַס דאָ ווי די בלעטערער פעליקייַט איז row. אָבער, איר קען טרעפן סיטואַטיאָנס ווו איר דאַרפֿן צו בפירוש שטעלן דעם ווערט (ווי אָפּרופיק לייאַוץ).

ניצן .flex-rowצו שטעלן אַ האָריזאָנטאַל ריכטונג (דעם בלעטערער פעליקייַט), אָדער .flex-row-reverseצו אָנהייבן די האָריזאָנטאַל ריכטונג פון די פאַרקערט זייַט.

פלעקס נומער 1
פלעקס נומער 2
פלעקס נומער 3
פלעקס נומער 1
פלעקס נומער 2
פלעקס נומער 3
HTML
<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

ניצן .flex-columnצו שטעלן אַ ווערטיקאַל ריכטונג, אָדער .flex-column-reverseצו אָנהייבן די ווערטיקאַל ריכטונג פון די פאַרקערט זייַט.

פלעקס נומער 1
פלעקס נומער 2
פלעקס נומער 3
פלעקס נומער 1
פלעקס נומער 2
פלעקס נומער 3
HTML
<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

אָפּרופיק ווערייישאַנז אויך עקסיסטירן פֿאַר flex-direction.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-column-reverse

באַרעכטיקן אינהאַלט

ניצן justify-contentיוטילאַטיז אויף פלעקסבאָקס קאַנטיינערז צו טוישן די אַליינמאַנט פון פלעקס ייטאַמז אויף די הויפּט אַקס (די X-אַקס צו אָנהייבן, י-אַקס אויב flex-direction: column). קלייַבן פון start(בלעטערער פעליקייַט), end, center, between, around, אָדער evenly.

פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

אָפּרופיק ווערייישאַנז אויך עקסיסטירן פֿאַר justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-evenly
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-sm-evenly
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-md-evenly
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-lg-evenly
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around
  • .justify-content-xl-evenly
  • .justify-content-xxl-start
  • .justify-content-xxl-end
  • .justify-content-xxl-center
  • .justify-content-xxl-between
  • .justify-content-xxl-around
  • .justify-content-xxl-evenly

ייַנרייען זאכן

ניצן align-itemsיוטילאַטיז אויף פלעקסבאָקס קאַנטיינערז צו טוישן די אַליינמאַנט פון פלעקס ייטאַמז אויף די קרייַז אַקס (די י-אַקס צו אָנהייבן, X-אַקס אויב flex-direction: column). קלייַבן פון start, end, center, baseline, אָדער stretch(בלעטערער פעליקייַט).

פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

אָפּרופיק ווערייישאַנז אויך עקסיסטירן פֿאַר align-items.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-stretch

ייַנרייען זיך

ניצן align-selfיוטילאַטיז אויף פלעקסבאָקס זאכן צו ינדיווידזשואַלי טוישן זייער אַליינמאַנט אויף די קרייַז אַקס (די י-אַקס צו אָנהייבן, X-אַקס אויב flex-direction: column). קלייַבן פון די זעלבע אָפּציעס ווי align-items: start, end, center, baseline, אָדער stretch(בלעטערער פעליקייַט).

פלעקס נומער
אַליינד פלעקס נומער
פלעקס נומער
פלעקס נומער
אַליינד פלעקס נומער
פלעקס נומער
פלעקס נומער
אַליינד פלעקס נומער
פלעקס נומער
פלעקס נומער
אַליינד פלעקס נומער
פלעקס נומער
פלעקס נומער
אַליינד פלעקס נומער
פלעקס נומער
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

אָפּרופיק ווערייישאַנז אויך עקסיסטירן פֿאַר align-self.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

פּלאָמבירן

ניצן די .flex-fillקלאַס אויף אַ סעריע פון ​​סיבלינג עלעמענטן צו צווינגען זיי אין ווידטס גלייַך צו זייער אינהאַלט (אָדער גלייַך ווידטס אויב זייער אינהאַלט טוט נישט יקסיד זייער גרענעץ-באָקסעס) בשעת איר נעמען אַלע בנימצא האָריזאָנטאַל פּלאַץ.

פלעקס נומער מיט אַ פּלאַץ פון אינהאַלט
פלעקס נומער
פלעקס נומער
HTML
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

אָפּרופיק ווערייישאַנז אויך עקסיסטירן פֿאַר flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

וואַקסן און ייַנשרומפּן

ניצן .flex-grow-*יוטילאַטיז צו באַשטימען די פיייקייט פון אַ פלעקס נומער צו וואַקסן צו פּלאָמבירן בנימצא פּלאַץ. אין דעם ביישפּיל אונטן, די .flex-grow-1עלעמענטן ניצט אַלע בנימצא פּלאַץ עס קענען, בשעת אַלאַוינג די רוען צוויי פלעקס זאכן זייער נייטיק פּלאַץ.

פלעקס נומער
פלעקס נומער
דריט פלעקס נומער
HTML
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Third flex item</div>
</div>

ניצן .flex-shrink-*יוטילאַטיז צו באַשטימען די פיייקייט פון אַ פלעקס נומער צו ייַנשרומפּן אויב נייטיק. אין דעם ביישפּיל אונטן, די רגע פלעקס נומער מיט .flex-shrink-1איז געצווונגען צו ייַנוויקלען זייַן אינהאַלט צו אַ נייַע שורה, "שרינגקינג" צו לאָזן מער פּלאַץ פֿאַר די פריערדיקע פלעקס נומער מיט .w-100.

פלעקס נומער
פלעקס נומער
HTML
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">Flex item</div>
</div>

אָפּרופיק ווערייישאַנז אויך עקסיסטירן פֿאַר flex-growאון flex-shrink.

  • .flex-{grow|shrink}-0
  • .flex-{grow|shrink}-1
  • .flex-sm-{grow|shrink}-0
  • .flex-sm-{grow|shrink}-1
  • .flex-md-{grow|shrink}-0
  • .flex-md-{grow|shrink}-1
  • .flex-lg-{grow|shrink}-0
  • .flex-lg-{grow|shrink}-1
  • .flex-xl-{grow|shrink}-0
  • .flex-xl-{grow|shrink}-1
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{grow|shrink}-1

אַוטאָ מאַרדזשאַנז

פלעקסבאָקס קענען טאָן עטלעכע שיין אָסאַם טינגז ווען איר מישן פלעקס אַליינמאַנץ מיט אַוטאָ מאַרדזשאַנז. געוויזן אונטן זענען דריי ביישפילן פון קאַנטראָולינג פלעקס זאכן דורך אַוטאָ מאַרדזשאַנז: פעליקייַט (קיין אַוטאָ גרענעץ), פּושינג צוויי זאכן צו די רעכט ( .me-auto) און פּושינג צוויי זאכן צו די לינקס ( .ms-auto).

פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
HTML
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">Flex item</div>
</div>

מיט אַליינ-ייטאַמז

ווערטיקלי מאַך איין פלעקס נומער צו די שפּיץ אָדער דנאָ פון אַ קאַנטיינער דורך מיקסינג align-items, flex-direction: column, און margin-top: autoאָדער margin-bottom: auto.

פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
HTML
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

ייַנוויקלען

טוישן ווי פלעקס זאכן ייַנוויקלען אין אַ פלעקס קאַנטיינער. קלייַבן פון קיין ראַפּינג אין אַלע (די בלעטערער פעליקייַט) מיט .flex-nowrap, ראַפּינג מיט .flex-wrap, אָדער פאַרקערט ראַפּינג מיט .flex-wrap-reverse.

פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
<div class="d-flex flex-nowrap">
  ...
</div>
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
<div class="d-flex flex-wrap">
  ...
</div>
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
<div class="d-flex flex-wrap-reverse">
  ...
</div>

אָפּרופיק ווערייישאַנז אויך עקסיסטירן פֿאַר flex-wrap.

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-wrap-reverse

סדר

טוישן די וויזשאַוואַל סדר פון ספּעציפיש פלעקס זאכן מיט אַ האַנדפול פון orderיוטילאַטיז. מיר בלויז צושטעלן אָפּציעס פֿאַר מאכן אַ נומער ערשטער אָדער לעצטע, ווי געזונט ווי אַ באַשטעטיק צו נוצן די DOM סדר. ווי orderעס נעמט קיין ינטאַדזשער ווערט פון 0 צו 5, לייגן מנהג CSS פֿאַר קיין נאָך וואַלועס דארף.

ערשטער פלעקס נומער
צווייטע פלעקס נומער
דריט פלעקס נומער
HTML
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

אָפּרופיק ווערייישאַנז אויך עקסיסטירן פֿאַר order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xxl-0
  • .order-xxl-1
  • .order-xxl-2
  • .order-xxl-3
  • .order-xxl-4
  • .order-xxl-5

אַדישנאַלי עס זענען אויך אָפּרופיק .order-firstאון .order-lastקלאסן וואָס טוישן די orderפון אַן עלעמענט דורך אַפּלייינג order: -1און order: 6ריספּעקטיוולי.

  • .order-first
  • .order-last
  • .order-sm-first
  • .order-sm-last
  • .order-md-first
  • .order-md-last
  • .order-lg-first
  • .order-lg-last
  • .order-xl-first
  • .order-xl-last
  • .order-xxl-first
  • .order-xxl-last

ייַנרייען אינהאַלט

ניצן align-contentיוטילאַטיז אויף פלעקסבאָקס קאַנטיינערז צו ייַנרייען פלעקס זאכן צוזאַמען אויף די קרייַז אַקס. קלייַבן פון start(בלעטערער פעליקייַט), end, center, between, around, אָדער stretch. צו באַווייַזן די יוטילאַטיז, מיר האָבן ענפאָרסט flex-wrap: wrapאון געוואקסן די נומער פון פלעקס ייטאַמז.

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

פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
<div class="d-flex align-content-end flex-wrap">...</div>
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
<div class="d-flex align-content-center flex-wrap">...</div>
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
<div class="d-flex align-content-between flex-wrap">...</div>
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
<div class="d-flex align-content-around flex-wrap">...</div>
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
פלעקס נומער
<div class="d-flex align-content-stretch flex-wrap">...</div>

אָפּרופיק ווערייישאַנז אויך עקסיסטירן פֿאַר align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-between
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-between
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-between
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-between
  • .align-content-xl-around
  • .align-content-xl-stretch
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-between
  • .align-content-xxl-around
  • .align-content-xxl-stretch

מידיאַ כייפעץ

איר זוכט צו רעפּלאַקייט די מידיאַ כייפעץ קאָמפּאָנענט פֿון Bootstrap 4? רעקריייט עס אין קיין צייט מיט עטלעכע פלעקס יוטילאַטיז וואָס לאָזן אפילו מער בייגיקייט און קוסטאָמיזאַטיאָן ווי פריער.

Placeholder Image
דאָס איז עטלעכע אינהאַלט פון אַ מידיאַ קאָמפּאָנענט. איר קענען פאַרבייַטן דעם מ��ט קיין אינהאַלט און סטרויערן עס ווי דארף.
HTML
<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

און זאָגן איר ווילן צו צענטראַל די אינהאַלט ווייַטער צו די בילד:

Placeholder Image
דאָס איז עטלעכע אינהאַלט פון אַ מידיאַ קאָמפּאָנענט. איר קענען פאַרבייַטן דעם מיט קיין אינהאַלט און סטרויערן עס ווי דארף.
HTML
<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

סאַס

Utilities API

פלעקסבאָקס יוטילאַטיז זענען דערקלערט אין אונדזער יוטילאַטיז אַפּי אין scss/_utilities.scss. לערנען ווי צו נוצן די Utilities API.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),