أمثلة فليكس بوكس. التخطيط باستخدام CSS Flexbox

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

إنشاء أعمدة بنفس الارتفاع

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

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

.container (display: flex; /* تهيئة النموذج المرن */ /* هذه هي القيم الافتراضية، ولكن لا يزال بإمكانك تغييرها */ flex-direction: Row; /* سيتم وضع العناصر الموجودة داخل الحاوية أفقيًا */ align -items : Stretch; /* سيتم تمديد العناصر الموجودة داخل الحاوية عبر ارتفاعها بالكامل */ )

إعادة ترتيب العناصر

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

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

.container(display: flex; ) /* أولوية الرقم التنازلي */ .blue( order: 3; ) .red( order: 2; ) .green( order: 1; )

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

التمركز الأفقي والرأسي

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

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

.container(display: flex; /* متمركز حول المحور الرئيسي */ justify-content: center; /* متمركز حول المحور الثانوي */ align-items: center; )

لرؤية هذا الحل عمليًا ومعرفة المزيد عنه، يمكنك الانتقال إلى ، الموجود في نفس الموضوع.

إنشاء شبكات سريعة الاستجابة

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

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

.container(display: flex;) /* فئات لكل عمود مع الحجم. */ .col-1( flex: 1; ) .col-2( flex: 2; ) @media (max-width: 800px)( .container( /* تحويل كائن أفقي إلى كائن رأسي. */ flex- الاتجاه: العمود ))

يمكنك رؤية تنوع هذه التقنية في التعليمات: أسهل طريقة للإنشاء.

إنشاء تذييل ثابت

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

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

html( height: 100%; ) body(display: flex; flex-direction: column; height: 100%; ) .main( /* سيملأ القسم الرئيسي كل المساحة الحرة المتوفرة في الصفحة التي لا يشغلها التذييل */ flex: 1 0 auto; ) footer( /* سيخصص التذييل المساحة التي يحتاجها تمامًا وليس بكسل أكثر */ flex: 0 0 auto; )

ستجد المزيد من المعلومات حول هذه التقنية في المقالة "".

خاتمة

تدعم معظم المتصفحات اليوم وضع التخطيط المرن، مما يعني أنه من الآمن أن نقول أن flexbox جاهز لمساعدة العديد من المطورين.

أتمنى أن تجد هذه المقالة مفيدة وتحسن من كفاءتك في CSS. حظ سعيد!

تحدد خاصية align-content نوع محاذاة الخطوط داخل الحاوية المرنة على طول المحور العرضي إذا كانت هناك مساحة خالية.

ينطبق على: حاوية مرنة.

القيمة الافتراضية: تمتد.

البداية المرنة تقع الخطوط في بداية المحور العرضي. كل سطر تالٍ يكون متسقًا مع السطر السابق. يتم وضع الصفوف المرنة بدءًا من نهاية المحور المتقاطع. كل سطر سابق يتدفق مع الذي يليه. مركز يتم وضع الخطوط في وسط الحاوية. المسافة بين الخطوط موزعة بالتساوي في الحاوية والمسافة بينهما هي نفسها. space-around تكون الخطوط متباعدة بالتساوي بحيث تكون المسافة بين خطين متجاورين هي نفسها. المساحة الفارغة قبل السطر الأول وبعد السطر الأخير تساوي نصف المسافة بين سطرين متجاورين. الفضاء بالتساوي يتم توزيع الصفوف بالتساوي. المسافة البيضاء قبل السطر الأول وبعد السطر الأخير هي نفس عرض الأسطر الأخرى. تمتد الخطوط تمتد بالتساوي لملء المساحة المتاحة.

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

ملاحظة: فقط الحاويات المرنة متعددة الخطوط لديها مساحة حرة في المحور المتقاطع لمحاذاة الخطوط، لأنه في الحاوية المرنة ذات الخط الواحد يمتد الخط الوحيد تلقائيًا لملء المساحة.

ينطبق على:حاويات مرنة.

أولي: تمتد.

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

