محاذاة الصناديق مع css باستخدام حاوية مرنة. كل ما تحتاج لمعرفته حول عناصر Flexbox Alignment Flex

وحدة ترميز Flexbox ( من English Flexible Box - كتلة مرنة) ، والتي هي حاليًا في المرحلة " توصية ممكنة»توحيد W3C ( توصية مرشح W3C) لتوفير طريقة أكثر فاعلية لترميز ومحاذاة وتوزيع المساحة بين العناصر في الحاوية ، حتى لو كان حجمها غير معروف و / أو تم تحديده ديناميكيًا ( لهذا السبب تم تسميته "مرن").

الفكرة الرئيسية وراء التنسيقات المرنة هي إعطاء الحاوية القدرة على تغيير ارتفاع / عرض (وترتيب) عناصرها لملء المساحة المتاحة على النحو الأمثل ( بشكل أساسي لدعم جميع أنواع وأحجام الشاشات).

تقوم الحاوية المرنة بتمديد العناصر لملء المساحة الخالية أو تقليص العناصر لمنعها من الخروج عن الحدود.

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

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

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

المفاهيم والمصطلحات الأساسية

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

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

بشكل أساسي ، سيتم وضع العناصر إما على طول المحور الرئيسي ( من نقطة البداية إلى النهاية الرئيسية) ، أو على طول المحور العرضي ( من نقطة البداية إلى النهاية المتقاطعة):

المحور الرئيسي هو المحور الرئيسي للحاوية المرنة التي توضع على طولها العناصر المرنة. كن حذرًا ، لا يجب أن يكون أفقيًا ، يعتمد موضعه على خاصية الاتجاه المرن (انظر أدناه) ؛
البداية الرئيسية | main-end - توجد العناصر المرنة داخل الحاوية ، بدءًا من نقطة البداية الرئيسية وتصل إلى نقطة النهاية الرئيسية ؛
الحجم الرئيسي هو عرض أو ارتفاع العنصر المرن ، اعتمادًا على الحجم الرئيسي. يمكن ضبط خاصية الحجم الرئيسية على العرض أو الارتفاع ؛
المحور المتقاطع - المحور المتقاطع العمودي على المحور الرئيسي. اتجاهها يعتمد على اتجاه المحور الرئيسي.
بداية متقاطعة | Cross-end - تمتلئ الخطوط المرنة بالعناصر وتوضع في الحاوية ، بدءًا من جانب البداية المتقاطعة باتجاه الجانب المتقاطع ؛
عبر الحجم - عرض أو ارتفاع العنصر المرن ، اعتمادًا على البعد المحدد. يمكن أن تحتوي الخاصية على قيمة إما عرض أو ارتفاع البعد العرضي.

خصائص فئة الوالدين (حاوية مرنة)

عرض

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

الحاوية (العرض: المرن ؛ / * أو inline-flex * /)

لاحظ أن أعمدة CSS ليس لها أي تأثير في الحاوية المرنة.

الاتجاه المرن

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

تخيل وضع العناصر المرنة بشكل أساسي في أعمدة أفقية أو رأسية:

حاوية (الاتجاه المرن: صف | عكس الصف | عمود | عكس العمود ؛)

صف (افتراضي): من اليسار إلى اليمين لـ ltr ؛ من اليمين إلى اليسار لـ rtl ؛
عكس الصف: من اليمين إلى اليسار لـ ltr ؛ من اليسار إلى اليمين لـ rtl ؛
العمود: نفس الصف ، ولكن من أعلى إلى أسفل ؛
عمود عكس: نفس عكس اتجاه ، ولكن من أسفل إلى أعلى.

التفاف المرن

بشكل افتراضي ، ستحاول العناصر المرنة الضغط في سطر واحد. يمكنك تغيير هذا ، ولف العناصر حسب الرغبة بهذه الخاصية. يلعب الاتجاه الذي توجد فيه الخطوط الجديدة دورًا أيضًا هنا:

حاوية (التفاف مرن: nowrap | التفاف | التفاف عكس ؛)

nowrap (افتراضي): سطر واحد / من اليسار إلى اليمين لـ ltr ؛ من اليمين إلى اليسار لـ rtl ؛
التفاف: متعدد الأسطر / من اليسار إلى اليمين من أجل ltr ؛ من اليمين إلى اليسار لـ rtl ؛
التفاف عكسي: متعدد الأسطر / من اليمين إلى اليسار لـ ltr ؛ من اليسار إلى اليمين لـ rtl.

التدفق المرن (ينطبق على والد الحاوية المرنة)

هذا شكل مختصر لخصائص الاتجاه المرن واللفافة المرنة ، والتي تحدد معًا المحاور الرئيسية والمتقاطعة للحاوية المرنة. الافتراضي هو صف الآنراب:

التدفق المرن:<‘flex-direction’> || <‘flex-wrap’>

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

تحدد هذه الخاصية المحاذاة على طول المحور الرئيسي. يساعد هذا في تخصيص مساحة حرة زائدة عندما تكون جميع العناصر المرنة في الصف غير مرنة أو مرنة ولكنها وصلت إلى الحد الأقصى لحجمها. تتيح لك هذه الخاصية أيضًا التحكم في محاذاة العناصر عندما تتجاوز حدود الخط:

حاوية (تبرير المحتوى: بداية مرنة | نهاية مرنة | مركز | مسافة بين | مسافة حول ؛)

بدء التشغيل المرن (افتراضي): تتم محاذاة العناصر مع بداية السطر ؛
نهاية مرنة: تتم محاذاة العناصر مع نهاية السطر
المركز: يتم محاذاة العناصر إلى مركز الخط ؛
المسافة بين: يتم توزيع العناصر بالتساوي في السطر: يقع العنصر الأول في بداية السطر ، والعنصر الأخير - في النهاية ؛
space-around: يتم تباعد العناصر بالتساوي على السطر بنفس التباعد.

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

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

حاوية (عناصر محاذاة: بداية مرنة | نهاية مرنة | مركز | خط أساسي | امتداد ؛)

البداية المرنة: تكون حدود عناصر البداية المتقاطعة على خط البداية المتقاطعة ؛
النهاية المرنة: تكون حدود عناصر البداية المتقاطعة على خط النهاية المتقاطعة ؛
المركز: تتركز العناصر على المحور المتقاطع ؛
خط الأساس: تتم محاذاة العناصر وفقًا لخط الأساس ؛
تمتد (افتراضي): تمتد العناصر لملء الحاوية ( النظر في قيم min-width / max-width).

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

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

ملاحظة: لن تعمل هذه الخاصية إذا كان هناك صف واحد فقط من العناصر المرنة:

البداية المرنة: يتم وضع الخطوط في بداية الحاوية ؛
نهاية مرنة: يتم وضع الخطوط في نهاية الحاوية ؛
المركز: يتم وضع الخطوط في منتصف الحاوية ؛
مسافة بين السطور متساوية ؛ السطر الأول في بداية الحاوية ، والأخير في النهاية ؛
space-around: تتباعد الخطوط بالتساوي على نفس المسافة من بعضها البعض ؛
تمتد (افتراضي): تمتد الخطوط لملء المساحة المتبقية.

