إنشاء تخطيطات Flexbox مثالية

تصور وتخصيص وإنشاء كود CSS flexbox باستخدام واجهة السحب والإفلات سهلة الاستخدام.

خصائص

خصائص

3 items

Preview

Item 1
Item 2
Item 3
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
رمز

الإعدادات

أفقيا ورأسيا

Content

مثالي لتوسيط شعار أو زر أو أي عنصر أفقيا ورأسيا.

التباعد

Item 1
Item 2
Item 3

قم بإنشاء تباعد متساو بين العناصر ذات المسافة بين أو المسافة المحيطة.

القائمة الرأسية قم

Home
About
Contact

بإنشاء قائمة تنقل عمودية مع تباعد ومحاذاة متسقة.

متجاوبة

Box 1
Box 2
Box 3
Box 4
Box 5

قم بإنشاء تخطيط شبكة سريع الاستجابة يلتف العناصر استنادا إلى المساحة المتوفرة.

لشعار

العنوان

مع عبارة تحث المستخدم على اتخاذ إجراء

صمم لافتة بطل مع العنوان والعنوان الفرعي وزر الحث على اتخاذ إجراء.

التذييل

Company

About Us

Careers

Support

مركز

مولد

Flexbox 2023 الولايات المتحدة©

قم ببناء تذييل سريع الاستجابة بأعمدة مكدسة على شاشات أصغر.

العالم الحقيقي

شريط

Logo
Home
Products
About
Contact

تخطيط شريط تنقل شائع مع شعار على اليسار وعناصر القائمة في المنتصف وأيقونة عربة التسوق على اليمين.

Card Grid

بطاقة عنوان

البطاقة هنا

البطاقة

نص وصف بطاقة

بطاقة عنوان

البطاقة هنا

شبكة بطاقة سريعة الاستجابة تتكيف مع أحجام الشاشة المختلفة باستخدام خصائص flexbox.

تخطيط المقالة

عنوان

نشر في 1 يناير 2023 · 5 دقائق قراءة

محتوى المقال هنا. قد يكون هذا ملخصا موجزا أو نص المقال الكامل. يساعد Flexbox في محاذاة الصورة والنص بطريقة جذابة بصريا.

تخطيط مقالة شائع مع صورة على اليسار ومحتوى نصي على اليمين ، مكدس على الأجهزة المحمولة.

لوحة المعلومات

Header
Sidebar
المحتوى
Footer

تخطيط لوحة معلومات مع الرأس والشريط الجانبي ومنطقة المحتوى الرئيسية والتذييل باستخدام flexbox لكل من المحاذاة الأفقية والرأسية.

Flexbox

ما هو Flexbox؟

الصندوق المرن ، المعروف باسم Flexbox ، هو نموذج تخطيط CSS3 يوفر طريقة فعالة لتوزيع ومحاذاة المساحة بين العناصر في الحاوية ، حتى عندما يكون حجمها غير معروف أو ديناميكي.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

المفاهيم الرئيسية:يقدم Flexbox مفهومين رئيسيين: العناصرللحاوية and the المرنةالمرنة. الحاوية هي العنصر الأصلي ، والعناصر هي أتباعها المباشرين.

المحور الرئيسي مقابل المحور

المتقاطع Flexbox على محورين: المحورmain axis and the المتقاطع.

  • المحور الرئيسي:المحور الأساسي الذي يتم على طوله وضع العناصر المرنة. محدد بواسطةflex-direction.
  • المحور المتقاطع:المحور العمودي على المحور الرئيسي. اتجاهه يعتمد على اتجاه المحور الرئيسي.
المحور الرئيسي →
المحور
Start
Main
End

خصائص

Property Description
display تحدد حاوية مرنة ؛ مضمنة أو كتلة اعتمادا على القيمة المحددة.
flex-direction يحدد المحور الرئيسي ، وبالتالي يحدد الاتجاه الذي يتم فيه وضع العناصر المرنة في الحاوية المرنة.
flex-wrap بشكل افتراضي ، ستحاول جميع العناصر المرنة الاحتواء في سطر واحد. يمكنك تغيير ذلك والسماح للعناصر بالتفاف حسب الحاجة باستخدام هذه الخاصية.
justify-content محاذاة العناصر المرنة على طول المحور الرئيسي للخط الحالي للحاوية المرنة.
align-items محاذاة العناصر المرنة على طول المحور المتقاطع للخط الحالي للخط الحالي حاوية فليكس.
align-content محاذاة خطوط الحاوية المرنة بالداخل عندما تكون هناك مساحة إضافية في المحور المتقاطع.

خصائص

Property Description
order بشكل افتراضي ، يتم وضع العناصر المرنة بترتيب المصدر. ومع ذلك، تتحكمorderالخاصية في الترتيب الذي تظهر به في الحاوية المرنة.
flex-grow يحدد قدرة العنصر المرن على النمو إذا لزم الأمر. يقبل قيمة بدون وحدة تعمل كنسبة.
flex-shrink يحدد قدرة العنصر المرن على الانكماش إذا لزم الأمر.
flex-basis يحدد الحجم الأولي للصنف المرن قبل توزيع أي مساحة متوفرة وفقا للعوامل المرنة.
align-self يسمح بتجاوز المحاذاة الافتراضية (أو المحاذاة المحددة بواسطةalign-items) للعناصر المرنة الفردية.

Related Tools

محول Stylus إلى CSS

تحويل كود SCSS إلى CSS. سريع وسهل وآمن.

محول Sass إلى CSS

حوّل كود Sass إلى CSS. بسرعة وسهولة وأمان.

إنشاء تحويلات CSS3 بسهولة

أداة قوية وسهلة الاستخدام لإنشاء تحويلات CSS3 معقدة دون الحاجة إلى كتابة كود. قم بتصور التغييرات في الوقت الفعلي وانسخ كود CSS الذي تم إنشاؤه لاستخدامه في مشاريعك.

حاسبة التجزئة SHA-224

أنشئ تجزئات SHA-224 بسرعة وسهولة

تحويل JSON إلى XML بسهولة

حوّل بيانات JSON إلى تنسيق XML منظم بنقرة واحدة. سريع وآمن ومستند بالكامل إلى المتصفح.

إنشاء تدرجات نصية CSS جميلة بسهولة

أنشئ تأثيرات نصية متدرجة مذهلة لموقعك الإلكتروني