כשאנו חושבים על פריסות, לעתים קרובות אנו חושבים על עיצובים ברמת הדף. עם זאת, לרכיבים קטנים יותר בדף יכולות להיות פריסות משלהם.
במצב אידיאלי, פריסות ברמת הרכיב יתאימו את עצמן באופן אוטומטי, ללא קשר למיקום שלהן בדף. יכולים להיות מצבים שבהם לא תדעו אם רכיב ימוקם בעמודת התוכן הראשית, בסרגל הצד או בשניהם. אם אתם לא יודעים בוודאות לאן רכיב יגיע, אתם צריכים לוודא שהוא יכול להתאים את עצמו לקונטיינר שלו.
תצוגת רשת
רשת CSS לא מיועדת רק לפריסות ברמת הדף. היא פועלת היטב גם עם הרכיבים ששוכנים בהם.
בדוגמה הזו, הרכיבים המדומה ::before ו-::after יוצרים קווים לקישוט בכל צד של הכותרת.
הכותרת עצמה היא מאגר של רשת.
האלמנטים הנפרדים מסודרים כך שהשורות תמיד ימלאו את השטח הזמין.
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
איך בודקים פריסות רשת בכלי הפיתוח ל-Chrome
Flexbox
כפי שהשם מרמז, flexbox מאפשר לכם להפוך את הרכיבים לגמישים. אתם יכולים להצהיר אילו רכיבים ברכיב שלכם צריכים להיות בגודל מינימלי או מקסימלי ולאפשר לרכיבים אחרים להתכוונן בהתאם.
בדוגמה הזו, התמונה תופסת רבע משטח האחסון הזמין והטקסט נכלל בשלושת הרבעונים האחרים. אבל התמונה לעולם לא תגדל מ-200 פיקסלים.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
איך בודקים פריסות של Flexbox בכלי הפיתוח ל-Chrome
שאילתות לגבי קונטיינר
מערכת Flexbox מאפשרת לך לעצב את התוכן החוצה. אפשר לציין את הפרמטרים של הרכיבים (עד כמה הם יהיו צרים יותר, מה יהיה הרוחב שלהם) ולאפשר לדפדפן להבין את ההטמעה הסופית.
אבל לרכיב עצמו אין כל מודעוּת להקשר. המערכת לא מזהה אם נעשה בו שימוש בתוכן הראשי או בסרגל הצד. לכן פריסות הרכיבים עלולות להיות מסובכות יותר מפריסות דף. כדי שניתן יהיה להחיל סגנונות רלוונטיים להקשר, הרכיבים שלך צריכים לדעת יותר מגודל אזור התצוגה שבו הם נמצאים.
בפריסות דף, אתם יודעים מה רוחב הקונטיינר, כי המאגר הוא אזור התצוגה של הדפדפן. שאילתות מדיה מדווחות על המידות של הקונטיינר ברמת הדף.
כדי לדווח על המאפיינים של קונטיינר כלשהו, משתמשים בשאילתות של קונטיינר.
כדי להתחיל, צריך להגדיר אילו רכיבים יפעלו כמאגרים.
main,
aside {
container-type: inline-size;
}
המשמעות היא שאתם רוצים להריץ שאילתות על המאפיין המוטבע. במסמכים באנגלית, זהו הציר האופקי. אתם עומדים לשנות סגנונות בהתאם לרוחב של המאגר.
אם רכיב נמצא בתוך אחד מהמאגרים האלה, אפשר להחיל סגנונות באופן די דומה לשאילתות מדיה.
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
אם אובייקט מדיה נמצא בתוך מאגר שקטן מ-25em,
הסגנונות של ה-flexbox לא מוחלים. התמונה והטקסט יופיעו מסודרים בצורה אנכית.
לעומת זאת, אם הרכיב שמכיל רחב יותר מ-25em, התמונה והטקסט יופיעו זה לצד זה.
שאילתות קונטיינרים מאפשרות לסגנן רכיבים באופן בלתי תלוי. הרוחב של אזור התצוגה כבר לא חשוב. אפשר לכתוב כללים על סמך הרוחב של הרכיב שמכיל.
שילוב שאילתות
אתם יכולים להשתמש בשאילתות מדיה לגבי פריסת הדף ובשאילתות קונטיינר לגבי הרכיבים בדף.
כאן המבנה הכולל של הדף כולל רכיב main ורכיב aside.
קיימים אובייקטי מדיה בשני הרכיבים.
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
שאילתת מדיה מחילה פריסת רשת על הרכיבים main ו-aside כשאזור התצוגה רחב יותר מ-45em.
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
הכלל של שאילתת הקונטיינר לגבי האובייקטים של המדיה נשאר ללא שינוי:
החלה של פריסת flexbox אופקית רק אם הרכיב שמכיל רחב יותר מ-25em.
שאילתות לגבי קונטיינרים משנות את כללי המשחק בפריסות מיקרו. הרכיבים יכולים לעמוד בפני עצמם, ללא קשר לאזור התצוגה של הדפדפן.
בחינת ההבנה
בחינת הידע שלכם על פריסות מיקרו.
גם Grid ו-flexbox שימושיים לפריסות מיקרו?
בעבר למדתם על פריסות מאקרו ברמת הדף. עכשיו אתם יודעים על פריסות מיקרו ברמת הרכיב. בשלב הבא, נתעמק באבני הבניין של התוכן. נסביר לך איך להפוך את התמונות לרספונסיביות. עכשיו נעבור על טיפוגרפיה רספונסיבית.