خصائص الأطفال

(العناصر المرنة)

ترتيب

بشكل افتراضي ، يتم ترتيب العناصر المرنة بترتيب المصدر. ومع ذلك ، تتحكم خاصية Order في الترتيب الذي تظهر به العناصر في الحاوية المرنة:

البند (الطلب: ; }

ينمو المرن

تسمح هذه الخاصية للعنصر المرن "بالنمو" حسب الحاجة. يأخذ قيمة بلا أبعاد تعمل كنسبة. تحدد هذه القيمة مقدار المساحة المتاحة داخل الحاوية المرنة التي يمكن أن يشغلها العنصر.

إذا تم ضبط النمو المرن لجميع العناصر على 1 ، فسيتم تعيين كل عنصر فرعي على نفس الحجم داخل الحاوية. إذا قمت بتعيين أحد الأطفال على 2 ، فسيشغل ضعف مساحة الآخرين:

العنصر (نمو مرن: ؛ / * الافتراضي 0 * /)

فليكس يتقلص

تعمل هذه الخاصية على تقليص العناصر المرنة حسب الحاجة:

العنصر (المرن يتقلص: ؛ / * الافتراضي 1 * /)

غير مسموح بالأرقام السالبة.

أساس مرن

تحدد هذه الخاصية الحجم الافتراضي للعناصر قبل تخصيص المساحة المتبقية:

البند (أساس مرن: | تلقاءي؛ / * الإعدادات الافتراضية على تلقائي * /)

ثني

هذه الخاصية هي اختصار للجمع بين المرونة المرنة والتقلص المرن والأساس المرن. المعلمات الثانية والثالثة (Flex-shrink و Flex-base) اختيارية. القيم الافتراضية: 0 1 auto:

