ניווט

    • הרשמה
    • התחברות
    • חיפוש
    • פוסטים אחרונים
    • לא נפתר
    • MT
    • משתמשים
    • מתמחים.G חיפוש גוגל בפורום
    • צור קשר

    חוקי הפורום

    מדריך לשימוש בפורום

    CSS | Flexbox

    CSS
    1
    1
    18
    טוען פוסטים נוספים
    • מהישן לחדש
    • מהחדש לישן
    • הכי הרבה הצבעות
    תגובה
    • הגב כנושא
    התחבר בכדי לפרסם תגובה
    נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
    • מוטי אורן
      מוטי אורן מדריכים נערך לאחרונה על ידי

      מדריך הגדרת קונטיינר על ידי Flexbox

      במדריך הזה נעבור על קונטיינר של flex .flex זוהי דרך יחסית חדשה לפריסת אלמנטים שונים באתר, אם אני לא טועה זה נוסף רק ב – CSS3. בכל מקרה, זו דרך מומלצת ונוחה מאוד לפריסת אתר. אז בואו נתחיל!

      בשביל להגדיר קונטיינר של flex, נשתמש ב – display: flex.

      לדוגמה, אם נרצה להגדיר div כקונטיינר, נגדיר אותו כך:

      div {
        display: flex;
      }
      

      לקונטיינר של flex קיימים מספר תכונות, נסקור אותם.

      flex-direction:

      התכונה flex-direction קובעת את הפריסה של המיכל, במאוזן או במאונך. ניתן לתת לה את הערכים: column – שמציין עמודה (מאונך), column-reverse – שמציין עמודה בכיוון ההפוך (מלמטה למעלה), row – שמציין שורה (מאוזן), ואחרון חביב row-reverse – שמציין שורה בכיוון ההפוך (מימין לשמאל).

      flex-wrap:

      התכונה קובעת מה קורה במצב שבו קיימים יותר מידי פריטים בקונטיינר. היא מקבלת את הערכים: wrap – שמשמעותו היא שבירת שורה (במקרה שיש יותר מדי ערכים השורה תתחלק לשתים או יותר), no-wrap – שמשמעותו היא לדחוף את הכול באותה שורה, wrap-reverse – שאומר לשבור את השורות כלפי מעלה (הפריטים בקונטיינר יתחילו מהשורה התחתונה).

      ניתן לקצר את שתי התכונות דלעיל על ידי התכונה flex-flow כך:

      div {
        display: flex;
        flex-flow: row wrap;
      }
      

      justify-content:

      התכונה הזאת קובעת את היישור של הפריטים באורך הקונטיינר, היא מקבלת את הערכים הבאים: center – יישור למרכז, flex-start – יישור לתחילת הקונטיינר (שמאל), flex-end – יישור לסוף הקונטיינר (ימין), space-around – ממקם את הפריטים במרחק שווה עם ריווחים ביניהם ובין תחילת הקונטיינר לפריטים שבתוכו, space-between – ממקם את הפריטים במרחק שווה ביניהם, ללא מרחק מתחילת הקונטיינר.

      align-items:

      התכונה קובעת את היישור של הפריטים בגובה הקונטיינר. היא מקבלת מספר ערכים: center – אמצע הגובה, flex-start – תחילת גובה הקונטיינר (למעלה), flex-end – סוף גובה הקונטיינר (למטה), stretch – מותח את הפריטים שהגובה שלהם יהיה מהתחלה עד הסוף.

      align-content:

      התכונה align-content קובעת את יישור השורות שבקונטיינר. הערכים: center – יישור השורות לאמצע, flex-start – יישור לתחילת הקונטיינר, flex-end – יישור לסוף הקונטיינר, stretch – מותח את השורות על כל הקונטיינר, space-around – ממקם את השורות במרחק שווה ביניהם ובין תחילת וסוף הקונטיינר, space-between – ממקם את השורות במרחק שווה ביניהם, ללא מרחק מתחילת הקונטיינר.

      במדריך הבא נדבר על הגדרת האלמנטים עצמם בתוך ה – flex-box. עד אז שיהיה בהצלחה!

      תגובה 1 תגובה אחרונה תגובה ציטוט 6
      • First post
        Last post