تخطيطات معقدة باستخدام أمثلة flex css. ما هو فليكس بوكس؟ وصف لجميع خصائص CSS والمبادئ الأساسية والمزايا والعيوب
اقرأ أيضا
تعد Flexboxes مثالية لإنشاء تخطيطات مواقع الويب شائعة الاستخدام، مثل تخطيط "Holy Grail" المكون من ثلاثة أعمدة، حيث يجب أن تكون جميع الأعمدة بارتفاع كامل، بغض النظر عن محتواها. وفي الوقت نفسه، في مصدر الرمزيأتي المحتوى الرئيسي قبل التنقل، وفي الصفحة نفسها يأتي المحتوى الرئيسي بعد التنقل.
مثله.
قبل Flexbox، كان من الصعب جدًا تحقيق هذا التصميم دون استخدام بعض الاختراقات. كان على المطورين في كثير من الأحيان القيام بأشياء مثل إضافة علامات إضافية وتطبيق هوامش سلبية وحيل أخرى للتأكد من أن كل شيء سيصطف بشكل صحيح بغض النظر عن مقدار المحتوى أو حجم الشاشة. ولكن، كما يوضح المثال أعلاه، كل شيء يبدو أبسط بكثير على Flexbox.
فيما يلي ملخص للكود. في هذا المثال، نجعل العنصر #main عبارة عن حاوية مرنة، ونترك الرأس والتذييل كعناصر كتلة. بمعنى آخر، الجزء الأوسط فقط يصبح flexbox. إليك مقتطف يجعلها حاوية مرنة.
#main (العرض: مرن؛ الحد الأدنى للارتفاع: calc(100vh - 40vh);)
ما عليك سوى استخدام العرض: flex لإنشاء حاوية مرنة. لاحظ أننا قمنا أيضًا بتعيين الحد الأدنى للارتفاع باستخدام الدالة calc() وقمنا بتعيين #main على 100% من ارتفاع إطار العرض ناقصارتفاع الرأس والقاعدة (20vh لكل منهما). وهذا يضمن أن التخطيط سوف يملأ ارتفاع الشاشة بالكامل، حتى لو كان هناك القليل من المحتوى. ونتيجة لذلك، لن يرتفع التذييل مطلقًا ويترك مساحة فارغة أسفله إذا كان المحتوى يشغل أقل من ارتفاع الشاشة.
كان حساب الحد الأدنى للارتفاع أمرًا بسيطًا للغاية، نظرًا لأننا طبقنا حجم الصندوق: مربع الحدود على جميع العناصر. إذا لم نفعل ذلك، فسنحتاج إلى إضافة قيمة الحشو إلى المجموع لطرحها.
بعد تثبيت الحاوية المرنة، نتعامل مع العناصر المرنة.
#main > المادة ( flex: 1; ) #main > nav, #main > جانبا ( flex: 0 0 20vw; الخلفية: بيج; ) #main > nav ( الترتيب: -1; )
الخاصية flex هي اختصار لخصائص النمو المرن، والانكماش المرن، والأساس المرن. في الحالة الأولى، كتبنا قيمة واحدة فقط، لذلك تقوم flex بتعيين خاصية flex-grow. وفي الحالة الثانية، كتبنا القيم الثلاث لـ
تحدد خاصية align-content نوع محاذاة الخطوط داخل الحاوية المرنة على طول المحور العرضي إذا كانت هناك مساحة خالية.
ينطبق على: حاوية مرنة.
القيمة الافتراضية: تمتد.
البداية المرنة تقع الخطوط في بداية المحور العرضي. كل سطر تالٍ يكون متسقًا مع السطر السابق. يتم وضع الصفوف المرنة بدءًا من نهاية المحور المتقاطع. كل سطر سابق يتدفق مع الذي يليه. مركز يتم وضع الخطوط في وسط الحاوية. المسافة بين الخطوط موزعة بالتساوي في الحاوية والمسافة بينهما هي نفسها. space-around تكون الخطوط متباعدة بالتساوي بحيث تكون المسافة بين خطين متجاورين هي نفسها. المساحة الفارغة قبل السطر الأول وبعد السطر الأخير تساوي نصف المسافة بين سطرين متجاورين. الفضاء بالتساوي يتم توزيع الصفوف بالتساوي. المسافة البيضاء قبل السطر الأول وبعد السطر الأخير هي نفس عرض الأسطر الأخرى. تمتد الخطوط تمتد بالتساوي لملء المساحة المتاحة.
تعمل الخاصية align-content على محاذاة خطوط الحاوية المرنة داخل الحاوية المرنة عندما يكون هناك مساحة إضافية في المحور المتقاطع، على غرار كيفية محاذاة ضبط المحتوى للعناصر الفردية داخل المحور الرئيسي. لاحظ أن هذه الخاصية ليس لها أي تأثير على الحاوية المرنة ذات السطر الواحد. القيم لها المعاني التالية:
ملاحظة: فقط الحاويات المرنة متعددة الخطوط لديها مساحة حرة في المحور المتقاطع لمحاذاة الخطوط، لأنه في الحاوية المرنة ذات الخط الواحد يمتد الخط الوحيد تلقائيًا لملء المساحة.
ينطبق على:حاويات مرنة.
أولي: تمتد.
يتم تعبئة خطوط Flex-start في بداية الحاوية المرنة. يتم وضع حافة البداية المتقاطعة للخط الأول في الحاوية المرنة بشكل متساوٍ مع حافة البداية المتقاطعة للحاوية المرنة، ويتم وضع كل سطر لاحق بشكل متساوٍ مع السطر السابق. يتم تعبئة الخطوط المرنة في نهاية الحاوية المرنة. يتم وضع الحافة المتقاطعة للخط الأخير بشكل متساوٍ مع الحافة المتقاطعة للحاوية المرنة، ويتم وضع كل سطر سابق بشكل متساوٍ مع السطر التالي. يتم تعبئة الخطوط المركزية باتجاه مركز الحاوية المرنة. يتم وضع الخطوط الموجودة في الحاوية المرنة بشكل متساوي مع بعضها البعض ومحاذاتها في وسط الحاوية المرنة، مع وجود مسافة متساوية بين حافة محتوى البداية المتقاطعة للحاوية المرنة والخط الأول في الحاوية المرنة، وبين حافة المحتوى المتقاطعة للحاوية المرنة والخط الأخير في الحاوية المرنة. (إذا كانت المساحة الحرة المتبقية سالبة، فسوف تفيض الخطوط بالتساوي في كلا الاتجاهين.) يتم توزيع المسافة بين الخطوط بالتساوي في الحاوية المرنة. إذا كانت المساحة الحرة المتبقية سالبة، فستكون هذه القيمة مطابقة للبداية المرنة. بخلاف ذلك، يتم وضع حافة البداية المتقاطعة للسطر الأول في الحاوية المرنة بشكل متساوٍ مع حافة محتوى البداية المتقاطعة للحاوية المرنة، ويتم وضع الحافة المتقاطعة للسطر الأخير في الحاوية المرنة بشكل متساوٍ مع علامة التقاطع يتم توزيع حافة المحتوى النهائي للحاوية المرنة، ويتم توزيع الخطوط المتبقية في الحاوية المرنة بحيث يكون التباعد بين أي سطرين متجاورين هو نفسه. يتم توزيع الخطوط ذات المساحة المحيطة بالتساوي في الحاوية المرنة، مع وجود مسافات بنصف الحجم على كلا الطرفين. إذا كانت المساحة الحرة المتبقية سالبة، فهذه القيمة مطابقة للمركز. بخلاف ذلك، يتم توزيع الخطوط الموجودة في الحاوية المرنة بحيث يكون التباعد بين أي سطرين متجاورين هو نفسه، ويكون التباعد بين السطر الأول/الأخير وحواف الحاوية المرنة نصف حجم التباعد بين الخطوط المرنة. مساحة متساوية يتم توزيع الخطوط بالتساوي في الحاوية المرنة. إذا كانت المساحة الحرة المتبقية سالبة، فهذه القيمة مطابقة للمركز. وبخلاف ذلك، يتم توزيع الخطوط الموجودة في الحاوية المرنة بحيث تكون المسافة بين كل خط مرن هي نفسها. تمتد الخطوط الممتدة لتشغل المساحة المتبقية. إذا كانت المساحة الحرة المتبقية سالبة، فإن هذه القيمة مماثلة لقيمة البدء المرن. بخلاف ذلك، يتم تقسيم المساحة الحرة بالتساوي بين جميع الخطوط، مما يزيد من حجمها المتقاطع.
باستخدام مثال نموذج من مهمة اختبار حقيقية، سأوضح لك كيفية التخطيط وفقًا لذلك بيماستخدام flexbox. قد تسأل: "لماذا من الضروري التنضيد وفقًا لـ بيم + فليكس بوكس؟" هذا الشرط يأتي من صاحب العمل. اقتباس من بيان العمل: "حاول التنضيد بدون أطر (يفضل أن يكون ذلك على flexbox)، بسيط وواضح: تجنب الهياكل المرهقة والتعليمات البرمجية غير الضرورية، واستخدم المنهجية بيم."
جزء من تخطيط القسم مع النموذج
قواعد التخطيط الخاصة بي
- تقسيم التخطيط إلى أقسام منطقية
- ابدأ كل قسم بعلامة قسم
- أقسام منفصلة و CSSحكمت من بعضها البعض، سطر فارغ
- تعيين فئة لكل علامة
- اسم فئة الكتلة أو العنصر يجيب على السؤال - ما هذا?
- اسم التعديل يجيب على السؤال - أيّ?
ترميز HTML
أولاً، أقوم بعمل الترميز، وتحديد تداخل الكتل، ثم الخروج بأسماء الفئات. في الكود أدناه، لدينا علامتين مضمنتين - h2و مدخل. تمثل العلامات المضمنة صداعًا وسببًا للتوتر بالنسبة لمصممي التخطيط المبتدئين. لماذا؟ إنهم يتصرفون بشكل سيء للغاية - فهم يحاولون تناول العرض المتاح بالكامل، ولا يسمحون لك بتعيين لون الخلفية وأبعاد الكتلة بأكملها.
معلومات شخصية
ماذا يفعل مصمم التخطيط السيئ في هذه الحالة؟ يقوم بتغليف العناصر المضمنة في علامات الكتلة شعبةويعين كافة الخصائص الضرورية لعلامة المجمع. ترث العناصر المضمنة الفرعية هذه الخصائص. هل يستحق إثارة ضجة حول الكود الإضافي؟ ماذا سيفعل مصمم التخطيط المختص؟ سيعيد تعريف العنصر المضمن للحظر أو الحظر المضمّن CSSقواعد
العرض محجوب؛ // لعلامة الإدخال
العرض: كتلة مضمنة؛ // لعلامة h2
تداخل المنطق وأسماء الكتل
نرى قسمًا يحتوي على معلومات شخصية، لذلك نسمي فئة القسم - معلومات. يتكون القسم من ثلاثة عناصر فرعية:
أيقونة // اسم الفئة info__icon
العنوان // معلومات__العنوان
النموذج // info__form
النقطة هي في أسماء الطبقات بيم، يتكون من انتماء عنصر فرعي إلى أحد الوالدين. لا يمكن تسمية العنصر أيقونة. هذه ليست مجرد أيقونة، ولكنها أيقونة من القسم معلومات.
اندمجت الابنة والوالد في شخص واحد
حاجز info__form، لدينا قسم خاص - وهو متداخل في القسم معلومات، ولكن في نفس الوقت، يحتوي على حقول النموذج. اسم هذه الظاهرة هو التداخل متعدد المستويات. تحتوي الكتلة التي تحتوي على النموذج على وظيفة تغليف بحتة للمدخلات، بحيث يمكنك بسهولة تعيين الهوامش الخارجية. بعد كل شيء، تتصرف المدخلات ذات الأحرف الصغيرة مثل الأطفال (وهذا هو الحال)، ولا يطيعونها على الإطلاق. علاوة على ذلك، فإن المدخل الثاني أقصر من جميع المدخلات الأخرى ويختلف فقط في العرض.
قمنا بتعيين فئة واحدة لجميع المدخلات بنفس الخصائص، باستثناء العرض - info__input. بالنسبة للمدخلات العادية، قم بإضافة معدّل info__input_long، والإدخال القصير هو المعدل info__input_short. اسمحوا لي أن أذكركم أن المعدل بيم، يجب أن يجيب على السؤال - أيّ?
قواعد CSS للمعدلات
.info__input_long(العرض: 520 بكسل؛
}
معلومات__input_short(
العرض: 320 بكسل؛
}
كود CSS
في لغة البرمجةيقوم الترميز بإنشاء بنية تقريبية للموقع، في CSS، لقد قمنا بالفعل بوضع العناصر وفقًا للتخطيط. اليوم، لن نتطرق إلى المظهر، بل سنركز على موضع العناصر. يوجد في قسمنا حاويتان مرنتان. يجب أن أقول أن استخدام المرنات، عندما تكون جميع العناصر موجودة واحدة تلو الأخرى على الخط، أمر مشكوك فيه للغاية. المنفعة الوحيدة التي تم الحصول عليها هي الملكية تبرير المحتوى، بمحاذاة إلى الوسط، عناصر مرنة. أستطيع أن أقول دفاعاً عن نفسي أن فكرة المرنات لا معنى لها في سياق هذا القسم فقط. عادة ما يكون التخطيط الحقيقي للتخطيط أكثر تنوعًا.
معلومات (
العرض: فليكس؛
ضبط المحتوى: مركز؛
محاذاة العناصر: مركز؛
الاتجاه المرن: العمود؛
الهامش العلوي: 77 بكسل؛
الارتفاع: 100%؛
}
معلومات__النموذج(
العرض: فليكس؛
ضبط المحتوى: مركز؛
الاتجاه المرن: العمود؛
الارتفاع: 100%؛
الهامش العلوي: 50 بكسل؛
يمكن أن يُطلق على Flexbox بحق محاولة ناجحة لحل مجموعة كبيرة من المشكلات عند إنشاء تخطيطات في CSS. ولكن قبل أن ننتقل إلى وصفها، دعونا نكتشف ما هو الخطأ في أساليب التخطيط التي نستخدمها الآن؟
يعرف أي مصمم تخطيط عدة طرق لمحاذاة شيء ما عموديًا أو إنشاء تخطيط مكون من 3 أعمدة بعمود متوسط مطاطي. لكن دعونا نعترف بأن كل هذه الأساليب غريبة تمامًا، وتبدو وكأنها اختراق، وليست مناسبة في جميع الحالات، ومن الصعب فهمها ولا تعمل إذا لم يتم استيفاء بعض الشروط السحرية التي تطورت تاريخيًا.
حدث هذا بسبب تطور html وcss تطوريًا. في البداية، بدت صفحات الويب وكأنها مستندات نصية ذات ترابط واحد، وبعد ذلك بقليل، تم تقسيم الصفحة إلى كتل باستخدام الجداول، ثم أصبح من المألوف التخطيط باستخدام العوامات، وبعد الموت الرسمي لـ ie6، تم استخدام تقنيات الكتل المضمنة وأضاف أيضا. ونتيجة لذلك، ورثنا مزيجًا متفجرًا من كل هذه التقنيات المستخدمة لإنشاء تخطيطات لـ 99.9% من جميع صفحات الويب الموجودة.
تنظيم متعدد الخطوط للكتل داخل حاوية مرنة.
التفاف المرن
تم إنشاء جميع الأمثلة التي قدمناها أعلاه مع الأخذ بعين الاعتبار ترتيب الكتل ذات السطر الواحد (عمود واحد). يجب أن يقال أنه افتراضيًا، ستقوم الحاوية المرنة دائمًا بترتيب الكتل داخل نفسها في سطر واحد. ومع ذلك، تدعم المواصفات أيضًا الوضع متعدد الأسطر. خاصية flex-wrap في 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; /* السحر! يتم توسيط الكتلة عموديًا وأفقيًا */ )
أشياء للذكرى
- يجب ألا تستخدم flexbox عندما لا يكون ذلك ضروريًا.
- لا يزال تحديد المناطق وتغيير ترتيب المحتوى في كثير من الحالات مفيدًا لجعله يعتمد على بنية الصفحة. فكر بالأمر مليا.
- فهم flexbox ومعرفة الأساسيات. هذا يجعل تحقيق النتيجة المتوقعة أسهل بكثير.
- لا تنسى الهوامش. يتم أخذها في الاعتبار عند ضبط محاذاة المحور. من المهم أيضًا أن تتذكر أن الهوامش في flexbox لا "تنهار" كما يحدث في التدفق الطبيعي.
- لا يتم أخذ القيمة العائمة للكتل المرنة في الاعتبار وليس لها أي معنى. ربما يمكن استخدام هذا بطريقة ما للتدهور اللطيف عند التبديل إلى flexbox.
- يعتبر Flexbox مناسبًا جدًا لتخطيط مكونات الويب والأجزاء الفردية من صفحات الويب، لكنه لم يُظهر الجانب الأفضل عند تخطيط التخطيطات الأساسية (موضع المقالة، الرأس، التذييل، شريط التنقل، وما إلى ذلك). لا تزال هذه نقطة مثيرة للجدل، لكن هذه المقالة توضح أوجه القصور بشكل مقنع تمامًا xanthir.com/blog/b4580
أخيراً
أعتقد أن flexbox، بالطبع، لن يحل محل جميع أساليب التخطيط الأخرى، ولكن، بالطبع، في المستقبل القريب، سيحتل مكانة جيدة في حل عدد كبير من المهام. وبالطبع عليك أن تحاول العمل معه الآن. سيتم تخصيص إحدى المقالات التالية لـ أمثلة محددةالعمل مع التخطيط المرن. اشترك في الأخبار ؛)
لا شيء يقف على حاله، فالتقنيات والمعايير تتطور، وتظهر تقنيات وأساليب جديدة لتخطيط موقع الويب، على سبيل المثال، التخطيط بعناصر جدولية، والتي لم نأخذها في الاعتبار في أسباب موضوعيةتم استبداله بالتخطيط الذي يحتوي على عناصر عائمة.
تحتوي العديد من برامج تحرير الأكواد البرمجية على مكون إضافي مناسب للترميز السريع مدمج أو متاح للتنزيل بشكل افتراضي، Emmet، والذي يسمح لك بإجراء الترميز الأساسي لهذا المثال على النحو التالي: القسم> شعبة * 3> لوريم+ علامة التبويب (القيمة لوريمينشئ النص الذي يظهر في الصورة أدناه).
يرجى ملاحظة أنه بدون أي جهد خاص، حصلنا على أعمدة تخطيطنا بنفس الارتفاع بغض النظر عن محتواها، وهذا أمر رائع. عناصر
ليست عناصر مرنة بشكل افتراضي وتقع في التدفق ثالثعنصر
نتيجة مثالنا:
حاوية مرنة مضمنة
وبالقياس على عناصر الكتلة، يمكن أن تكون الحاويات المرنة مضمنة. دعونا نلقي نظرة على الفرق بين الحاويات المرنة المضمنة والحاويات المجمعة. في المثال السابق، نظرنا إلى استخدام حاوية على مستوى الكتلة، مثل عنصر عادي على مستوى الكتلة، فهو يشغل عرض الشاشة بالكامل، ويتصرف كعنصر عادي على مستوى الكتلة. أما الحاويات المرنة المضمنة فإنها تصبح عناصر مضمنة منتظمة، مع الحفاظ على مرونة العناصر.
في المثال التالي سننظر في هذا الاختلاف، حيث أن المثال السابق لن يكون مؤشرا، وذلك لأن العناصر المرنة الفرعية لم يتم تحديد حجمها بشكل صريح، ونتيجة لذلك، فإن الحاوية الخاصة بنا، سواء كانت مضمنة أو كتلة، سوف تتصرف بنفس الطريقة وسوف تشغل عرض الشاشة بالكامل.
في هذا المثال وضعنا اثنينأحرف صغيرة و اثنينكتلة الحاويات المرنة، ووضعنا داخلها خمسةعناصر
لإنشاء تخطيط مماثل بسرعة باستخدام ايميتاكتب ما يلي في المحرر: div.inline-flex*2>div*5 + Tab ، ونفس الشيء فقط مع فئة أخرى div.flex*2>div*5 + Tab .
ألق نظرة على نتيجة مثالنا، الفرق بين الحاويات المرنة المضمنة والحاويات المرنة يجب أن يكون واضحًا لك الآن. تتصرف الحاوية المضمنة كعنصر مضمن وتحتل العرض المطلوب فقط من خلال العناصر المرنة الفرعية الخاصة بها، في حين أن الحاوية المرنة ذات الكتلة، على الرغم من حجم العناصر المرنة التابعة لها، تشغل عرض الشاشة بالكامل.
نتيجة مثالنا:
أرز. 205 مثال على الفرق بين الحاويات المضمنة المرنة والحاويات المرنة.
اتجاه؟ أي اتجاه؟
يتم تشكيل اتجاه العناصر المرنة بناءً على موضع المحورين: المحور الرئيسيالحاوية المرنة و المحور العرضي، والذي يقع دائمًا عمودي على الرئيسي. المحور الرئيسي في الإتجاه لتر (عالمي سمة HTML dir ، أو خاصية اتجاه CSS مع القيمة ltr ) يتم وضعها من اليسار إلى اليمين، والتقاطع من أعلى إلى أسفل (هذه هي القيمة الافتراضية)، بالنسبة لقيمة rtl يتم عرضها في المرآة وفقًا لذلك.