Editor X: בחירת גודל לאלמנטים

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

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

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

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

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

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

זהו בעצם הגודל של המסך (הדפדפן) שממנו הגולשים רואים את האתר.

יחידת המידה Vw היא הרוחב של המסך, כש-1Vw שווה ערך ל-1% מהרוחב של המסך. באותו האופן, אם תגדירו שהרוחב של האלמנט יהיה 100Vw, הוא יהיה בגודל של 100% מהמסך (רוחב מלא).

זהו בעצם הגודל של המסך (הדפדפן) שממנו הגולשים רואים את האתר. 

יחידת המידה Vh היא הגובה של המסך, כש-1Vh שווה ערך ל-1% מהגובה של המסך. באותו האופן, אם תגדירו שהגובה של האלמנט יהיה 100Vh, הוא יהיה בגודל של 100% מהמסך (אורך מלא).

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

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

Max Content היא יחידת מידה מתקדמת שמגדירה את הרוחב של האלמנט.אתם יכולים להשתמש בה לאלמנטים בטכנולוגיית Flexbox (לדוגמה, קונטיינרים, כלי הפריסה, רכיבי תוכן חוזר) ולחלקים אנכיים, אלמנטים של טקסט וכפתורים.

כשאתם מגדירים את הרוחב של האלמנט באמצעות יחידת המידה Max Content, הוא נקבע בעצם לפי הגודל של האלמנטים שנמצאים מתחתיו בהיררכיה — לא משנה כמה גדול התוכן או כמה מילים יש. האלמנט שבראש ההיררכיה מתאים את עצמו לגודל המקסימלי של התוכן באלמנטים שמתחתיו.