يمكن أن يُطلق على Flexbox بحق محاولة ناجحة لحل مجموعة كبيرة من المشكلات عند إنشاء تخطيطات في CSS. ولكن قبل أن ننتقل إلى وصفها، دعونا نكتشف ما هو الخطأ في أساليب التخطيط التي نستخدمها الآن؟

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

حدث هذا بسبب تطور html وcss تطوريًا. في البداية، كانت صفحات الويب مثل الصفحات المفردة المستندات النصية، بعد ذلك بقليل، تم تقسيم الصفحة إلى كتل باستخدام الجداول، ثم أصبح من المألوف التنضيد باستخدام العوامات، وبعد الموت الرسمي لـ ie6، تمت إضافة التقنيات ذات الكتل المضمنة أيضًا. ونتيجة لذلك، ورثنا مزيجًا متفجرًا من كل هذه التقنيات المستخدمة لإنشاء تخطيطات لـ 99.9% من جميع صفحات الويب الموجودة.

تنظيم متعدد الخطوط للكتل داخل حاوية مرنة.

التفاف المرن

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

القيم المتاحة التفاف المرن:

• com.nowrap (القيمة الافتراضية): يتم ترتيب الكتل في سطر واحد من اليسار إلى اليمين (في rtl من اليمين إلى اليسار)
• التفاف: يتم ترتيب الكتل في عدة صفوف أفقية (إذا لم تكن مناسبة لصف واحد). يتبعون بعضهم البعض من اليسار إلى اليمين (في rtl من اليمين إلى اليسار)
• التفاف عكسي: نفس طَوّقولكن يتم ترتيب الكتل بالترتيب العكسي.

التدفق المرن هو اختصار مناسب للاتجاه المرن + الالتفاف المرن

في جوهره، يوفر التدفق المرن القدرة على وصف اتجاه المحور العرضي الرئيسي والمتعدد الخطوط في خاصية واحدة. التدفق المرن الافتراضي: الصف nowrap .

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

CSS

/* أي. ... */ .my-flex-block( flex-direcrion:column; flex-wrap: Wrap; ) /* هذا هو نفسه... */ .my-flex-block( flex-flow: column Wrap )

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

هناك أيضًا خاصية align-content، والتي تحدد كيفية محاذاة صفوف الكتل الناتجة رأسيًا وكيف ستقسم المساحة الكاملة للحاوية المرنة.

مهم:يعمل محاذاة المحتوى فقط في وضع الخطوط المتعددة (أي في حالة flex-wrap:wrap; أو flex-wrap:wrap-reverse;)

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

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

يجب تطبيق خصائص CSS flex-wrap وalign-content مباشرةً على الحاوية المرنة، وليس على أبنائها.

عرض توضيحي لخصائص متعددة الأسطر في flex

قواعد CSS للعناصر الفرعية للحاوية المرنة (الكتل المرنة)

flex-basis – الحجم الأساسي للكتلة المرنة الواحدة

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

flex-grow - "الجشع" لكتلة مرنة واحدة

يحدد حجم الكتلة المرنة الفردية التي يمكن أن تكون أكبر من العناصر المجاورة، إذا لزم الأمر. يقبل flex-grow قيمة بلا أبعاد (الافتراضي 0)

مثال 1:

• إذا كانت جميع الصناديق المرنة داخل الحاوية المرنة تحتوي على flex-grow:1، فستكون بنفس الحجم
• إذا كان لدى أحدهم نمو مرن: 2 فسيكون أكبر مرتين من الآخرين

مثال 2:

• إذا كانت جميع الصناديق المرنة داخل الحاوية المرنة تحتوي على flex-grow:3، فستكون بنفس الحجم
• إذا كان أحدهما يتمتع بنمو مرن: 12، فسيكون أكبر بأربع مرات من جميع الآخرين

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

الانكماش المرن - عامل "الانضغاط" لكتلة مرنة واحدة

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

flex – اختصار لخصائص النمو المرن والانكماش المرن والأساس المرن

فليكس: لا شيء | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

