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

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

כיצד להגדיר CSS Flex Display

מבנה לדוגמה שתוכל להשתמש בו כדי לחקור היסודות של flexbox הוא קבוצה של divs ילדים מתחת ל-div הורה יחיד. בקוד למטה, יש div "הורה" ראשי. שלושת divs הצאצא מייצגים פריטים שתוכל ליישר באמצעות מאפייני flex.

כדי שכל סטיילינג גמיש יעבוד, תצטרך להוסיף את תצוגה: flex נכס למיכל האב flex.

.parent {
 תצוגה: flex;
}

ללא גמישות, ה-divs הילד מוצגים בזה אחר זה בצורת עמודה במורד העמוד.

כדי להציג דוגמה של הגדרה זו, הצג והפעל את הקוד בזה קטע CodePen.

כיצד לשלוט בכיוון הפריסה

ה כיוון הגמיש המאפיין קובע את כיוון השורה או העמודה של פריטי הצאצא.

האפשרויות עבור מאפיין flex-direction כוללות:

flex-direction: שורה | עמודה | שורה-הפוך | עמודה הפוכה

יהיה עליך להוסיף מיכל אב המקיף את הפריטים שברצונך ליישר.

instagram viewer

HTML:

CSS:

.red { צבע רקע: אדום; }
.orange { צבע רקע: כתום; }
.yellow { רקע-צבע: צהוב; }
.green { רקע-צבע: ירוק;}
.blue { רקע-צבע: כחול; }
.purple { צבע רקע: סגול; }
.parent div {
 רוחב: 40px;
 גובה: 40 פיקסלים;
}

החל את המאפיין flex-direction על מיכל האב flex. פעולה זו תיישר את פריטי ה-div של הילד.

.parent {
 רוחב: 300 פיקסלים;
 תצוגה: flex; 
 flex-direction: שורה;
}

תכונות גמישות רבות מתייחסות למושג הציר הראשי והציר הצלב. כאשר flex-direction הוא שׁוּרָה, הציר הראשי מייצג את הכיוון האופקי, והציר הצלב מייצג את האנכי. ערך של עמודה מחליף את הצירים הללו.

הצג את הקוד של מאפיין ה-flex-direction בזה קטע CodePen לראות כמה דוגמאות.

כיצד ליישר פריטים לאורך הציר הצלב

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

האפשרויות עבור מאפיין align-items כוללות:

align-items: flex-start | flex-end | align-items | לִמְתוֹחַ

הוסף את המאפיין align-items למיכל האב כדי ליישר את הילדים שלו.

.parent {
 תצוגה: flex; 
 align-items: flex-start;
}

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

אתה יכול גם לבחור מהיכן מתחיל קו הבסיס, כגון העליון (קו הבסיס הראשון) או התחתון (קו הבסיס האחרון).

align-items: baseline | קו הבסיס הראשון | קו הבסיס האחרון;

עבור פריטים יישור: קו בסיס לעבודה, ודא שלכל פריט יש גובה או רוחב שונים (בהתאם לציר שבו אתה משתמש).

​​​

הצג את הקוד של מאפיין align-items בזה קטע CodePen לראות כמה דוגמאות.

כיצד לעקוף יישור על פריטים בודדים

אתה יכול להשתמש ב ליישר-עצמי מאפיין לעקוף כל סגנון יישור פריטים של המכולה האב. זה אומר שאתה יכול להגדיר יישור גמיש נפרד על פריט בודד.

האפשרויות למאפיין align-self כוללות:

align-self: אוטומטי | flex-start | flex-end | מרכז | קו בסיס | לִמְתוֹחַ

נניח למשל שלמכל האב יש סגנון flex-direction שהוגדר ל"שורה".

.parent {
 תצוגה: flex; 
 flex-direction: שורה;
}

אתה יכול להחיל את המאפיין align-self על הפריט הבודד. הפריט הבודד ישתמש בסגנון של מאפיין ה-align-self, וירכז את הפריט על פני מיכל האב.

הצג את הקוד של מאפיין align-self במסמך זה קטע CodePen לראות כמה דוגמאות.

כיצד לפזר קווים על פני הציר הצלב

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

האפשרויות עבור מאפיין align-content כוללות:

