פלעקס
געשווינד פירן די אויסלייג, אַליינמאַנט און סייזינג פון גריד שפאלטן, נאַוויגאַציע, קאַמפּאָונאַנץ און מער מיט אַ פול סוויט פון אָפּרופיק פלעקסבאָקס יוטילאַטיז. פֿאַר מער קאָמפּליצירט ימפּלאַמאַנץ, מנהג 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
.d-xxl-flex
.d-xxl-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
.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
קלאַס אויף אַ סעריע פון סיבלינג עלעמענטן צו צווינגען זיי אין ווידטס גלייַך צו זייער אינהאַלט (אָדער גלייַך ווידטס אויב זייער אינהאַלט טוט נישט יקסיד זייער גרענעץ-באָקסעס) בשעת איר נעמען אַלע בנימצא האָריזאָנטאַל פּלאַץ.
<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-xxl-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
.flex-xxl-{grow|shrink}-0
.flex-xxl-{grow|shrink}-1
אַוטאָ מאַרדזשאַנז
פלעקסבאָקס קענען טאָן עטלעכע שיין אָסאַם טינגז ווען איר מישן פלעקס אַליינמאַנץ מיט אַוטאָ מאַרדזשאַנז. געוויזן אונטן זענען דריי ביישפילן פון קאַנטראָולינג פלעקס זאכן דורך אַוטאָ מאַרדזשאַנז: פעליקייַט (קיין אַוטאָ גרענעץ), פּושינג צוויי זאכן צו די רעכט ( .me-auto
) און פּושינג צוויי זאכן צו די לינקס ( .ms-auto
).
<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="me-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="ms-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
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse
סדר
טוישן די וויזשאַוואַל סדר פון ספּעציפיש פלעקס זאכן מיט אַ האַנדפול פון order
יוטילאַטיז. מיר צושטעלן בלויז אָפּציעס פֿאַר מאכן אַ נומער ערשטער אָדער לעצטע, ווי געזונט ווי אַ באַשטעטיק צו נוצן די DOM סדר. ווי order
עס נעמט קיין ינטאַדזשער ווערט פון 0 צו 5, לייגן מנהג CSS פֿאַר קיין נאָך וואַלועס דארף.
<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-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-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
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-around
.align-content-xxl-stretch
מידיאַ כייפעץ
איר זוכט צו רעפּלאַקייט די מידיאַ כייפעץ קאָמפּאָנענט פֿון Bootstrap 4? רעקריייט עס אין קיין צייט מיט עטלעכע פלעקס יוטילאַטיז וואָס לאָזן אפילו מער בייגיקייט און קוסטאָמיזאַטיאָן ווי פריער.
<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>
און זאָגן איר ווילן צו צענטראַל די אינהאַלט ווייַטער צו די בילד:
<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
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"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,
),
),