איך אני יוצר פריסת רשת ב-CSS?

2024 מְחַבֵּר: Lynn Donovan | [email protected]. שונה לאחרונה: 2024-01-18 08:24

בואו נסכם את ארבעת השלבים החיוניים:

1. לִיצוֹר רכיב מיכל, והכריז שהוא מוצג: רֶשֶׁת ;.
2. השתמש באותו מיכל כדי להגדיר את רֶשֶׁת מסלולים באמצעות ה רֶשֶׁת - תבנית -עמודות ו רֶשֶׁת - תבנית -שורות מאפיינים.
3. הצב אלמנטים צאצאים בתוך המיכל.
4. ציין את גדלי המרזבים באמצעות רֶשֶׁת -מאפייני פער.

מכאן, האם אני יכול להשתמש בפריסת רשת CSS?

מלבד Internet Explorer, פריסת רשת CSS אין קידומת ב-Safari, Chrome, Opera, Firefox ו-Edge. התמיכה בכל המאפיינים והערכים המפורטים במדריכים אלה ניתנת להפעלה הדדית בין דפדפנים. זה אומר שאם אתה כותב כמה פריסת רשת קוד ב-Firefox, זה אמור לעבוד באותו אופן ב-Chrome.

בנוסף, האם עלי להשתמש ב-Flexbox או ברשת? שניהם flexbox ו רֶשֶׁת מבוססים על תפיסה זו. Flexbox הוא הטוב ביותר לסידור אלמנטים בשורה בודדת או בעמודה אחת. רֶשֶׁת הוא הטוב ביותר לסידור אלמנטים במספר שורות ועמודות. המאפיין Justify-Content קובע כיצד החלל הנוסף של ה- לְהַגמִישׁ -מיכל מופץ ל- לְהַגמִישׁ -פריטים.

באופן דומה, מה זה 1fr?

1fr היא "יחידה חלקית" אחת, שהיא דרך לומר "החלל הנותר באלמנט".

מהי רשת Flexbox?

Flexbox מיועד לפריסות חד מימדיות ו רֶשֶׁת מיועד לפריסות דו מימדיות. זה אומר שאם אתה פורס פריטים בכיוון אחד (לדוגמה שלושה כפתורים בתוך כותרת), אז אתה צריך להשתמש Flexbox : זה ייתן לך יותר גמישות מאשר CSS רֶשֶׁת.