הקופסה האולטימטיבי

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

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

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

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

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

בדרך כלל זה ידרוש צף בכיתה clearfix כדי לקבל כל מיושר כראוי.

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

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

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