يوفر نظام التخطيط المرن CSS Flexbox طريقة فعالة لتوزيع المساحة ومحاذاة العناصر داخل الحاوية، حتى عندما تكون أبعادها غير معروفة أو ديناميكية. يتيح "مولد فليكس بوكس" إعداد حاوية مرنة وعناصرها باستخدام عناصر التحكم المرئية، وشاهد التفاعل المباشر للتخطيط، وانسخ CSS بنقرة واحدة. يساعد هذا الأسلوب التفاعلي المصممين والمطورين على فهم تأثير الخصائص المختلفة وتوليد الكود البرمجي اللازم لتخطيطات الويب المتنوعة بشكل فوري.
خصائص الحاوية المرنة وتأثيرها على التخطيط
تتحكم الحاوية المرنة (Flex Container) في التخطيط العام والمحاور التي تترتب وفقها العناصر. يوفر المولد عناصر تحكم لضبط هذه الخصائص الأساسية ومراقبة تأثيرها مباشرة:
- اتجاه (
flex-direction): يحدد المحور الرئيسي لترتيب العناصر. الخيارات المتاحة هي:- صف (
صف): ترتيب العناصر أفقياً من اليمين إلى اليسار أو العكس حسب اتجاه الصفحة. - عكس الصف (
عكس الصف): ترتيب العناصر أفقياً باتجاه معكوس. - عمود (
عمود): ترتيب العناصر رأسياً من الأعلى إلى الأسفل. - عكس العمود (
عكس العمود): ترتيب العناصر رأسياً باتجاه معكوس.
- صف (
- الالتفاف (
flex-wrap): يحدد ما إذا كانت العناصر ستجبر على البقاء في سطر واحد أو تلتف إلى أسطر متعددة.- لا التفاف (
لا التفاف): تظل جميع العناصر في سطر واحد حتى لو تسبب ذلك في خروجها عن حدود الحاوية أو انكماشها. - التفاف (
التفاف): تنتقل العناصر التي لا تتسع في السطر الحالي تلقائياً إلى سطر جديد. - التفاف عكسي (
التفاف عكسي): تلتف العناصر إلى أسطر جديدة ولكن باتجاه معكوس.
- لا التفاف (
- توزيع المحتوى (
justify-content): يحدد محاذاة العناصر على طول المحور الرئيسي. يتضمن خيارات مثل البداية (البداية)، نهاية (نهاية)، مركز (مركز)، مسافة بين العناصر (مسافة بين العناصر)، مسافة حول العناصر (مسافة حول العناصر)، ومسافات متساوية (مسافات متساوية). - محاذاة العناصر (
align-items): يحدد كيفية توزيع العناصر على طول المحور المتقاطع. الخيارات المتاحة هي البداية (البداية)، نهاية (نهاية)، مركز (مركز)، تمديد (تمديد)، وخط الأساس (خط الأساس). - محاذاة المحتوى (
align-content): يعمل هذا الخيار فقط عند تفعيل الالتفاف وظهور أسطر متعددة، حيث يحدد كيفية توزيع الأسطر ككل داخل الحاوية. الخيارات تشمل البداية (البداية)، نهاية (نهاية)، مركز (مركز)، تمديد (تمديد)، مسافة بين العناصر (مسافة بين العناصر)، مسافة حول العناصر (مسافة حول العناصر)، ومسافات متساوية (مسافات متساوية). - فجوة (
gap): قيمة عددية تحدد المسافة الفاصلة بين العناصر وبين الأسطر دون الحاجة لاستخدام الهوامش الخارجية.
خصائص العناصر المرنة الفردية
إلى جانب إعدادات الحاوية، يمكن التحكم في سلوك كل عنصر مرن (Flex Item) بشكل مستقل لتحديد كيفية نموه، انكماشه، وترتيبه. عند النقر على زر "إضافة عنصر" (إضافة عنصر)، يظهر عنصر جديد في المعاينة (مثل "عنصر 5"). تشتمل خصائص العناصر الفردية على:
- الترتيب (
order): قيمة عددية تغير الترتيب البصري للعنصر على الشاشة دون تعديل كود HTML الأساسي. - ينمو (
flex-grow): قيمة عددية تحدد مدى قدرة العنصر على التمدد لملء المساحة الفارغة المتبقية في الحاوية. - يتقلص (
flex-shrink): قيمة عددية تحدد مدى قابلية العنصر للانكماش عندما تكون مساحة الحاوية أصغر من الحجم الإجمالي للعناصر. - أساس (
flex-basis): يحدد الحجم الابتدائي للعنصر قبل توزيع المساحة المتبقية. يمكن تعيينه كقيمة عددية محددة أو ضبطه على أساس تلقائي (أساس تلقائي). - محاذاة العنصر (
align-self): تسمح بتجاوز خاصية المحاذاة العامة للحاوية (align-items) لعنصر واحد فقط. الخيارات المتاحة هي تلقائي (تلقائي)، البداية (البداية)، نهاية (نهاية)، مركز (مركز)، تمديد (تمديد)، وخط الأساس (خط الأساس).
توليد كود CSS والمعاينة المباشرة
يقدم المولد معاينة مرئية حية للتخطيط تتأثر فوراً بأي تغيير في عناصر التحكم. عند الوصول إلى النتيجة المطلوبة، يعرض قسم CSS كود التنسيق الجاهز للحاوية والعناصر.
لتجنب تضخيم الكود، لا يتم توليد قواعد CSS خاصة بالعناصر الفردية إلا إذا تم تغيير خصائصها الافتراضية. عند النقر على زر "نسخ CSS" (نسخ CSS)، تتغير حالة الزر إلى "تم النسخ" لتأكيد نسخ الكود إلى الحافظة بنجاح.
نماذج التخطيط الشائعة وتطبيقاتها
يسهل المولد بناء العديد من الهياكل الشائعة في تصميم الويب عبر الإعدادات المسبقة المتاحة:
- مركز (
مركز): محاذاة عنصر واحد بدقة في منتصف الحاوية أفقياً ورأسياً. - شريط التنقل (
شريط التنقل): توزيع روابط التنقل والشعار بشكل متوازن على طرفي الشاشة أو بمسافات متساوية. - كومة (
كومة): ترتيب العناصر عمودياً فوق بعضها البعض بمسافات ثابتة. - بطاقات (
بطاقات): عرض مجموعة من البطاقات التعريفية التي تلتف تلقائياً إلى أسطر جديدة وتتلاءم مع أحجام الشاشات المختلفة. - الشريط الجانبي (
الشريط الجانبي): إنشاء تخطيط يحتوي على محتوى رئيسي عريض بجانبه شريط جانبي ذو عرض ثابت أو مرن.
معالجة البيانات والخصوصية
تم تصميم تخطيطك مباشرةً في متصفحك. لا يتم تحميل أي شيء قمت بتعيينه هنا على BroBroGo.
الأسئلة الشائعة
ما الفرق بين justify-content و align-items؟
يقوم Justify-content بوضع العناصر على طول المحور الرئيسي — الاتجاه الذي يتدفق فيه الصف أو العمود — بينما يقوم align-items بوضعها عبر المحور الآخر. قم بتبديل الاتجاه من الصف إلى العمود وتبديل المحورين، لذلك justify-content يبدأ العمل من الأعلى إلى الأسفل و align-items من اليسار إلى اليمين.
كيف تعمل عناصر التحكم لكل عنصر؟
اختر عنصرًا حسب رقمه، ثم حدد مقدار نموه لملء المساحة المتاحة، ومقدار انكماشه عندما تضيق المساحة، وحجمه الابتدائي (basis)، ومحاذاته الخاصة على المحور المتقاطع. تنقل خاصية order العنصر إلى موضع أبكر أو لاحق على الشاشة من دون تعديل HTML. ولا تحصل على قاعدة CSS خاصة إلا العناصر التي تغيّرها بالفعل.
متى يكون الالتفاف وalign-content مهمين؟
عند إيقاف الالتفاف، تُجبر كل العناصر على البقاء في سطر واحد وقد تنكمش. وعند تشغيله، تنتقل العناصر التي لم تعد تتسع إلى السطر التالي — وهنا تبدأ align-content في توزيع السطور كمجموعة. تحدد gap المسافة بين العناصر وبين السطور من دون استخدام الهوامش.