align-content: flex-start | flex-end | מרכז | למתוח | רווח-בין | חלל מסביב

הוסף את המאפיין align-content למיכל האב flex. המאפיין align-content יעבוד רק אם מאפיין flex-wrap מוגדר. הוסף flex-wrap: עטוף למיכל האב, והקטין את רוחב div האב כדי לאלץ את הפריטים על יותר משורה אחת.

.parent {
 flex-wrap: לעטוף;
 תצוגה: flex;
 align-content: flex-start;
 רוחב: 180 פיקסלים;
}

הצג את הקוד עבור מאפיין align-content במסמך זה קטע CodePen לראות כמה דוגמאות.

כיצד ליישר פריטים על הציר הראשי

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

האפשרויות עבור מאפיין הצדקה-תוכן כוללות:

להצדיק-תוכן: flex-start | flex-end | מרכז | רווח-בין | space-around | שטח באופן שווה

עטפו את הפריטים שברצונכם ליישר מתחת למיכל גמיש הורה.

HTML:

CSS:

.red { צבע רקע: אדום; }
.green { רקע-צבע: בהיר ירוק; }
.blue { רקע-צבע: כחול; }

הוסף את המאפיין justify-content למיכל האב flex.

.parent {
 רוחב: 300 פיקסלים;
 תצוגה: flex; 
 להצדיק-תוכן: flex-start;
}

המאפיין justify-content תומך גם בערכים המפורטים במפרט CSS Box Alignment. זה כולל ערכים כגון "התחלה", "סוף", "שמאל" ו"ימין". חלק מהדפדפנים אינם תומכים באלה.

למאפיין justify-content יש גם מילת מפתח "בטוחה" שבה אתה יכול להשתמש. זה מבטיח שהאלמנטים ינסו להישאר בטווח של מיכל האב.

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

.parent {
 תצוגה: flex; 
 להצדיק-תוכן: מרכז בטוח;
}

מילת המפתח הבטוחה מוגבלת גם לדפדפנים מסוימים. אתה יכול לבדוק תאימות ב אני יכול להשתמש.

הצג את הקוד של מאפיין Justify-Content כאן קטע CodePen לראות כמה דוגמאות.

כיצד להוסיף מרווחים בין פריטים

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

החל את מאפיין הפער על מיכל האב flex.

.parent {
 תצוגה: flex;
 פער: 70 פיקסלים;
}

אם תוסיף רווח שמאלץ את אורך הפריטים לחרוג מרוחב האב, הפריטים יתכווצו כדי לנסות ולהתאים בתוך השורה.

.parent { 
 רוחב: 300 פיקסלים;
 פער: 120 פיקסלים;
}

אם אתה משתמש ב-flex-wrap: לעטוף כדי לדחוף את הפריטים לשורה חדשה, כמות הפערים תחול גם על המרווח בין השורות.

.parent { 
 רוחב: 300 פיקסלים;
 flex-wrap: לעטוף;
 פער: 120 פיקסלים;
}

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

המאפיין row-gap קובע את הרווח בין כל שורה. המאפיין עמודה-פער קובע את הרווח בין כל עמודה.

.parent { 
 פער שורות: 120 פיקסלים; 
}
.parent { 
 פער עמודות: 120 פיקסלים; 
}

הצג את הקוד של מאפיין הפער בזה קטע CodePen לראות כמה דוגמאות.

שימוש במאפיינים גמישים נוספים באתר האינטרנט שלך

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

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

11 כלים שימושיים לבדיקה, ניקוי ואופטימיזציה של קובצי CSS

קרא הבא

לַחֲלוֹקצִיוּץלַחֲלוֹקאימייל

נושאים קשורים

  • תִכנוּת
  • CSS
  • עיצוב אתרים

על הסופר

שרלין פון דרהנן (6 מאמרים שפורסמו)

שרלין היא כותבת טכנולוגיה ב-MUO ועובדת גם במשרה מלאה בפיתוח תוכנה. יש לה תואר ראשון ב-IT ויש לה ניסיון קודם בהבטחת איכות ובהדרכה אוניברסיטאית. שרלין אוהבת לשחק ולנגן בפסנתר.

עוד מאת שרלין פון דרהנן

הירשם לניוזלטר שלנו

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

לחץ כאן כדי להירשם