פלעקס

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

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

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

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

<div class="d-inline-flex p-2 bd-highlight">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

ריכטונג

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

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

<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

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

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">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

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

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

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

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

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

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

ניצן 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-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

פּלאָמבירן

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

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

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

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

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

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

<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

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

<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">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

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

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

צום באַדויערן, IE10 און IE11 טאָן ניט רעכט שטיצן אַוטאָ מאַרדזשאַנז אויף פלעקס ייטאַמז וועמענס פאָטער האט אַ ניט-פעליקייַט justify-contentווערט. זען דעם StackOverflow ענטפער פֿאַר מער דעטאַילס.

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

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

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

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

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

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

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

סדר

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

<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

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

• .order-0
• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-6
• .order-7
• .order-8
• .order-9
• .order-10
• .order-11
• .order-12
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12

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

ניצן 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-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-around
• .align-content-xl-stretch