לְהַגמִישׁ
נהל במהירות את הפריסה, היישור והגודל של עמודות הרשת, הניווט, הרכיבים ועוד עם חבילה מלאה של כלי עזר מגיב ל-flexbox. עבור יישומים מורכבים יותר, ייתכן שיהיה צורך ב-CSS מותאם אישית.
אפשר התנהגויות גמישות
החל display
כלי עזר כדי ליצור מיכל flexbox ולהפוך אלמנטים ילדים ישירים לפריטי flex. ניתן לשנות עוד יותר מיכלים ופריטים עם תכונות גמישות נוספות.
<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
כיוון
הגדר את הכיוון של פריטי flex במיכל 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
בכלי עזר במיכלי flexbox כדי לשנות את היישור של פריטי flex על הציר הראשי (ציר ה-x כדי להתחיל, ציר ה-y אם 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
בכלי עזר במיכלי flexbox כדי לשנות את היישור של פריטי flex בציר הצלב (ציר ה-y כדי להתחיל, ציר ה-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
בכלי עזר בפריטי flexbox כדי לשנות בנפרד את היישור שלהם בציר הצלב (ציר ה-y כדי להתחיל, ציר ה-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
שוליים אוטומטיים
Flexbox יכול לעשות כמה דברים די מדהימים כשאתה מערבב יישור גמיש עם שוליים אוטומטיים. להלן שלוש דוגמאות לשליטה בפריטים גמישים באמצעות שוליים אוטומטיים: ברירת מחדל (ללא שוליים אוטומטיים), דחיפת שני פריטים ימינה ( .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 עוטפים במיכל flex. בחר בין ללא גלישה כלל (ברירת המחדל של הדפדפן) עם .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
בכלי עזר על מיכלי flexbox כדי ליישר פריטים גמישים זה לזה על הציר הצלב. בחר מתוך 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>
סאס
API של Utilities
כלי השירות של Flexbox מוצהרים ב-API של השירותים שלנו ב- scss/_utilities.scss
. למד כיצד להשתמש בממשק ה-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,
),
),