تخطيط الويب الحديث مع Flexbox

دعني أقول هذا أولاً: فليكس بوكس ​​سهل. سواء كان ذلك بسبب مشكلات التبني المبكر ، أو لأننا تعلمنا التفكير من حيث العوامات والكتل ، فغالبًا ما أسمع من مصممي الويب أنهم يعتقدون أن Flexbox معقدة في التنفيذ. ولكن أكرر: فليكس بوكس ​​هو سهل.

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

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

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

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

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

ما هو flexbox ل؟

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

السبب في أنه غير مخصص لتخطيط الصفحات بالكامل ، هو أن flexbox يحتوي على وحدة نمطية مصاحبة CSS ، وحدة تخطيط الشبكة والتي تهدف للتخطيط. يعتبر تخطيط الشبكة هو الأسلوب الأنسب لتخطيطات الصفحات الكاملة. للأسف هناك دعم محدود للغاية للشبكة في الوقت الحالي ، وبواسطة "محدود" أعني "لا شيء". حتى الإصدار الأخير من Chrome يفشل في دعمه بدون علامات.

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

مكونات التصميم

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

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

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

دعم المتصفح

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

لحسن الحظ ، مع إضافة بعض بادئات المتصفح للمتصفحات القديمة ، يمكننا الآن الاعتماد عليها. بالنسبة الى caniuse.com ، من المستعرضات السائدة الحالية فقط IE9 سيقدم مشكلة بالنسبة لنا.

لحسن الحظ ، مثل كل CSS ، إذا فشل flexbox ، فإنه يفشل بصمت. بمعنى أن IE9 سوف يتجاهله فقط.

إصدارات Flexbox

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

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

تمامًا مثل بادئات المتصفح ، نكتب بناء جملة Flexbox من الأقدم إلى الأحدث ، بحيث يتجاهل أحدث بناء معتمد التراكيب القديمة.

على سبيل المثال ، نكتب العرض: فليكس مثل:

display:-webkit-box; /*old prefixed for webkit*/display:-moz-box; /*old prefixed for mozilla*/display:-ms-flexbox; /*inbetween prefixed for ie*/display:-webkit-flex; /*new prefixed for webkit*/display:flex; /*new*/

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

عندما يتعلق الأمر برمز الإنتاج ، استخدم سلسلة من توليفات Sass لتوسيع دعم flexbox للمتصفحات القديمة.

هناك ممتاز ساس mixin هنا ، والتي يمكنك استخدامها لمنع التلاعب بالنظام ، أو استخراج بناء الجملة القديم.

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

سر flexbox ، هو أنه ليس مربع على الإطلاق. حتى الآن ، استخدم كل التخطيط على الويب نظامًا كركزيًا لـ x و y ، لرسم نقاط. على النقيض من ذلك ، فليكس بوكس ​​هو ناقل.

يبدو رائعا ، أليس كذلك؟ Flexbox هو متجه ، مما يعني أننا نحدد الطول ونحدد الزاوية. يمكننا تغيير الزاوية ، دون التأثير على الطول ؛ ويمكننا تغيير الطول دون التأثير على الزاوية.

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

بمجرد فهمك لهذه المقاربة ، فإن الكثير من flexbox يتم إزالة الغموض.

كيفية استخدام حاويات flexbox

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

ابدء

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

انه صفحة HTML بسيطة ، مع منزل div ، يحتوي على خمس غرف divs لكل منها فئة تحدد وظيفتها ، المطبخ ، الحمام ، الصالة ، وغرفة النوم.

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

خلق مربع مرن

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

لإعلان المنزل كحاوية flexbox ، نستخدم الكود التالي:

.house {background:#FF5651;display:flex;}

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

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

سنستخدم الفضاء حول:

.house {background:#FF5651;display:flex;justify-content: space-around;}

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

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

.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}

كما ترون في هذا المثال ، غرفنا لا تزال متباعدة بالتساوي. على الرغم من أننا قمنا بتغيير الحجم. Flexbox رائع في تنظيم المحتوى.

تغيير الزاوية

كما ذكرنا أعلاه ، أحد الأسباب التي تجعل flexbox يعمل بشكل جيد للمصممين هو أنه يوصف بأنه ناقل. في الوقت الحاضر ، يدعم flexbox أربعة زوايا فقط: 0 و 90 و 180 و 270 درجة. لذلك من الأسهل التفكير في الأمر كمحور.

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

إذا قمنا بتغيير الاتجاه المرن إلى عمود ، سترى في هذا العرض أن الغرف وضعت الآن عموديا ، من أعلى إلى أسفل:

.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}

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

فليكس مقابل المرن

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

من أجل اللعب بشكل رائع مع نظام الإحداثيات القائم على الكارتسي في CSS ، يتم التعامل مع حاوية flexbox كعنصر مستوى كتلة.

كما هو الحال تمامًا : يشتمل العرض على عرض مصاحب : block-block ، بحيث يتم عرضه: عرض المرن : inline-flex.

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

المحاذاة عبر المحور

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

لكن فليكس بوكس ​​يسمح لنا بالتحكم في الموقع على طول المحور الثاني المقابل.

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

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

Kitchen
Washroom
Lounge
Bedroom
Bedroom

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

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

.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}

محاذاة العناصر: محاذاة بمركز مركزي ، إما عموديًا (إذا كان الاتجاه المرن: صف ، أو اتجاهًا مرنًا: عكس صف ) أو أفقيًا (إذا كان الاتجاه المرن: عمودًا ، أو اتجاهًا مرنًا: عكسي عمود ). وهنا عرض.

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

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

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

التفاف على خطوط متعددة