CSS

/* أي. ... */ .my-flex-block( flex-grow:12; flex-shrink:3; أساس المرن: 30em; ) /* هذا هو نفس... */ .my-flex-block( flex : 12 3 30 م)

عرض توضيحي للنمو المرن والانكماش المرن والأساس المرن

محاذاة ذاتية – محاذاة كتلة مرنة واحدة على طول المحور العرضي.

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

قيم المحاذاة الذاتية المتاحة (نفس الخيارات الخمسة لعناصر المحاذاة)

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

الترتيب - ترتيب كتلة مرنة واحدة داخل حاوية مرنة.

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

لا تحدد قيمة الطلب الموضع المطلق للعنصر في التسلسل. فهو يحدد وزن موضع العنصر.

لغة البرمجة

في هذه الحالة، ستتبع الكتل الواحدة تلو الأخرى على طول المحور الرئيسي بالترتيب التالي: item5، item1، item3، item4، item2

عرض توضيحي للمحاذاة الذاتية والنظام

الهامش: تلقائي عموديا. الاحلام تتحقق!

يمكنك أن تحب Flexbox على الأقل لأن المحاذاة الأفقية المألوفة عبر هامش: تلقائي تعمل هنا للقطاعات الرأسية أيضًا!

حاوية My-flex ( العرض: flex؛ الارتفاع: 300 بكسل؛ /* أو أي شيء */ ) .my-flex-block ( العرض: 100 بكسل؛ /* أو أي شيء */ الارتفاع: 100 بكسل؛ /* أو أي شيء * / هامش: auto; /* السحر! يتم توسيط الكتلة عموديًا وأفقيًا */ )

أشياء للذكرى

1. يجب ألا تستخدم flexbox عندما لا يكون ذلك ضروريًا.
2. لا يزال تحديد المناطق وتغيير ترتيب المحتوى في كثير من الحالات مفيدًا في الاعتماد على بنية الصفحة. فكر بالأمر مليا.
3. فهم flexbox ومعرفة الأساسيات. هذا يجعل تحقيق النتيجة المتوقعة أسهل بكثير.
4. لا تنسى الهوامش. يتم أخذها في الاعتبار عند ضبط محاذاة المحور. من المهم أيضًا أن تتذكر أن الهوامش في flexbox لا "تنهار" كما يحدث في التدفق الطبيعي.
5. لا يتم أخذ القيمة العائمة للكتل المرنة في الاعتبار وليس لها أي معنى. ربما يمكن استخدام هذا بطريقة أو بأخرى للتدهور اللطيف عند التبديل إلى flexbox.
6. يعتبر Flexbox مناسبًا جدًا لتخطيط مكونات الويب والأجزاء الفردية من صفحات الويب، لكنه لم يُظهر الجانب الأفضل عند تخطيط التخطيطات الأساسية (موضع المقالة، الرأس، التذييل، شريط التنقل، وما إلى ذلك). لا تزال هذه نقطة مثيرة للجدل، لكن هذه المقالة توضح أوجه القصور بشكل مقنع تمامًا xanthir.com/blog/b4580

أخيراً

أعتقد أن flexbox، بالطبع، لن يحل محل جميع أساليب التخطيط الأخرى، ولكن، بالطبع، في المستقبل القريب، سيحتل مكانة جيدة في حل عدد كبير من المهام. وبالطبع عليك أن تحاول العمل معه الآن. سيتم تخصيص إحدى المقالات التالية لـ أمثلة محددةالعمل مع التخطيط المرن. اشترك في الأخبار ؛)

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

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

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

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

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

فليكس بوكس

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

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

ملكيات
العرض: فليكس | مضمنة فليكس.

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

العرض: قيم أخرى | فليكس | مضمنة فليكس.

تذكر:

لا تعمل أعمدة CSS مع الحاوية المرنةلا تعمل التعويم والمسح والمحاذاة العمودية مع العناصر المرنة

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

ينطبق قبل العنصر الأصلي للحاوية المرنة.

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