العنصر (المرن: لا شيء | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

محاذاة الذات

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

يمكن العثور على القيم المتاحة في وصف خاصية محاذاة العناصر:

لاحظ أن المحاذاة العائمة والواضحة والعمودية لا تعمل مع العناصر المرنة.

أمثلة على

لنبدأ بمثال بسيط للغاية ، وهو حل مشكلة شبه يومية: محاذاة مركزية مثالية. لا يمكن أن يكون استخدام Flexbox أسهل:

الأصل (العرض: المرن ؛ الارتفاع: 300 بكسل ؛ / * أو أيا كان * /). الطفل (العرض: 100 بكسل ؛ / * أو أيا كان * / الارتفاع: 100 بكسل ؛ / * أو أيا كان * / margin: auto ؛ / * Magic! * / )

يعتمد هذا المثال على حقيقة أن خاصية margin التي تم تعيينها على auto تستهلك مساحة إضافية. لذلك ، يؤدي هذا الإعداد للمسافة البادئة إلى محاذاة العنصر تمامًا في وسط كلا المحورين.

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

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

Flex-container (/ * قم أولاً بإنشاء سياق التخطيط المرن * / display: flex؛ / * ثم حدد اتجاه التدفق وإذا كنا نريد التفاف العناصر. * تذكر أن هذا هو نفسه: * flex-direction: row؛ * التفاف المرن: التفاف ؛ * / التدفق المرن: التفاف الصف ؛ / * الآن نحدد كيفية تخصيص المساحة المتبقية * / justify-content: space-around ؛)

مستعد! كل ما تبقى هو بالفعل مشكلة في التصميم. هنا عرض توضيحي لهذا المثال. اتبع الرابط وحاول تغيير حجم النافذة لترى ما يحدث:

لغة البرمجة:

CSS:

Flex-container (الحشوة: 0 ؛ الهامش: 0 ؛ نمط القائمة: لا شيء ؛ العرض: -webkit-box ؛ العرض: -moz-box ؛ العرض: -ms-flexbox ؛ العرض: -webkit-flex ؛ العرض: المرن ؛ -webkit-flex-flow: التفاف الصف ؛ justify-content: space-around ؛) عنصر المرن (الخلفية: الطماطم ؛ الحشو: 5 بكسل ؛ العرض: 200 بكسل ؛ الارتفاع: 150 بكسل ؛ الهامش العلوي: 10 بكسل ؛ ارتفاع الخط: 150 بكسل ؛ اللون: أبيض ؛ وزن الخط: غامق ؛ حجم الخط: 3em ؛ محاذاة النص: المركز ؛)

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

CSS:

/ * الشاشات الكبيرة * / .navigation (العرض: المرن ؛ التدفق المرن: التفاف الصف ؛ / * محاذاة العناصر بنهاية السطر على طول المحور الرئيسي * / justify-content: flex-end ؛) / * الشاشات المتوسطة * /media all and (max-width: 800px) (.navigation (/ * للشاشات المتوسطة ، نركز العناصر بالتساوي لتوزيع المساحة الخالية بينها * / justify-content: space-around ؛)) / * الشاشات الصغيرة * /media all and (max-width: 500px) (.navigation (/ * للشاشات الصغيرة ، نستخدم العمود الحكيم بدلاً من الصف الحكيم * / flex-direction: العمود ؛))

لغة البرمجة:

CSS:

التنقل (list-style: none؛ margin: 0؛ background: deepskyblue؛ display: -webkit-box؛ display: -moz-box؛ display: -ms-flexbox؛ display: -webkit-flex؛ display: flex؛ -webkit - التدفق المرن: التفاف الصف ؛ ضبط المحتوى: نهاية مرنة ؛) التنقل أ (زخرفة النص: لا شيء ؛ العرض: الكتلة ؛ الحشو: 1em ؛ اللون: أبيض ؛) الملاحة أ: التمرير (الخلفية: تعتيم ( deepskyblue ، 2٪) ؛)media all and (max-width: 800px) (.navigation (justify-content: space-around؛))media all and (max-width: 600px) (.navigation (-webkit- التدفق المرن: التفاف العمود ؛ التدفق المرن: التفاف العمود ؛ الحشو: 0 ؛) التنقل أ (محاذاة النص: المركز ؛ الحشو: 10 بكسل ؛ أعلى الحدود: 1 بكسل الصلبة rgba (255،255،255،0.3) ؛ الحد السفلي: 1px صلب rgba (0،0،0،0.1) ؛). Navigation li: الأخير من النوع a (الحد السفلي: لا شيء ؛))

دعونا نجربها بشكل أفضل من خلال اللعب "بمرونة" العناصر المرنة. ماذا عن تخطيط الجوال المكون من ثلاثة أعمدة برأس وتذييل كامل العرض؟ ومع إخراج العناصر بشكل مستقل عن الترتيب الذي قدمه الكود المصدري:

CSS:

غلاف (عرض: مرن ؛ تدفق مرن: التفاف صف ؛) / * اضبط كل العناصر على 100٪ عرض * / .header ، .main ، .nav ، .aside ، .footer (flex: 1100٪ ؛) / * In في هذه الحالة ، نعتمد على الترتيب الأصلي لاستهداف الأجهزة المحمولة: * 1. العنوان * 2. التنقل * 3. الهيكل * 4. الشريط الجانبي * 5. التذييل * / / * الشاشات المتوسطة * /media all و (min -width : 600 بكسل) (/ * كلا الشريطين الجانبيين على نفس السطر * /. جانبًا (المرن: 1 تلقائي ؛)) / * شاشات كبيرة * /media all و (min-width: 800px) (/ * عكس ترتيب العرض الشريط الجانبي الأول والجسم الرئيسي ، واطلب من العنصر الرئيسي أن يشغل ضعف مساحة الشريطين الجانبيين * / .main (المرن: 2 0px ؛) .aside-1 (الترتيب: 1 ؛). main (الترتيب : 2 ؛). جانب 2 (الترتيب: 3 ؛). مطلق النار (الترتيب: 4 ؛))

لغة البرمجة:

موطن بلانيسك morbi tristique senectus et netus et malesuada fames ac turpis egestas. الدهليز عذاب quam ، feugiat vitae ، ultricies eget ، tempor sit amet ، ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. موريس بليسيرات إلييفند ليو.

CSS:

غلاف (عرض: -صندوق ويب ؛ عرض: -صندوق-أوز ؛ عرض: -ms-flexbox ؛ عرض: -webkit-flex ؛ عرض: مرن ؛ -webkit-flex-flow: غلاف صف ؛ تدفق مرن: التفاف صف ؛ font-weight: bold؛ text-align: center؛) .wrapper> * (padding: 10px؛ flex: 1100٪؛). head (background: tomato؛) .footer (background: lightgreen؛). main (text - المحاذاة: يسار ؛ الخلفية: deepskyblue ؛). جانب 1 (الخلفية: ذهبي ؛). جانب 2 (الخلفية: hotpink ؛) @ media all و (الحد الأدنى للعرض: 600 بكسل) (. جانب (مرن: 1 تلقائي ؛ ))media all and (min-width: 800px) (. main (flex: 2 0px؛) .aside-1 (order: 1؛). main (order: 2؛) .aside-2 (order: 3؛ ) .footer (الترتيب: 4 ؛))

استخدام بادئات فليكس بوكس

يتطلب Flexbox أن تكون بادئات البائع مدعومة من قبل معظم المتصفحات. لا يشمل ذلك استخدام بادئات البائع قبل الخصائص فحسب ، بل يشمل استخدام أسماء وقيم خصائص مختلفة تمامًا.

هذا لأن مواصفات flexbox قد تطورت بمرور الوقت ، مما أدى إلى إنشاء إصدارات "قديمة" و "tweener" و "new".

ربما تكون أفضل طريقة للخروج من هذا الموقف هي كتابة التعليمات البرمجية باستخدام الصيغة الجديدة (والنهائية) وتشغيل CSS من خلال Autoprefixer ، والتي تتعامل مع التراجع بشكل جيد جدًا.

بدلاً من ذلك ، يوجد أدناه طريقة Sass @ mixin للمساعدة في بعض البادئات ، والتي تعطي أيضًا فكرة عن الإجراء الذي يجب اتخاذه:

SCSS:

mixin flexbox () (العرض: -webkit-box ؛ العرض: -moz-box ؛ العرض: -ms-flexbox ؛ العرض: -webkit-flex ؛ العرض: flex ؛) @ mixin flex (قيم $) (-webkit- box-flex: قيم $ ؛ -moz-box-flex: قيم $ ؛ -webkit-flex: قيم $ ؛ -ms-flex: قيم $ ؛ المرن: قيم $ ؛) ترتيب @ mixin ($ val) (-webkit- box-ordinal-group: $ val؛ -moz-box-ordinal-group: $ val؛ -ms-flex-order: $ val؛ -webkit-order: $ val؛ order: $ val؛) .wrapper (@ include flexbox () ؛) .item (include flex (1200 بكسل) ؛ @ تضمين الطلب (2) ؛)

دعم المتصفح

مقسمة حسب "إصدارات" فليكس بوكس إلى:

(جديد) - يعني دعمًا لأحدث بناء جملة من المواصفات (على سبيل المثال ، عرض: فليكس ؛
يسمح لك العنصر الزائف للون العنصر النائب (أو في بعض الحالات فئة زائفة) بتحديد محتوى النص لعنصر النموذج. يتم تعيينه باستخدام سمة العنصر النائب: .

المحتوى:

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

UPD من 02.02.2017:قدم ورقة غش سهلة الاستخدام من Flexbox ، مع عروض توضيحية مباشرة وأوصاف من المواصفات: ورقة الغش Flexbox.

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

وفقًا لموقع caniuse.com ، فليكس بوكسغير مدعوم من قبل IE 8 و 9 و Opera Mini ، وليست جميع الخصائص و / أو البادئات مطلوبة في المتصفحات الأخرى.

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

أولاً ، عليك أن تعرف أن العناصر المرنة موضوعة على طول المحاور. بشكل افتراضي ، يتم ترتيب العناصر أفقيًا - بطول المحور الرئيسي- المحور الرئيسي.

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

لنعد ساحة اختبار للتجارب:

كتلة أحد الوالدين (أصفر) و 5 أطفال.

العرض: فليكس

والآن أضف display: flex إلى العنصر الأصل ؛ ... تصطف عناصر div الداخلية (على طول المحور الرئيسي) في أعمدة من نفس الارتفاع ، بغض النظر عن المحتوى.

عرض: فليكس ؛ يجعل جميع الأطفال مرنين - مرنين ، وليس مضمنين أو ممتلئين كما كانوا في الأصل.

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

عرض خاصية فليكس بوكسيمكن أن تأخذ قيمتين:

المرن - يتصرف كعنصر كتلة. عند حساب عرض الكتل ، تكون الأولوية للتخطيط (إذا كان عرض الكتل غير كافٍ ، يمكن للمحتوى الزحف خارج الحدود).

inline-flex - يتصرف مثل inline-block. أولوية المحتوى (يوسع المحتوى الكتل إلى العرض المطلوب بحيث تتلاءم الخطوط قدر الإمكان).

الاتجاه المرن

يتم التحكم في اتجاه تخطيط الصناديق بواسطة خاصية flex-direction.

القيم الممكنة:

صف - صف (القيمة الافتراضية) ؛ عكس الصف - صف به عناصر بترتيب عكسي ؛ عمود - عمود ؛ عكس العمود - عمود به عناصر بترتيب عكسي.

صف وعكس الصف

العمود والعمود عكس

التفاف المرن

يمكن أن يكون هناك العديد من الكتل على سطر واحد. يتم تحديد ما إذا كانوا يلتفون أم لا بواسطة خاصية flex-wrap.

القيم الممكنة:

Nowrap - الكتل غير ملفوفة (افتراضي) ؛ التفاف - الكتل ملفوفة. التفاف عكسي - يتم لف الكتل ووضعها بترتيب عكسي.

لكتابة خصائص الاتجاه المرن واللفافة المرنة قريبًا ، هناك خاصية: التدفق المرن.

القيم المحتملة: يمكنك تعيين كلتا الخاصيتين أو واحدة فقط. على سبيل المثال:

التدفق المرن: العمود ؛ التدفق المرن: التفاف العكسي ؛ التدفق المرن: التفاف العمود العكسي ؛

عرض تجريبي للالتفاف عكس اتجاه الصف:

ترتيب

تُستخدم خاصية الأمر للتحكم في ترتيب الكتل.

القيم الممكنة: الأرقام. لوضع الكتلة أولاً ، حدد الترتيب: -1 إليها:

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

هناك العديد من الخصائص لمحاذاة العناصر: justify-content و align-items و align-self.

يتم تطبيق justify-content و align-items على الحاوية الرئيسية ، ومحاذاة الذات مع الأطفال.

تبرير المحتوى هو المسؤول عن التوافق مع المحور الرئيسي.

القيم الممكنة لضبط المحتوى:

بداية مرنة - تتم محاذاة العناصر من بداية المحور الرئيسي (افتراضي) ؛ نهاية مرنة - تتم محاذاة العناصر من نهاية المحور الرئيسي ؛ المركز - تتم محاذاة العناصر مع مركز المحور الرئيسي ؛ المسافة بين - يتم محاذاة العناصر على طول المحور الرئيسي ، وتوزيع المساحة الحرة فيما بينها ؛ space-around - تتم محاذاة العناصر على طول المحور الرئيسي ، وتوزيع المساحة الحرة حولها.

بداية مرنة ونهاية مرنة

مسافة بين ، مسافة

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

محاذاة العناصر هي المسؤولة عن محاذاة المحور العمودي.

القيم الممكنة لعناصر المحاذاة:

بداية مرنة - تتم محاذاة العناصر من بداية المحور العمودي ؛ نهاية مرنة - تتم محاذاة العناصر من نهاية المحور العمودي ؛ المركز - تتركز العناصر ؛ خط الأساس - تتم محاذاة العناصر مع خط الأساس ؛ تمتد - يتم شد العناصر لملء كل المساحة على طول المحور العمودي (افتراضي).

بداية مرنة ، نهاية مرنة

خط الأساس ، وتمتد

محاذاة الذات

تعد align-self مسؤولة أيضًا عن محاذاة المحور العمودي ، ولكنها مضبوطة على العناصر المرنة الفردية.

قيم المحاذاة الذاتية الممكنة:

التلقائي هو الافتراضي. يعني أن العنصر يستخدم عناصر المحاذاة للعنصر الأصل ؛ بداية مرنة - تتم محاذاة العنصر من بداية المحور العمودي ؛ نهاية مرنة - يتم محاذاة العنصر من نهاية المحور العمودي ؛ المركز - يتركز العنصر ؛ خط الأساس - يتم محاذاة العنصر إلى خط الأساس ؛ تمتد - يتم شد العنصر لملء الارتفاع بالكامل.

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

للتحكم في المحاذاة داخل حاوية مرنة متعددة الخطوط ، توجد خاصية محاذاة المحتوى.

القيم الممكنة:

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

بداية مرنة ، نهاية مرنة

المركز ، وتمتد

مسافة بين ، مسافة

ملاحظة:بعض الأشياء التي لم أتمكن من رؤيتها أثناء العمل ، على سبيل المثال ، التدفق المرن للخط: التفاف العمود أو السجل الكامل لنفس الاتجاه المرن: العمود ؛ التفاف المرن: التفاف. ...

العناصر مكدسة ولكن لا يتم نقلها:

لا ينطلق الغلاف عند الاتجاه المرن: العمود ؛ ، على الرغم من المواصفات تبدو كالتالي:

أعتقد أنه سيعمل بمرور الوقت.

UPD من 2014/06/21:يعمل كل شيء إذا أعطيت الكتلة ارتفاعًا. شكرا على الاكرامية

تهدف الوحدة النمطية Flexbox Layout (الصندوق المرن) إلى توفير طريقة أكثر فاعلية لتحديد المواقع ومحاذاة وتوزيع المساحة الخالية بين العناصر في الحاوية ، حتى عندما يكون حجمها غير معروف و / أو ديناميكي (ومن هنا جاءت كلمة "flex").

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

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

ملحوظة.يعد Flexbox أكثر ملاءمة لمكونات التطبيق والتخطيطات الصغيرة ، بينما يعد CSS Grid مناسبًا للتخطيطات الأكبر.

الأساسيات والمصطلحات

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

في حين أن نظام التخطيط التقليدي يعتمد على اتجاهات مربعة ومضمنة ، يعتمد Flexbox على "اتجاهات التدفق المرن". يرجى إلقاء نظرة على هذا الرقم من المواصفات لشرح الفكرة الأساسية وراء Flexbox.

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

دعم المتصفح

وحدة تخطيط الصندوق المرن CSS

Chrome لنظام Android

متصفح Blackberry ، بدءًا من الإصدار 10 ، يدعم البنية الجديدة.

خصائص الحاوية

خصائص العناصر

خصائص الوالدين (حاوية فليكس)

عرض

يحدد الحاوية المرنة ؛ السلسلة أو الكتلة تعتمد على القيمة التي تم تمريرها. يتضمن سياقًا مرنًا لجميع الأطفال المباشرين.

الحاوية (العرض: المرن ؛ / * أو inline-flex * /)

يرجى ملاحظة أن أعمدة CSS لا تؤثر على الحاوية المرنة.

الاتجاه المرن

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

حاوية (الاتجاه المرن: صف | عكس الصف | عمود | عكس العمود ؛)

صف (افتراضي)- من اليسار إلى اليمين في لتر ؛ من اليمين إلى اليسار في RTL ؛
صف عكس- من اليمين إلى اليسار في لتر ؛ من اليسار إلى اليمين في RTL ؛
عمودي- نفس الصف ، فقط من أعلى إلى أسفل ؛
العمود العكسي- نفس عكس اتجاه الصف ، فقط من أسفل إلى أعلى ؛

التفاف المرن

بشكل افتراضي ، ستحاول العناصر ملء سطر واحد فقط. يمكنك تغيير هذا السلوك والسماح للعناصر بالالتفاف إلى السطر التالي ، إذا لزم الأمر.

حاوية (التفاف مرن: nowrap | التفاف | التفاف عكس ؛)

Nowrap (افتراضي)- سيتم وضع جميع العناصر المرنة في سطر واحد ؛
لف- سيتم وضع العناصر المرنة على خطوط متعددة ، من أعلى إلى أسفل ؛
التفاف العكسي- سيتم وضع العناصر المرنة على خطوط متعددة ، من أسفل إلى أعلى ؛

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

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

حاوية (تبرير المحتوى: بداية مرنة | نهاية مرنة | مركز | مسافة بين | مسافة حول ؛)

بداية مرنة (افتراضي)- يتم الضغط على العناصر حتى بداية السطر ؛
نهاية مرنة- يتم الضغط على العناصر حتى نهاية السطر ؛
المركز- تتركز العناصر على طول الخط ؛
الفضاء بين- يتم وضع العناصر بالتساوي على الخط ؛ العنصر الأول في بداية السطر ، والعنصر الأخير في نهاية السطر ؛
حول الفضاء- توضع العناصر بالتساوي على خط مع وجود نفس المساحة حولها. لاحظ أن المساحة بصريًا ليست هي نفسها لأن جميع العناصر لها نفس المساحة على كلا الجانبين. سيكون للعنصر الأول وحدة مساحة واحدة على جانب الحاوية ، ولكن هناك وحدتان بينهما وبين العنصر التالي ، لأن العنصر التالي يحتوي أيضًا على وحدة واحدة على كلا الجانبين.

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

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

حاوية (عناصر محاذاة: بداية مرنة | نهاية مرنة | مركز | خط أساسي | امتداد ؛)

بداية مرنة -يتم وضع العناصر في بداية المحور العرضي ؛
نهاية مرنة -يتم وضع العناصر في نهاية المحور العرضي ؛
المركز -توجد العناصر في وسط المحور العرضي ؛
حدود- تتماشى العناصر مع خط الأساس ؛
امتداد (افتراضي)- تمتد لملء الحاوية بأكملها (مع مراعاة الحد الأدنى للعرض / الحد الأقصى للعرض) ؛

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

ملحوظة.هذه الخاصية ليس لها أي تأثير عندما يكون هناك صف واحد فقط من العناصر المرنة.

بداية مرنة- توجد الخطوط في بداية الحاوية ؛
نهاية مرنة- توجد خطوط في نهاية الحاوية ؛
المركز- توضع الخطوط في وسط الحاوية ؛
الفضاء بين- يتم توزيع الخطوط بالتساوي ، السطر الأول في بداية الحاوية ، والسطر الأخير في النهاية ؛
حول الفضاء- يتم توزيع الخطوط بالتساوي ، مع نفس المسافة بينهما ؛
امتداد (افتراضي)- تمتد الخطوط عبر العرض بالكامل لتحتل المساحة المتبقية ؛

خصائص للأطفال (العناصر المرنة)

ترتيب

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

البند (الطلب: ; }

ينمو المرن

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

إذا تم ضبط النمو المرن لجميع العناصر على 1 ، فسيتم توزيع المساحة الخالية داخل الحاوية بالتساوي بين جميع العناصر. إذا كانت قيمة أحد العناصر 2 ، فسيشغل العنصر ضعف مساحة العناصر الأخرى (على الأقل سيحاول).

العنصر (نمو مرن: ؛ / * الافتراضي 0 * /)

لا يمكن تحديد الأرقام السالبة.

أساس مرن

يحدد الحجم الافتراضي للعنصر ، قبل تخصيص المساحة المتبقية. يمكن أن يكون الطول (20٪ ، 5rem ، إلخ) أو كلمة أساسية. الكلمة الأساسية التلقائية تعني "تبدو مثل خاصية العرض أو الارتفاع الخاصة بي". تعني الكلمة الرئيسية للمحتوى "الحجم يعتمد على محتوى العنصر" - هذه الكلمة الرئيسية ليست مدعومة جيدًا حتى الآن ، لذلك من الصعب اختبارها ، بل ومن الصعب معرفة ما هو أشقائها من المحتوى الأدنى والمحتوى الأقصى والمحتوى المناسب يفعلون.

البند (أساس مرن: | تلقاءي؛ / * تلقائي تلقائي * /)

إذا تم التعيين على 0 ، فلن يتم حساب المساحة الإضافية حول المحتوى. إذا تم الضبط على تلقائي ، فسيتم تخصيص المساحة الإضافية بناءً على القيمة.

ثني

هذا هو اختصار لـ و. المعلمات الثانية والثالثة (Flex-shrink و Flex-base) اختيارية. الافتراضي هو 0 1 تلقائي.

العنصر (المرن: لا شيء | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

محاذاة الذات

تتيح لك هذه الخاصية تجاوز المحاذاة الافتراضية (أو مجموعة الخصائص) للعناصر المرنة الفردية.

يرجى الاطلاع على شرح الخاصية لفهم القيم المتاحة.

لاحظ أن المحاذاة العائمة والواضحة والعمودية ليس لها أي تأثير على العنصر المرن.

أمثلة على

لنبدأ بأبسط مثال يحل مشكلة تحدث كل يوم تقريبًا: التمركز المثالي. لا يمكن أن يكون الأمر أسهل إذا كنت تستخدم Flexbox.

الأصل (العرض: مرن ؛ الارتفاع: 300 بكسل ؛). الطفل (العرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ الهامش: تلقائي ؛)

يعتمد ذلك على الهامش التلقائي للحاوية المرنة الذي يمتص مساحة إضافية. وبالتالي ، فإن ضبط الهامش الرأسي على تلقائي على عنصر ما سيجعل العنصر متمركزًا بشكل مثالي على كلا المحورين.

الآن دعنا نستخدم بعض الخصائص الأخرى. ضع في اعتبارك قائمة من 6 عناصر ، تم إصلاحها جميعًا من الناحية الجمالية ، ولكن يمكن أن تكون تلقائية. نريد أن تكون المسافات بينها متساوية على طول المحور الأفقي وأن تكون على ما يرام عند تغيير حجم المتصفح (لا توجد استعلامات عن الوسائط!).

الحاوية المرنة (العرض: المرن ؛ التدفق المرن: التفاف الصف ؛ تبرير المحتوى: الفضاء حول ؛)

مستعد! كل شيء آخر هو مجرد عدد قليل من مشاكل التصميم. يوجد أدناه مثال على CodePen ، تأكد من الذهاب إلى هناك وحاول تغيير حجم النوافذ لمعرفة ما يحدث.

لنجرب شيئًا آخر. تخيل أن لدينا تنقلًا بمحاذاة اليمين في الجزء العلوي من الشاشة ، لكننا نريد أن يتم توسيطه على شاشات متوسطة الحجم وعمود واحد على الشاشات الصغيرة. سهل مثل الفطيرة.

التنقل (العرض: المرن ؛ التدفق المرن: التفاف الصف ؛ justify-content: flex-end ؛)media all و (max-width: 800px) (.navigation (justify-content: space-around؛))media all و (أقصى عرض: 500 بكسل) (. الملاحة (الاتجاه المرن: العمود ؛))

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

الغلاف (العرض: المرن ؛ التدفق المرن: التفاف الصف ؛) .header ، .main ، .nav ، .aside ، .footer (flex: 1100٪ ؛)media all and (min-width: 600px) (.aside (المرن: 1 تلقائي ؛)) @ media all and (min-width: 800px) (. main (flex: 2 0px؛) .aside-1 (order: 1؛). main (order: 2؛) .aside- 2 (الترتيب: 3 ؛) مطلق النار (الترتيب: 4 ؛))

الخصائص ذات الصلة

أخطاء

Flexbox بالتأكيد لا يخلو من أخطائه. أفضل مجموعة رأيتها تأتي من موقع Flexbugs لفيليب والتون وجريج ويتوورث. هذا مكان مفتوح المصدر لتتبع جميع الأخطاء ، لذلك أعتقد أنه من الأفضل نشر رابط فقط.

فليكس بوكس CSS (وحدة تخطيط الصندوق المرن)- وحدة تخطيط الحاوية المرنة - هي طريقة لترتيب العناصر ، بناءً على فكرة المحور.

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

تسمح لك وحدة flexbox بإنجاز المهام التالية:

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

يعالج Flexbox الاحتياجات المحددة لإنشاء تخطيطات أحادية البعد ، مثل شريط التنقل ، حيث لا يمكن وضع العناصر المرنة إلا على طول محور واحد.

للحصول على قائمة بمشكلات الوحدة الحالية والحلول عبر المستعرضات ، راجع مقالة فيليب والتون.

ما هو برنامج Flexbox

دعم المتصفح

بمعنى آخر: 11.0 ، 10.0 مللي ثانية
ثعلب النار: 28.0 ، 18.0 أوقية-
كروم: 29.0 ، 21.0 -كيت-
سفاري: 6.1-webkit-
أوبرا: 12.1 -webkit-
سفاري iOS: 7.0 -webkit-
أوبرا ميني: 8
متصفح Android: 4.4، 4.1 -webkit-
Chrome لنظام Android: 44

1. مفاهيم أساسية

أرز. 1. نموذج فليكس بوكس

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

المحور الرئيسي- المحور الذي توضع على طوله العناصر المرنة. يمتد في البعد الرئيسي.

البداية الرئيسية والنهاية الرئيسية- الخطوط التي تحدد جانبي البداية والنهاية للحاوية المرنة ، بالنسبة إلى العناصر المرنة (بدءًا من البداية الرئيسية حتى النهاية الرئيسية).

الحجم الرئيسي) - عرض أو ارتفاع الحاوية المرنة أو العناصر المرنة ، أيهما في البعد الأساسي ، يحدد الحجم الأساسي للحاوية المرنة أو العنصر المرن.

عبر المحور- محور عمودي على المحور الرئيسي. يمتد بشكل جانبي.

بداية متقاطعة ونهاية متقاطعة- الخطوط التي تحدد جانبي البداية والنهاية للمحور المتقاطع الذي يتم وضع العناصر المرنة حوله.

عبر الحجم- عرض أو ارتفاع الحاوية المرنة أو العناصر المرنة ، أيهما في البعد العرضي ، هو أبعادها العرضية.

أرز. 2. وضع الصف والعمود

2. حاوية مرنة

تقوم الحاوية المرنة بإعداد سياق تنسيق مرن جديد لمحتواها. الحاوية المرنة ليست حاوية كتلة ، لذلك لا تعمل خصائص CSS مثل المحاذاة الرأسية والعائمة والواضحة والعائمة مع العناصر الفرعية. أيضًا ، لا تتأثر الحاوية المرنة بخصائص العمود * * ، التي تنشئ أعمدة في النص والعناصر الزائفة :: السطر الأول و :: الحرف الأول.

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

Flex-container (/ * تنشئ حاوية مرنة على مستوى الكتلة * / display: -webkit-flex ؛ display: flex ؛). Flex-container (/ * تنشئ حاوية مرنة على مستوى الصف * / display: -webkit-inline- المرن ؛ العرض: مضمنة المرن ؛)

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

أرز. 3. محاذاة العناصر في نموذج flexbox

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

3. البنود المرنة

العناصر المرنة عبارة عن كتل تمثل محتويات حاوية مرنة في التدفق. تقوم الحاوية المرنة بإعداد سياق تنسيق جديد لمحتواها يوفر الميزات التالية:

بالنسبة للعناصر المرنة ، يتم تأمين قيمة خاصية العرض الخاصة بهم. قيمة العرض: مضمنة كتلة ؛ وعرض: خلية الجدول. تم تقييمها في العرض: كتلة ؛ ...
تختفي المسافة البيضاء بين العناصر: فهي لا تصبح عنصرًا مرنًا خاصًا بها ، حتى إذا تم تغليف النص بين العناصر في عنصر مرن مجهول. لا يمكن تصميم محتوى عنصر مرن مجهول خاص به ، ولكنه سيرثهم (مثل إعدادات الخط) من الحاوية المرنة.
لا يشارك العنصر المرن الذي تم وضعه بشكل مطلق في تخطيط التنسيق المرن.
لا تنهار حقول الهامش للعناصر المرنة المجاورة.
يتم حساب النسب المئوية للهامش والحشو من الحجم الداخلي للكتلة المحتوية.
الهامش: تلقائي ؛ توسيع ، واستيعاب مساحة إضافية في البعد المقابل. يمكن استخدامها لمحاذاة العناصر المرنة المجاورة أو توسيعها.
الحجم الأدنى التلقائي الافتراضي للعناصر المرنة هو الحجم الأدنى لمحتواها ، أي min-width: auto؛ ... بالنسبة لحاويات التمرير ، يكون الحجم الأدنى التلقائي عادةً صفرًا.

4. عرض ترتيب العناصر المرنة والتوجيه

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

4.1 اتجاه المحور الرئيسي: الاتجاه المرن

الخاصية خاصة بالحاوية المرنة. يتحكم في اتجاه المحور الرئيسي حيث يتم تكديس العناصر المرنة وفقًا لوضع الكتابة الحالي. غير موروث.

الاتجاه المرن
قيم:
صف	الافتراضي هو اليسار إلى اليمين (في rtl ، من اليمين إلى اليسار). يتم وضع العناصر المرنة على خط. تتوافق اتجاهات البداية الرئيسية والنهاية الرئيسية للمحور الرئيسي مع البداية المضمنة والنهاية المضمنة للمحور المضمن.
صف عكس	الاتجاه من اليمين إلى اليسار (في RTL من اليسار إلى اليمين). يتم وضع العناصر المرنة في خط بالنسبة للحافة اليمنى للحاوية (في RTL - اليسار).
عمودي	الاتجاه من أعلى إلى أسفل. يتم وضع العناصر المرنة في عمود.
العمود العكسي	عمود مع العناصر بترتيب عكسي ، من أسفل إلى أعلى.
مبدئي
يرث

أرز. 4. خاصية الاتجاه المرن للغات من اليسار إلى اليمين

بناء الجملة

Flex-container (display: -webkit-flex ؛ -webkit-flex-direction: row-reverse ؛ display: flex ؛ flex-direction: row-reverse ؛)

4.2 التحكم في الأسطر المتعددة للحاوية المرنة: التفاف مرن

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

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

أرز. 5. التحكم في خطوط متعددة باستخدام خاصية Flex-Wrap للغات LTR

بناء الجملة

حاوية مرنة (عرض: -مجموعة ويب مرنة ؛ -مجموعة ويب-التفاف مرن: التفاف ؛ عرض: مرن ؛ التفاف مرن: التفاف ؛)

4.3 اختصار للتوجيه ومتعدد الأسطر: التدفق المرن

تتيح لك الخاصية تحديد اتجاهات المحاور الرئيسية والمتقاطعة ، بالإضافة إلى القدرة على التفاف العناصر المرنة عبر خطوط متعددة ، إذا لزم الأمر. إنه اختصار لخصائص الاتجاه المرن واللف المرن. التدفق المرن الافتراضي: row nowrap ؛ ... الممتلكات ليست وراثية.

بناء الجملة

حاوية مرنة (العرض: -مجموعة ويب مرنة ؛ -مجموعة ويب-التدفق المرن: التفاف الصف ؛ العرض: مرن ؛ التدفق المرن: التفاف الصف ؛)

4.4 ترتيب عرض العناصر المرنة: ترتيب

تحدد الخاصية الترتيب الذي يتم به عرض العناصر المرنة ووضعها داخل الحاوية المرنة. ينطبق على العناصر المرنة. الخاصية ليست موروثة.

في البداية ، كل العناصر المرنة لها ترتيب: 0 ؛ ... إذا حددت قيمة بين -1 لعنصر ما ، فإنه ينتقل إلى بداية المخطط الزمني ، وقيمة 1 إلى النهاية. إذا كان للعديد من العناصر المرنة نفس قيمة الأمر ، فسيتم عرضها وفقًا لترتيبها الأصلي.

بناء الجملة

Flex-container (display: -webkit-flex؛ display: flex؛) .flex-item (-webkit-order: 1؛ order: 1؛)
أرز. 6. ترتيب عرض العناصر المرنة

5. مرونة العناصر المرنة

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

سيكون العنصر المرن غير مرن تمامًا إذا كانت قيم النمو المرن والتقلص المرن تساوي صفرًا ، والمرن بخلاف ذلك.

5.1 تحجيم مرن بخاصية واحدة: فليكس

الخاصية هي اختصار للخصائص المرنة ، والتقلص المرن ، والأساس المرن. القيمة الافتراضية: المرن: 0 1 تلقائي ؛ ... يمكنك تحديد قيمة خاصية واحدة أو جميعها. الخاصية ليست موروثة.

بناء الجملة

Flex-container (display: -webkit-flex؛ display: flex؛) .flex-item (-webkit-flex: 3 1100px؛ -ms-flex: 3 1100px؛ flex: 3 1100px؛)

5.2 معدل النمو: نمو مرن

تتحكم الخاصية في مقدار زيادة عنصر واحد مرن بالنسبة للعناصر المرنة الأخرى في حاوية مرنة عند تخصيص مساحة بيضاء موجبة. إذا كان مجموع قيم الزيادة المرنة للعناصر المرنة في صف أقل من 1 ، فإنها تشغل أقل من 100٪ من المساحة الحرة. الخاصية ليست موروثة.

أرز. 7. إدارة المساحة الخالية في شريط التنقل باستخدام Flex-Grow

بناء الجملة

Flex-container (display: -webkit-flex؛ display: flex؛). Flex-item (-webkit-flex-Grow: 3؛ flex-Grow: 3؛)

5.3 نسبة الانكماش: الانكماش المرن

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

أرز. 8. تضييق العناصر المرنة على التوالي

بناء الجملة

Flex-container (display: -webkit-flex؛ display: flex؛). Flex-item (-webkit-flex-shrink: 3؛ flex-shrink: 3؛)

5.4. حجم القاعدة: أساس مرن

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

بناء الجملة

Flex-container (display: -webkit-flex؛ display: flex؛) Flex-item (-webkit-flex-base: 100px؛ flex-base: 100px؛)

6. المحاذاة

6.1 محاذاة المحور الرئيسي: تبرير المحتوى

تقوم الخاصية بمحاذاة العناصر المرنة إلى المحور الرئيسي للحاوية المرنة عن طريق توزيع المساحة الخالية غير المشغولة بالعناصر المرنة. عندما يتم تحويل عنصر إلى حاوية مرنة ، يتم تجميع العناصر المرنة معًا بشكل افتراضي (ما لم يتم تعيين هامش لها). تتم إضافة التباعد بعد حساب قيم الهامش والزيادة المرنة. إذا كانت أي عناصر بها نمو مرن أو هامش غير صفري: auto؛ ، لن يكون للملكية أي تأثير. الخاصية ليست موروثة.


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

أرز. 9. محاذاة العناصر وتخصيص المساحة الحرة باستخدام خاصية ضبط المحتوى

بناء الجملة

Flex-container (display: -webkit-flex ؛ -webkit-justify-content: flex-start ؛ display: flex ؛ justify-content: flex-start ؛)

6.2 المحاذاة عبر المحاور: محاذاة العناصر والمحاذاة الذاتية

يمكن محاذاة العناصر المرنة مع المحور المتقاطع للصف الحالي للحاوية المرنة. تحدد محاذاة العناصر المحاذاة لجميع عناصر الحاوية المرنة ، بما في ذلك العناصر المرنة المجهولة. تسمح لك align-self بتجاوز هذه المحاذاة للعناصر المرنة الفردية. إذا كانت الهوامش العرضية للعنصر المرن تلقائية ، فلن يكون للمحاذاة الذاتية أي تأثير.

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

يحاذي العناصر المرنة ، بما في ذلك العناصر المرنة المجهولة ، على طول المحور المتقاطع. غير موروث.


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

أرز. 10. محاذاة العناصر في الحاوية عموديا

بناء الجملة

Flex-container (display: -webkit-flex ؛ -webkit-align-items: flex-start ؛ display: flex ؛ align-items: flex-start ؛)

6.2.2. محاذاة الذات

الخاصية مسؤولة عن محاذاة عنصر مرن واحد مع ارتفاع الحاوية المرنة. يتجاوز المحاذاة المحددة بواسطة محاذاة العناصر. غير موروث.


قيم:
تلقاءي	القيمة الافتراضية. يستخدم العنصر المرن المحاذاة المحددة في خاصية align-items للحاوية المرنة.
بداية مرنة	يتم وضع الحافة العلوية للعنصر المرن في نفس المستوى مع الخط المرن (أو التباعد ، مع مراعاة الهامش والحد المحددين للعنصر) عبر بداية المحور المتقاطع.
نهاية مرنة	يتم وضع الحافة السفلية للعنصر المرن في نفس المستوى مع الخط المرن (أو التباعد ، مع مراعاة الهامش والحد المحددين للعنصر) الذي يمر عبر نهاية المحور المتقاطع.
المركز	تتمركز هوامش العنصر المرن على المحور العرضي داخل الخط المرن.
حدود	يتم محاذاة العنصر المرن إلى الخط الأساسي.
تمتد	إذا كان تغيير حجم العنصر المرن تلقائيًا ولم يكن أي من الهوامش المتقاطعة تلقائيًا ، فسيتم تمديد العنصر. القيمة الافتراضية.
مبدئي	يضبط قيمة الخاصية على قيمتها الافتراضية.
يرث	يرث قيمة الخاصية من العنصر الأصل.

أرز. 11. قم بمحاذاة العناصر المرنة الفردية

بناء الجملة

Flex-container (display: -webkit-flex ؛ display: flex ؛) Flex-item (-webkit-align-self: center ؛ align-self: center ؛)

6.3 محاذاة صفوف الحاوية المرنة: محاذاة المحتوى

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


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

أرز. 12. محاذاة متعددة الخطوط للعناصر المرنة

بناء الجملة

Flex-container (العرض: -webkit-flex ؛ -webkit-flex-flow: لف الصفوف ؛ -webkit-align-content: flex-end ؛ العرض: المرن ؛ التدفق المرن: التفاف الصف ؛ محاذاة المحتوى: Flex-end ؛ الارتفاع: 100 بكسل ؛)

أحد الأسباب التي جعلت flexbox جذب اهتمام مطوري الويب بسرعة هو أنه جلب إمكانيات المحاذاة المناسبة للويب لأول مرة. لقد مكنت المحاذاة الرأسية المناسبة ، حتى نتمكن أخيرًا من توسيط المربع بسهولة. في هذا الدليل ، سوف نلقي نظرة شاملة على كيفية عمل خصائص المحاذاة والتبرير في Flexbox.

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

يمكنك إلقاء نظرة على رمز هذا المثال أدناه. غيّر حجم الحاوية أو العنصر المتداخل ويظل العنصر المتداخل دائمًا في المنتصف.

الخصائص التي تتحكم في المحاذاة

الخصائص التي سنلقي نظرة عليها في هذا الدليل هي كما يلي.

ضبط المحتوى - يتحكم في محاذاة كافة العناصر على المحور الرئيسي.
محاذاة العناصر - يتحكم في محاذاة جميع العناصر الموجودة على المحور العرضي.
محاذاة ذاتية - يتحكم في محاذاة عنصر مرن فردي على المحور المتقاطع.
محاذاة المحتوى - موصوفة في المواصفات "لتعبئة الخطوط المرنة" ؛ يتحكم في المسافة بين الخطوط المرنة على المحور المتقاطع.

سنكتشف أيضًا كيف يمكن استخدام هوامش السيارات للمحاذاة في flexbox.

ملحوظة: تم وضع خصائص المحاذاة في Flexbox في المواصفات الخاصة بها - CSS Box Alignment Level 3. من المتوقع أن تحل هذه المواصفات في النهاية محل الخصائص على النحو المحدد في Flexbox المستوى الأول.

المحور المتقاطع

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

نحن نستخدم محاذاة المحور العرضي في أبسط مثال مرن. إذا أضفنا display: flex إلى حاوية ، فإن العناصر الفرعية تصبح جميعها عناصر مرنة مرتبة في صف واحد. ستمتد جميعًا لتكون بطول أطول عنصر ، حيث أن هذا العنصر يحدد ارتفاع العناصر على المحور المتقاطع. إذا تم ضبط ارتفاع الحاوية المرنة ، فستمتد العناصر إلى هذا الارتفاع ، بغض النظر عن مقدار المحتوى الموجود في العنصر.

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

يمكننا استخدام قيم أخرى للتحكم في كيفية محاذاة العناصر:

محاذاة العناصر: بداية مرنة
محاذاة العناصر: نهاية مرنة
محاذاة العناصر: مركز
محاذاة العناصر: تمتد
محاذاة العناصر: خط الأساس

في المثال المباشر أدناه ، قيمة محاذاة العناصر هي امتداد. جرب القيم الأخرى وانظر كيف تتوافق جميع العناصر مع بعضها البعض في الحاوية المرنة.

محاذاة عنصر واحد مع محاذاة الذات

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

في هذا المثال الحي التالي ، تحتوي الحاوية المرنة على عناصر محاذاة: بداية مرنة ، مما يعني أن العناصر كلها محاذاة لبداية المحور المتقاطع. لقد استهدفت العنصر الأول باستخدام محدد الطفل الأول وقمت بتعيين هذا العنصر على align-self: stretch؛ تم تحديد عنصر آخر باستخدام صنفه المحدد والمحاذاة الذاتية: الوسط. يمكنك تغيير قيمة محاذاة العناصر أو تغيير قيم محاذاة الذات على العناصر الفردية لمعرفة كيفية عمل ذلك.

تغيير المحور الرئيسي

لقد نظرنا حتى الآن في السلوك عندما يكون الاتجاه المرن لدينا هو الصف ، وأثناء العمل بلغة مكتوبة من أعلى إلى أسفل. هذا يعني أن المحور الرئيسي يعمل على طول الصف أفقيًا ، وتحرك محاذاة المحور العرضي العناصر لأعلى ولأسفل.

إذا قمنا بتغيير اتجاهنا المرن إلى عمود ، فستعمل محاذاة العناصر والمحاذاة الذاتية على محاذاة العناصر إلى اليسار واليمين.

يمكنك تجربة ذلك في المثال أدناه ، والذي يحتوي على حاوية مرنة ذات اتجاه مرن: عمود ، ولكن بخلاف ذلك يكون هو نفسه تمامًا مثل المثال السابق.

محاذاة المحتوى على المحور العرضي - خاصية محاذاة المحتوى

لقد قمنا حتى الآن بمحاذاة العناصر ، أو عنصرًا فرديًا داخل المنطقة المحددة بواسطة الحاوية المرنة. إذا كان لديك حاوية مرنة ملفوفة متعددة الأسطر ، فقد ترغب أيضًا في استخدام خاصية محاذاة المحتوى للتحكم في توزيع المساحة بين الصفوف. في المواصفات ، يتم وصف هذا على أنه خطوط مرنة للتعبئة.

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

تأخذ خاصية محاذاة المحتوى القيم التالية:

محاذاة المحتوى: بداية مرنة
محاذاة المحتوى: نهاية مرنة
محاذاة المحتوى: مركز
محاذاة المحتوى: مسافة بين
محاذاة المحتوى: الفضاء حول
محاذاة المحتوى: تمتد
محاذاة المحتوى: مسافة متساوية (غير محددة في مواصفات Flexbox)

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

جرب القيم الأخرى لترى كيف تعمل خاصية محاذاة المحتوى.

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

ملحوظة: لم يتم تحديد قيمة space-evenly في مواصفات flexbox وهي إضافة لاحقة لمواصفات Box Alignment. دعم المستعرض لهذه القيمة ليس جيدًا مثل القيم المحددة في مواصفات flexbox.