حتى الآن ، استخدمنا flexbox في تخطيط العناصر بحيث يتم تغيير حجمها عبر المساحة ، ولكن ماذا يحدث عندما يكون محتوى العناصر كبيرًا جدًا بحيث لا يتناسب مع سطر واحد؟

لتوضيح ذلك ، سأزيد حجم غرفتي:

Kitchen
Washroom
Lounge
Bedroom
Bedroom

من هنا كيف تبدو الآن.

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

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

.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}

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

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

باستخدام خصائص اختزال flexbox ل

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

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

flex-direction:row-reverse;flex-wrap:wrap;

يمكننا استخدام الاختزال:

flex-flow:row-reverse wrap;

المحاذاة عبر المحور (جزء 2)

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

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

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

.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}

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

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

وهنا عرض مع تعيين الخاصية إلى الفضاء حولها.

كيفية استخدام عناصر flexbox

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

لتوضيح ذلك ، دعنا نزيل بعض رموزنا:

Kitchen
Washroom
Lounge
Master Bedroom
Bedroom

من هنا كيف تبدو.

السيطرة على العناصر الفردية

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

الخاصية المرن هي اختصار لخصائص Flex-grow و flex-shrink و flex-basis . يتمثل دور هذه الخصائص في توسيع أو تصغير حجم المحتوى بحيث يملأ الفراغ تمامًا.

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

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

.room {background:#00AAF2;height:90px;flex-grow:1;}

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

.kitchen {height:300px;flex-grow:2;}

تعمل الانكماش المرن تمامًا كما تنمو الثمار إلا أنها تقلص العنصر إذا لزم الأمر ، بدلاً من توسيعه.

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

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

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

وهنا عرض ما يحدث عندما أقوم بتعيين أساس flex-basis: 0 على المثال أعلاه.

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

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

ترتيب القيم هو النمو المرن ، المرنة ، يتقلص ، أساس المرن. لذلك ، لتعيين قيمة نمو قدرها 2 ، وقيمة shrink 1 و a أساس 0 ، يمكنك استخدام:

.room {background:#00AAF2;height:90px;flex: 2 1 0;}

السيطرة على النظام مع flexbox

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

للقيام بذلك ، نستخدم خاصية طلب العنصر.

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

.washroom {height:60px;order:2;}

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

يعمل بالفعل مثل CSS -z-index ، وهذا يعني أنه إذا لم تقم بتعيين طلب لأحد العناصر بشكل صريح ، فمن المفترض أن يكون أقل في الترتيب من عنصر تم تعيين قيمة له بشكل صريح.

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

.washroom {height:60px;order:2;}.bedroom {order:3;}

لاحظ كيف تشترك غرفتي النوم في نفس رقم الطلب؟ في حالات مثل تلك ، سيعود المتصفح إلى ترتيب DOM.

كسر المحاذاة

خاصية العنصر النهائي هي محاذاة ذاتية. يتم استخدامه لتغيير محاذاة العنصر على المحور الثانوي. يتم استخدام محاذاة العناصر لمحاذاة كافة العناصر ، وتمنحك هذه الخاصية خيار إلغاء الاشتراك في هذا الإعداد الشامل.

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

وهنا عرض من الحمام إعادة الانحياز.

.washroom {height:60px;order:2;align-self:flex-end;}

تخطيط الويب الحديث مع flexbox

Flexbox هو خيار قوي لوضع المحتوى. على الرغم من أنه لا يهدف إلى وضع صفحات كاملة ، إلا أن دعمه الفائق لـ Grid Layout يجعله خيارًا رائعًا ، خاصة للمواقع الإلكترونية الأولى للجوال.

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

ابدء

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

A
B
C
D
E
F
G

مثل يمكنك ان ترى ، لدي div مع صفحة الهوية . داخل الصفحة لدي قائمة غير مرتبة من الأخبار. بعد الأخبار ، لديّ العنوان ، والذي هو تحت محتوى الأخبار لصالح الوصول. أخيرا ، لدي تذييل.

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

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

#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}

هنا كيف يبدو.

تعشيق حاويات flexbox

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

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

#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}

هنا كيف يبدو.

التفاف محتوى معقدة

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

دعونا نضع div news ليكون حاوية flexbox. المقبل ، دعونا نعطي newsItem بعض الأبعاد الدنيا وبعض الألوان حتى نتمكن من رؤيتها بوضوح.

#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}

هنا كيف يبدو.

الآن نحن بحاجة إلى تعيين حاوية الأخبار للالتفاف ، و newsItem s لتوسيع لملء المساحة المتوفرة.

#news {order:2;display:flex;flex-flow:row wrap;}

هنا كيف يبدو.

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

#news {order:2;display:flex;flex-flow:row wrap-reverse;}

هنا كيف يبدو.

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

#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}

هنا كيف يبدو.

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

.newsItem:nth-of-type(7) {order:1;}.newsItem:nth-of-type(6) {order:2;}.newsItem:nth-of-type(5) {order:3;}.newsItem:nth-of-type(4) {order:4;}.newsItem:nth-of-type(3) {order:5;}.newsItem:nth-of-type(2) {order:6;}.newsItem:nth-of-type(1) {order:7;}

هنا كيف يبدو.

خلط flexbox والاستعلامات الإعلامية

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

#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}

هنا كيف يبدو.

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

#footer {order:3;display:flex;align-items:baseline;flex-direction:column;padding:2em 0;}#footer > * {flex:1;}#footer > p {flex:2;}@media only screen and (min-width:600px) {#footer {flex-direction:row;padding:0;}#footer > p {margin-right:2em;}}

هنا كيف يبدو.

استنتاج

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

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

صورة مميزة، صورة مرنة عبر Shutterstock.