جدول المحتويات:

ما هي حاوية Flexbox؟
ما هي حاوية Flexbox؟

فيديو: ما هي حاوية Flexbox؟

فيديو: ما هي حاوية Flexbox؟
فيديو: Learn CSS Flexbox Flex-wrap in 24 Seconds 2024, يمكن
Anonim

أ حاوية مرنة يوسع العناصر لملء المساحة الخالية المتاحة أو يتقلصها لمنع الفائض. الأهم من ذلك ، أن فليكس بوكس التخطيط حيادي الاتجاه على عكس التخطيطات العادية (كتلة قائمة على أساس عمودي ومضمنة وهي أفقية).

فيما يتعلق بهذا ، كيف تستخدم Flexbox؟

ملخص

  1. استخدام العرض: فليكس ؛ لإنشاء حاوية مرنة.
  2. استخدم ضبط المحتوى لتحديد المحاذاة الأفقية للعناصر.
  3. استخدم عناصر المحاذاة لتحديد المحاذاة الرأسية للعناصر.
  4. استخدم الاتجاه المرن إذا كنت بحاجة إلى أعمدة بدلاً من الصفوف.
  5. استخدم قيم عكس الصف أو العمود العكسي لعكس ترتيب العناصر.

كيف تصنع حاوية فليكس؟ قبل أن تتمكن من استخدام أي ملفات فليكس بوكس الخاصية ، تحتاج إلى تحديد ملف حاوية مرنة في تخطيطك. أنت إنشاء حاوية مرنة عن طريق تعيين خاصية العرض لعنصر ما على أحد فليكس بوكس قيم التخطيط: ثني أو مضمنة- ثني . بشكل افتراضي، ثني يتم وضع العناصر أفقيًا على المحور الرئيسي من اليسار إلى اليمين.

بهذه الطريقة ، ما هو استخدام Flexbox؟

فليكس بوكس هو نموذج تخطيط يسمح للعناصر بمحاذاة وتوزيع المساحة داخل الحاوية. باستخدام العروض والارتفاعات المرنة ، يمكن محاذاة العناصر لملء فراغ أو توزيع مسافة بين العناصر ، مما يجعلها أداة رائعة يسخدم من اجل أنظمة التصميم سريعة الاستجابة.

ما هو الاتجاه الافتراضي داخل حاوية Flex؟

ال إفتراضي الترتيب بعد تطبيق العرض: ثني هو ترتيب العناصر على طول المحور الرئيسي من اليسار إلى اليمين. يوضح الرسم المتحرك أدناه ما يحدث عندما ثني - اتجاه : يضاف العمود إلى وعاء عنصر. يمكنك أيضا ضبط المرن - اتجاه إلى عكس الصف والعكس العمود.

موصى به: