أنشئ تخطيطات CSS Flexbox و Grid بصريًا مع معاينة مباشرة. تحكم في خصائص الحاوية والعنصر، ثم انسخ CSS الجاهز للاستخدام.
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 8px;
/* all items use defaults */
يُعدّ كلٌّ من CSS Flexbox وCSS Grid نظامي التخطيط الرئيسيين في لغة CSS الحديثة. يتعامل Flexbox مع التخطيطات أحادية البُعد - صفوف أو أعمدة - وهو مثالي لأشرطة التنقل، وأشرطة الأدوات، ومحاذاة المكونات. أما CSS Grid فيتعامل مع التخطيطات ثنائية البُعد التي تتضمن صفوفًا وأعمدة في آنٍ واحد، مما يجعله الأداة المناسبة لتخطيطات الصفحات، وشبكات البطاقات، وهياكل واجهة المستخدم المعقدة. يستخدم كلا النظامين نموذج الحاوية/العنصر: حيث تُحدد خصائص الحاوية التخطيط العام، بينما تتحكم خصائص العناصر الفردية في كيفية ملاءمتها داخلها.
يمكنك التبديل بين وضعَي Flexbox و Grid باستخدام علامات التبويب في الأعلى. اضبط خصائص الحاوية لتحديد اتجاه التخطيط العام، والتفاف العناصر، والمحاذاة، والمسافات. حدد عنصرًا بالنقر على رمزه المرقم أو بالنقر مباشرةً في المعاينة، ثم اضبط خصائصه الفردية. يتم تحديث المعاينة تلقائيًا عند تغيير القيم. انسخ كتل CSS الخاصة بالحاوية والعنصر والصقها في ملف أنماط CSS الخاص بك.
تُجمّع عناصر CSS المُخرَجة القيم المُعدّلة حسب فئة العنصر (.item-1، .item-2، إلخ). لا تُخرَج العناصر التي تستخدم الإعدادات الافتراضية للحاوية فقط، بل تُدرَج العناصر المُعدّلة فقط. في وضع الشبكة، تُستخدم الصيغة المختصرة span N لقيم امتداد العمود والصف. يُكتب قالب repeat() على النحو repeat(N, Xunit) للمسارات متساوية العرض. اضبط مُحدِّد الوحدة بين fr وpx و% ليناسب احتياجات تصميمك.