الاتجاه المرن: صف | عكس الصف | العمود | عكس العمود

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

التفاف المرن

ينطبق قبل العنصر الأصلي للحاوية المرنة.

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

التفاف المرن: nowrap | التفاف | التفاف عكسي

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

التدفق المرن

ينطبق قبل العنصر الأصلي للحاوية المرنة.

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

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

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

ينطبق قبل العنصر الأصلي للحاوية المرنة.

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

ضبط المحتوى: البدء المرن | نهاية مرنة | مركز | مسافة بين | الفضاء حول

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

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

ينطبق قبل العنصر الأصلي للحاوية المرنة.

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

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

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

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

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

محاذاة المحتوى: البداية المرنة | نهاية مرنة | مركز | مسافة بين | الفضاء حول | تمتد

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

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

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

النظام 1

تنمو المرن

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

تنمو المرن (الافتراضي 0)

المرن يتقلص

ينطبق على العنصر الفرعي/العنصر المرن.

يحدد قدرة العنصر المرن على الانكماش عند الحاجة.

المرن يتقلص (الافتراضي 1)

لا يتم قبول الأرقام السالبة.
أساس مرن

ينطبق على العنصر الفرعي/العنصر المرن. يحدد الحجم الافتراضي للعنصر قبل تخصيص المساحة في الحاوية.

أساس مرن | تلقائي (تلقائي افتراضي)

ثني

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

فليكس: لا شيء | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]

محاذاة الذات

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

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

أمثلة
لنبدأ بـ جدًا جدًا مثال بسيط، يحدث كل يوم تقريبًا: تكون المحاذاة في المركز تمامًا.لا شيء يمكن أن يكون أسهل إذا كنت تستخدم flexbox.

الأصل ( العرض: flex؛ الارتفاع: 300 بكسل؛ ) .child ( العرض: 100 بكسل؛ / * مهما كان * / الارتفاع: 100 بكسل؛ / * مهما كان * / الهامش: تلقائي؛ / * سحر! * / )

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

