Source

פלעקס

געשווינד פירן די אויסלייג, אַליינמאַנט און סייזינג פון גריד שפאלטן, נאַוויגאַציע, קאַמפּאָונאַנץ און מער מיט אַ פול סוויט פון אָפּרופיק פלעקסבאָקס יוטילאַטיז. פֿאַר מער קאָמפּליצירט ימפּלאַמאַנץ, מנהג 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צו אָנהייבן די האָריזאָנטאַל ריכטונג פון די פאַרקערט זייַט.

פלעקס נומער 1

פלעקס נומער 2

פלעקס נומער 3

פלעקס נומער 1

פלעקס נומער 2

פלעקס נומער 3

<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צו אָנהייבן די ווערטיקאַל ריכטונג פון די פאַרקערט זייַט.

פלעקס נומער 1

פלעקס נומער 2

פלעקס נומער 3

פלעקס נומער 1

פלעקס נומער 2

פלעקס נומער 3

<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 with a lot of content</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