לְהַגמִישׁ
נהל במהירות את הפריסה, היישור והגודל של עמודות הרשת, הניווט, הרכיבים ועוד עם חבילה מלאה של כלי עזר מגיב ל-flexbox. עבור יישומים מורכבים יותר, ייתכן שיהיה צורך ב-CSS מותאם אישית.
החל display
כלי עזר כדי ליצור מיכל flexbox ולהפוך אלמנטים ילדים ישירים לפריטי flex. ניתן לשנות עוד יותר מיכלים ופריטים עם תכונות גמישות נוספות.
<div class="d-flex p-2">I'm a flexbox container!</div>
<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
הגדר את הכיוון של פריטי flex במיכל flex עם כלי עזר לכיוון. ברוב המקרים אתה יכול להשמיט את המחלקה האופקית כאן מכיוון שברירת המחדל של הדפדפן היא row
. עם זאת, אתה עלול להיתקל במצבים שבהם היית צריך להגדיר במפורש ערך זה (כמו פריסות רספונסיביות).
השתמש .flex-row
כדי להגדיר כיוון אופקי (ברירת המחדל של הדפדפן), או .flex-row-reverse
כדי להתחיל את הכיוון האופקי מהצד הנגדי.
<div class="d-flex flex-row">
<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
כדי להתחיל את הכיוון האנכי מהצד הנגדי.
<div class="d-flex flex-column">
<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
השתמש justify-content
בכלי עזר במיכלי flexbox כדי לשנות את היישור של פריטי flex בציר הראשי (ציר ה-x כדי להתחיל, ציר ה-y אם flex-direction: column
). בחר מתוך start
(ברירת המחדל של הדפדפן), end
, center
, between
, או around
.
קיימות גם וריאציות רספונסיביות עבור 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
בכלי עזר במיכלי flexbox כדי לשנות את היישור של פריטי flex בציר הצלב (ציר ה-y כדי להתחיל, ציר ה-x אם flex-direction: column
). בחר מתוך start
, end
, center
, baseline
, או stretch
(ברירת המחדל של הדפדפן).
קיימות גם וריאציות רספונסיביות עבור 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
בכלי עזר בפריטי flexbox כדי לשנות בנפרד את היישור שלהם בציר הצלב (ציר ה-y כדי להתחיל, ציר ה-x אם flex-direction: column
). בחר מתוך אותן אפשרויות כמו align-items
: start
, end
, center
, baseline
, או stretch
(ברירת המחדל של הדפדפן).
קיימות גם וריאציות רספונסיביות עבור 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
Flexbox יכול לעשות כמה דברים די מדהימים כשאתה מערבב יישור גמיש עם שוליים אוטומטיים. להלן שלוש דוגמאות לשליטה בפריטים גמישים באמצעות שוליים אוטומטיים: ברירת מחדל (ללא שוליים אוטומטיים), דחיפת שני פריטים ימינה ( .mr-auto
) ודחיפת שני פריטים שמאלה ( .ml-auto
).
למרבה הצער, IE10 ו-IE11 אינם תומכים כראוי בשוליים אוטומטיים בפריטים גמישים שלאב שלהם יש ערך שאינו ברירת מחדל justify-content
. ראה תשובת StackOverflow זו לפרטים נוספים.
<div class="d-flex">
<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">
<div class="mr-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">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">Flex item</div>
</div>
הזז אנכית פריט גמיש אחד לחלק העליון או התחתון של מיכל על ידי ערבוב align-items
, flex-direction: column
ו margin-top: auto
או margin-bottom: auto
.
<div class="d-flex align-items-start flex-column" 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" 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 עוטפים במיכל flex. בחר בין ללא גלישה כלל (ברירת המחדל של הדפדפן) עם .flex-nowrap
, גלישה עם .flex-wrap
, או גלישה הפוכה עם .flex-wrap-reverse
.
קיימות גם וריאציות רספונסיביות עבור 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
), הוסף CSS מותאם אישית עבור כל ערכים נוספים הדרושים.
<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-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
בכלי עזר על מיכלי flexbox כדי ליישר פריטים גמישים זה לזה על הציר הצלב. בחר מתוך start
(ברירת המחדל של הדפדפן), end
, center
, between
, around
, או stretch
. כדי להדגים את כלי השירות הללו, אכפנו והגדלנו flex-wrap: wrap
את מספר הפריטים הגמישים.
שימו לב! למאפיין זה אין השפעה על שורות בודדות של פריטי גמיש.
קיימות גם וריאציות רספונסיביות עבור 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