فليكس بوكس

تخطيط الصندوق المرن في CSS ، والمعروف باسم Flexbox ، هو نموذج ^{لتخطيط مواقع الويب باستخدام} CSS . ^{[ 2 ]} وهو حاليًا في ^مرحلة التوصية المرشحة (CR) من قبل اتحاد شبكة الويب العالمية (W3C ). ^{[ 2 ]} يسمح تخطيط Flexbox بترتيب العناصر المتجاوبة داخل حاوية تلقائيًا وفقًا لحجم منفذ العرض (شاشة الجهاز).

تُكتب معظم صفحات الويب باستخدام مزيج من لغات HTML (لغة ترميز النص التشعبي) وجافا سكريبت و CSS (أوراق الأنماط المتتالية). باختصار، تحدد لغة HTML محتوى الصفحة وبنيتها المنطقية ، بينما تحدد لغة CSS مظهرها : ألوانها، وخطوطها، وتنسيقها، وتصميمها، وأسلوبها.

يُعد تخطيط CSS flex-box طريقة خاصة لتحديد تخطيط صفحات HTML.

من أبرز سمات تصميم فليكس قدرته على التكيف مع بيئة العرض. إذ يمكن تعديل حجم مربعات فليكس، إما بتصغيرها لتجنب احتكار المساحة، أو بتكبيرها لإفساح المجال للمحتوى داخل حدودها. علاوة على ذلك، يتميز تصميم فليكس بقلة القيود المفروضة على تدفق المحتوى مقارنةً بنماذج تصميم CSS الأخرى، التي عادةً ما تكون أحادية الاتجاه. ويمكن تحديد اتجاه تدفق المحتوى في فليكس يمينًا أو يسارًا أو لأعلى أو لأسفل. كما يمكن إعادة ترتيب العناصر الفردية داخل حاوية فليكس تلقائيًا لتناسب مساحة التصميم المتاحة. ^{[ 3 ]}

منذ أواخر العقد الأول من الألفية الثانية، حفّز الاستخدام المكثف للويب من قِبل تطبيقات الجوال ظهور "التصميمات المرنة" والعناصر المتجاوبة مع تزايد أحجام الشاشات . ^{[ 5 ]} وفي العقد الثاني من الألفية الثانية، ألهم الاستخدام المكثف لأطر عمل تصميم جافا سكريبت الشائعة ، مثل بوتستراب ، مواصفات تصميم CSS المرنة (flex-box) وتصميم الشبكة. ^{[ 6 ]}

تتضمن وحدات CSS حلولاً مشابهة، مثل Flexbox ^{[ 2 ]} و Grid ^{[ 7 ]} . يعتمد Flexbox في الأصل على ميزة مماثلة متوفرة في XUL ، وهي مجموعة أدوات واجهة المستخدم من Mozilla ، المستخدمة في Firefox ^{[ 6 ] [ 8 ]} .

اعتبارًا من ديسمبر 2022 99.68% من المتصفحات المثبتة (99.59% من متصفحات سطح المكتب و100% من متصفحات الجوال ) تدعم CSS Flexible Box Layout. ^{[ 9 ]}

ترتبط المصطلحات التالية بنموذج تخطيط فليكس بوكس.

حاوية مرنة

العنصر الأب الذي يحتوي على جميع العناصر المرنة. باستخدام خاصية العرض في CSS، يمكن تعريف الحاوية إما على أنها مرنة أو مرنة مضمنة.

عنصر مرن

يُعتبر أي عنصر فرعي مباشر موجود داخل حاوية مرنة عنصرًا مرنًا. أي نص داخل العنصر الحاوي يتم تغليفه بعنصر مرن غير معروف.

محاور

يحتوي كل صندوق مرن على محورين: المحور الرئيسي والمحور العرضي. المحور الرئيسي هو المحور الذي تتراصف عليه العناصر مع بعضها البعض. أما المحور العرضي فهو عمودي على المحور الرئيسي.

اتجاه الانحناء

يُحدد المحور الرئيسي. الوسائط الممكنة: صف (افتراضي)، عكس الصف، عمود، عكس العمود.

تبرير المحتوى

يُحدد هذا الخيار كيفية وضع المحتوى على المحور الرئيسي في السطر الحالي. الوسائط الاختيارية: يسار، يمين، وسط، مسافة بين العناصر، مسافة حولها.

محاذاة العناصر

يحدد الإعداد الافتراضي لكيفية وضع العناصر المرنة على المحور العرضي في كل سطر.

محاذاة المحتوى

يحدد الإعداد الافتراضي لكيفية محاذاة خطوط المحاور المتقاطعة.

محاذاة الذات

يحدد هذا الخيار كيفية وضع عنصر واحد على طول المحور العرضي. ويتجاوز هذا الخيار أي إعدادات افتراضية تم تعيينها بواسطة align-items.

يتطلب تحديد عنصر ما كعنصر مرن (flex) ضبط خاصية العرض (display) الخاصة بالعنصر في CSS إما على flex أو inline-flex، كما يلي:

العرض : مرن ؛

أو:

العرض : مضمن-مرن ؛

بتعيين خاصية العرض إلى إحدى القيمتين المذكورتين أعلاه، يصبح العنصر حاوية مرنة، وتصبح عناصره الفرعية عناصر مرنة. يؤدي تعيين خاصية العرض إلى "flex" إلى جعل الحاوية عنصرًا من مستوى الكتلة ، بينما يؤدي تعيين خاصية العرض إلى "inline-flex" إلى جعل الحاوية عنصرًا من مستوى السطر . ^{[ 4 ]}

.container { display : flex ; align-items : center ; justify -content : center ; }