الحاوية المرنة (
/ * أولاً، لنقم بإنشاء سياق مرن * /
العرض: فليكس؛

/* الآن دعونا نحدد اتجاه التدفق وما إذا كنا نريد العناصر
نقل إلى خط جديد
*تذكر أن هذا هو نفسه:
* الاتجاه المرن: الصف؛
* التفاف مرن: التفاف.
* /
التدفق المرن: التفاف الصف؛

/ * الآن دعونا نحدد كيفية توزيع المساحة * /
}

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

/ * شاشات كبيرة * /
.ملاحة(
العرض: فليكس؛
التدفق المرن: التفاف الصف؛
/* نقل العناصر إلى نهاية السطر على طول المحور الرئيسي * /
ضبط المحتوى: نهاية مرنة؛
}

الوسائط كلها و (العرض الأقصى: 800 بكسل) (
.ملاحة(
/* بالنسبة للشاشات المتوسطة، نقوم بتوسيط التنقل،
توزيع المساحة الحرة بالتساوي بين العناصر * /
ضبط المحتوى: الفضاء حول؛
}
}

/*شاشات صغيرة*/
الوسائط كلها و (العرض الأقصى: 500 بكسل) (
.ملاحة(
/ * على الشاشات الصغيرة، بدلاً من الصف، نقوم بترتيب العناصر في عمود * /
الاتجاه المرن: العمود؛
}
}

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

غلاف (
العرض: فليكس؛
التدفق المرن: التفاف الصف؛
}

/ * اضبط عرض كافة العناصر على 100% * /
.header، .main، .nav، .aside، .footer (
فليكس 1100%؛
}

/* في هذه الحالة نعتمد على الأمر الأصلي لإرشادنا
* أجهزة محمولة:
* 1 رأس
* 2 ملاحة
* 3 رئيسية
* 4 جانبا
* 5 تذييل
* /

/*شاشات متوسطة*/
الوسائط كلها و (الحد الأدنى للعرض: 600 بكسل) (
/ * يقع كلا الشريطين الجانبيين على نفس السطر * /
جانبا (فليكس: 1 تلقائي؛)
}

/ *شاشات كبيرة * /

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

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

تتيح لك وحدة flexbox حل المهام التالية:

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

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

قائمة المشاكل الحاليةالوحدات والحلول عبر المستعرضات الخاصة بها يمكنك قراءتها في مقالة فيليب والتون.

ما هو فليكس بوكس

دعم المتصفح

أي: 11.0، 10.0 -مللي ثانية-
ثعلب النار: 28.0، 18.0 -موز-
كروم: 29.0، 21.0 -webkit-
سفاري: 6.1 -مجموعة الويب-
الأوبرا: 12.1 -مجموعة الويب-
سفاري iOS: 7.0 -ويبكيت-
أوبرا ميني: 8
متصفح أندرويد: 4.4، 4.1 -ويبكيت-
كروم لأجهزة الأندرويد: 44

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

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

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

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

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

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

المحور المتقاطع- محور عمودي على المحور الرئيسي. يمتد في البعد العرضي.

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

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

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

2. الحاوية المرنة

تقوم الحاوية المرنة بتعيين سياق تنسيق مرن جديد لمحتواها. الحاوية المرنة ليست حاوية كتلة، لذا فإن خصائص CSS مثل float وclear وvertical-align لا تعمل مع العناصر الفرعية. أيضًا، لا تتأثر الحاوية المرنة بخصائص column-* التي تنشئ أعمدة في النص والعناصر الزائفة::first-line و::first-letter .

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

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

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

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

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

3. العناصر المرنة

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

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

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

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

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

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

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

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

بناء الجملة

الحاوية المرنة (العرض: -webkit-flex؛ -webkit-flex-direction: عكس الصف؛ العرض: flex؛ الاتجاه المرن: عكس الصف؛)

4.2. إدارة الحاوية المرنة متعددة الخطوط: flex-wrap

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

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

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

بناء الجملة

حاوية مرنة (العرض: -webkit-flex؛ -webkit-flex-wrap: التفاف؛ العرض: flex؛ flex-wrap: التفاف؛)

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

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

بناء الجملة

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

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

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

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

بناء الجملة

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

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

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

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

5.1. ضبط الأبعاد المرنة بخاصية واحدة: flex

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

بناء الجملة

الحاوية المرنة ( العرض: -webkit-flex؛ العرض: flex; ) .flex-item ( -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px;)

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

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

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

بناء الجملة

الحاوية المرنة ( العرض: -webkit-flex؛ العرض: flex؛ ) .flex-item ( -webkit-flex-grow: 3؛ flex-grow: 3؛)

5.3. نسبة الضغط: انكماش مرن

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

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

بناء الجملة

حاوية مرنة (عرض: -webkit-flex؛ عرض: flex؛) .flex-item (-webkit-flex-shrink: 3؛ ​​flex-shrink: 3؛)

5.4. الحجم الأساسي: أساس مرن

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

بناء الجملة

الحاوية المرنة ( العرض: -webkit-flex؛ العرض: flex; ) .flex-item ( -webkit-flex-basis: 100px; flex-basis: 100px;)

6. المحاذاة

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

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

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

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

بناء الجملة

الحاوية المرنة (العرض: -webkit-flex؛ -webkit-justify-content: flex-start؛ العرض: flex؛ ضبط المحتوى: flex-start؛)

6.2. محاذاة المحاور المتقاطعة: محاذاة العناصر والمحاذاة الذاتية

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

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

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

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

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

بناء الجملة

حاوية مرنة (عرض: -webkit-flex؛ -عناصر محاذاة webkit: flex-start؛ عرض: flex؛ محاذاة العناصر: flex-start؛)

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

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

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

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

بناء الجملة

الحاوية المرنة ( العرض: -webkit-flex؛ العرض: flex؛ ) .flex-item ( -webkit-align-self: center; align-self: center; )

6.3. محاذاة خطوط الحاوية المرنة: align-content

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

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

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

بناء الجملة

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