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