Editor X: הצמדה ומיקום של אלמנטים

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

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

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

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

המיקום המדויק של האלמנט מופיע ב-Position בחלונית העריכה שמימין ב-Editor.

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

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

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

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

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

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

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

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