כיצד להשתמש ב-Flex כדי להפוך את האתר שלך לרספונסיבי יותר

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

תכונות גמישות מסוימות כגון flex-wrap או flex-grow יכולים לשנות את הגודל או המיקום של אלמנט בצורה מושכת מבחינה ויזואלית. מאמר זה יעבור על דוגמאות כיצד ניתן להשתמש במאפיינים flex-grow, flex-shrink, flex-wrap, flex-flow והסדר flex.

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

אם אתה לא מכיר היסודות של flexbox, אתה יכול לחקור את זה קטע CodePen. הוא כולל קוד לדוגמה עבור הגדרה פשוטה של ​​flexbox. ראשית, תצטרך לעטוף את פריטי הילדים תחת div הורה או "מיכל גמיש".

<div class="הוֹרֶה">
<div class="פריט ילד"></div>
<div class="פריט ילד"></div>
<div class="פריט ילד"></div>
</div>

תוסיף את ה תצוגה: flex רכוש למחלקת האב.

.הוֹרֶה {
 תצוגה: flex;
}

איך לגדל פריטים בתוך מיכל

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

כדי להוסיף flex-grow, הוסף את המאפיין flex-grow CSS לכל אחד מפריטי הצאצא.

<div class="הוֹרֶה">
<סגנון div="צבע רקע: אדום; גמישות גדילה: 1"></div>
<סגנון div="צבע רקע: כתום; גמישות גדילה: 1"></div>
<סגנון div="צבע רקע: צהוב; גמישות גדילה: 1"></div>
<סגנון div="צבע רקע: ירוק; גמישות גדילה: 3"></div>
<סגנון div="צבע רקע: כחול; גמישות גדילה: 1"></div>
</div>

.הוֹרֶה {
 רוחב: 500 פיקסלים;
 תצוגה: flex; 
}

גידול גמיש של 0 עבור כל פריט אומר שהקופסאות לא יתרחבו כדי למלא את חלל ההורה שלהן. 0 הוא ערך ברירת המחדל עבור מאפיין זה.

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

אם לאחד מהפריטים היה גמישות גדולה יותר גדל, למשל:

<סגנון div="צבע רקע: ירוק; גמישות גדילה: 3"></div>

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

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

כיצד לכווץ פריטים בתוך מיכל

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

Flex-shrink מאפשר לך לציין יחס לכמה כל פריט צריך להתכווץ.

הוסף את המאפיין flex-shrink לפריטי div הצאצא. שנה את הרוחב של ההורה והילדים כך שהפריטים לא יכנסו למיכל.

<div class="הוֹרֶה">
<סגנון div="צבע רקע: אדום; כיווץ גמיש: 1"></div>
<סגנון div="צבע רקע: כתום; כיווץ גמיש: 1"></div>
<סגנון div="צבע רקע: צהוב; כיווץ גמיש: 1"></div>
<סגנון div="צבע רקע: ירוק; כיווץ גמיש: 2"></div>
<סגנון div="צבע רקע: כחול; כיווץ גמיש: 1"></div>
</div>

.הוֹרֶה {
 רוחב: 500 פיקסלים;
 תצוגה: flex; 
}
.הוֹרֶה div {
 רוחב: 150 פיקסלים;
 גובה: 150 פיקסלים;
}

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

אם לאחד מהפריטים היה כיווץ גמיש גדול יותר, לדוגמה:

<סגנון div="צבע רקע: ירוק; כיווץ גמיש: 2"></div>

הקופסה הירוקה תנסה להתכווץ פי שניים מהקופסאות האחרות.

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

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

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

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

flex-wrap: nowrap | לעטוף | לעטוף-הפוך

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

<div class="הוֹרֶה">
<div class="אָדוֹם"></div>
<div class="תפוז"></div>
<div class="צהוב"></div>
<div class="ירוק"></div>
<div class="כָּחוֹל"></div>
</div>

.הוֹרֶה {
 רוחב: 300 פיקסלים;
 גבול: 1px שחור מלא;
 תצוגה: flex;
 flex-wrap: לעטוף;
}
.הוֹרֶה div {
 רוחב: 100 פיקסלים;
 גובה: 100 פיקסלים;
}

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

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

אם אתה רוצה להסיר את המרווח הזה, אבל לשמור על גובה ה-div האב, השתמש במאפיין align-content. ציין את המאפיין align-content בתור "flex-start" ב-div האב:

.הוֹרֶה { 
 רוחב: 300 פיקסלים; 
 גובה: 300 פיקסלים;
 גבול: 1px שחור מלא; 
 תצוגה: flex;
 flex-wrap: לעטוף; 
 align-content: flex-הַתחָלָה;
}

המאפיין align-content הוא אחד מכמה ליבות מאפייני flexbox המאפשרים לך לשלוט ביישור.

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

כיצד לדחוף פריטים לעמודה הבאה

אם אתה משתמש בפריסה אחרת (כגון עמודה), ואתה עדיין צריך את האלמנטים כדי לעטוף, אתה יכול להשתמש ב- flex-flow תכונה. תכונת הגמישות הזו היא שילוב של מאפייני ה-flex-wrap ו-flex-direction.

שילובי אפשרויות לדוגמה שבהם אתה יכול להשתמש עבור המאפיין flex-flow כוללים:

flex-wrap: שורה nowrap | עמודה nowrap | גלישת שורה | גלישת עמודות | שורה גלישת-הפוך | גלישת עמודה-הפוך

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

.הוֹרֶה {
 רוחב: 300 פיקסלים; 
 גבול: 1px שחור מלא; 
 תצוגה: flex; 
 flex-flow: גלישת עמודות;
}
.הוֹרֶה div {
 רוחב: 100 פיקסלים;
 גובה: 100 פיקסלים;
}

הפריטים יעטפו בכיוון שצוין (שורה או עמודה).

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

כיצד לשנות את סדר הפריטים

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

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

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

<div class="הוֹרֶה">
<div class="אָדוֹם" סגנון="הזמנה: 2"></div>
<div class="תפוז" סגנון="הזמנה: 1"></div>
<div class="צהוב" סגנון="הזמנה: 5"></div>
<div class="ירוק" סגנון="הזמנה: 4"></div>
<div class="כָּחוֹל" סגנון="הזמנה: 3"></div>
</div>

במקרה זה, התיבה הכתומה תהיה מימין ביותר, ואחריה התיבות האדומות, הכחולה, הירוקה ולאחר מכן הצהובה.

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

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

אתה יכול להשתמש במאפייני הגמישות האלה כדי להפוך את האתר שלך לרספונסיבי יותר. זה כולל שימוש במאפייני flex-grow, flex-shrink, flex-wrap, flex-flow ו-ord flex.

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

כיצד להשתמש ב-Flex ליישור רכיבי HTML

קרא הבא

על הסופר