Source

לְהַגמִישׁ

נהל במהירות את הפריסה, היישור והגודל של עמודות הרשת, הניווט, הרכיבים ועוד עם חבילה מלאה של כלי עזר מגיב ל-flexbox. עבור יישומים מורכבים יותר, ייתכן שיהיה צורך ב-CSS מותאם אישית.

אפשר התנהגויות גמישות

החל displayכלי עזר כדי ליצור מיכל flexbox ולהפוך אלמנטים ילדים ישירים לפריטי flex. ניתן לשנות עוד יותר מיכלים ופריטים עם תכונות גמישות נוספות.

אני מיכל flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
אני מיכל flexbox מוטבע!
<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

כיוון

הגדר את הכיוון של פריטי flex במיכל 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בכלי עזר במיכלי flexbox כדי לשנות את היישור של פריטי flex בציר הראשי (ציר ה-x כדי להתחיל, ציר ה-y אם 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בכלי עזר במיכלי 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-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

למלא

השתמש .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

שוליים אוטומטיים

Flexbox יכול לעשות כמה דברים די מדהימים כשאתה מערבב יישור גמיש עם שוליים אוטומטיים. להלן שלוש דוגמאות לשליטה בפריטים גמישים באמצעות שוליים אוטומטיים: ברירת מחדל (ללא שוליים אוטומטיים), דחיפת שני פריטים ימינה ( .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 עוטפים במיכל 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

להזמין

שנה את הסדר החזותי של פריטי גמיש ספציפיים עם קומץ orderכלי עזר. אנו מספקים רק אפשרויות להכנת פריט ראשון או אחרון, כמו גם איפוס לשימוש בהזמנה DOM. כפי orderשמקבל כל ערך של מספר שלם (למשל, 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-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את מספר הפריטים הגמישים.

שימו לב! למאפיין זה אין השפעה על שורות בודדות של פריטי גמיש.

גמיש פריט
גמיש פריט
גמיש פריט
גמיש פריט
גמיש פריט
גמיש פריט
גמיש פריט
גמיש פריט
גמיש פריט
גמיש פריט
גמיש פריט
גמיש פריט
גמיש פריט
גמיש פריט
גמיש פריט
<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