כיצד לרכז Div ב-CSS (Flexbox)
בנו פריסת CSS flexbox בצורה ויזואלית: כיוון-גמיש, יישר-תוכן, יישור-פריטים, עטיפה גמישה ורווח על המיכל, בתוספת גמישות-גידול לכל ילד, כיווץ גמיש ו-flex-base, הכל עם תצוגה מקדימה חיה ו-CSS הניתן להעתקה.
תוצאה
הנה התשובה הישירה לשאלה הנשאלת ביותר ב-CSS: כדי למרכז div, שים את התצוגה: flex, justify-content: center ו-align-items: center על האב שלו. זהו - שלוש הצהרות על המיכל, והילד יושב מרוכז בצורה מושלמת גם אופקית וגם אנכית בתוכו, בכל גודל. עמוד זה פותח את המחולל עם השילוב הזה בדיוק שהוחל, כך שהתצוגה המקדימה שלהלן מראה שהוא עובד על שלוש תיבות ממוספרות כעת.
לפני flexbox, מרכז div היה צריך פריצות: שוליים: 0 אוטומטי רק מרוכז אופקית ועבד רק על בלוק ברוחב קבוע; מרכוז אנכי פירושו מיקום: מוחלט עם שוליים שליליים או טריק טרנספורמציה, שניהם שבריריים ברגע שהתוכן השתנה. justify-content מטפל בציר הראשי ו-align-items מטפל בציר הצלב - יחד הם מתרכזים בשני הכיוונים ללא קשר לגובה או רחב הילד, וזו בדיוק הסיבה שהזוג הזה הפך לתשובה הסטנדרטית.
גרור כל פקד למטה וראה את שלוש תיבות התצוגה המקדימה נשארות ממוקדות כשהמכל משנה צורה, או מוסיפים פער ביניהן. כשהוא נראה נכון, העתק את בלוק ה-CSS בתחתית היישר לגיליון הסגנונות שלך - הוא פועל באותה צורה בכל דפדפן מודרני, אין צורך בספרייה.