كيفية إنشاء تخطيطات ذكية لـ CSS فقط باستخدام Flexbox

الصندوق المرن ، أو باختصار Flexbox ، عبارة عن مجموعة من الخصائص في CSS تم تقديمها في عام 2009 لتوفير نظام تخطيط استثنائي جديد. تم تحديد وحدة Flexbox كجزء من الإصدار الثالث من CSS (CSS3).

من المحتمل أنك تستخدم بالفعل العديد من الخصائص الجديدة في CSS3 ، مثل box-shadow ، و border-radius ، و background gradients ، وما إلى ذلك. ومع ذلك ، فإن Flexbox لم تشهد بعد التبني الواسع الذي تستحقه. قد يكون هذا بسبب كل التغييرات الهائلة التي عانى منها على مر السنين ، أو لأنه مدعوم جزئيًا فقط في Internet Explorer 10 ، أو لمجرد أن Flexbox هو نظام بيئي كامل بينما كانت النماذج السابقة تعتمد في الغالب على فردي جاهز لـ- انتقل خصائص.

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

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

لماذا أستخدم Flexbox؟

بشكل افتراضي ، تتراكم عناصر HTML على مستوى الكتلة ، لذلك إذا كنت تريد محاذاتها في صف واحد ، فأنت بحاجة إلى الاعتماد على خصائص CSS مثل float ، أو معالجة خاصية display باستخدام إعدادات table-ish أو inline-block.

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

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

أدخل Flexbox!

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

باستخدام Flexbox ، يمكنك:

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

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

أساسيات جهاز Flexbox

عرض

يعد display أحد الخصائص الأساسية في CSS وهو مهم جدًا في سياق Flexbox ، حيث يتم استخدامه لتعريف الغلاف المرن.

هناك قيمتان محتملتان للغلاف المرن: flex inline-flex .

الفرق بين الاثنين هو أن display: flex يعمل كعنصر كتلة بينما يعمل display: inline-flex يعمل ككتلة مضمنة. أيضًا ، تنمو العناصر inline-flex إذا لم تكن هناك مساحة كافية لاحتواء العناصر الفرعية. لكن بخلاف تلك الاختلافات ، سيكون سلوك الاثنين متماثلًا.

جرب نموذج التعليمات البرمجية أدناه ، قم بتقليل عرض منفذ العرض عندما يكون inline-flex نشطًا و… مرر.

راجع خاصية Pen FlexboxToptal - Parent - `display` بواسطة DD (Diegue) على CodePen.

 .wrapper { display: flex || inline-flex; }

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

الآن بعد أن رأيت العينة الأولى ، يمكنك أن تستنتج أن السلوك الافتراضي هو ببساطة تكوين صف من العناصر. لكن هناك المزيد:

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

تلميح: يمكن استخدام قيم column column-reverse لتبديل المحاور ، وبالتالي فإن الخصائص التي قد تؤثر على المحور الأفقي ستؤثر على المحور الرأسي بدلاً من ذلك.

راجع خاصية Pen FlexboxToptal - Parent - `flex-direction` بواسطة DD (Diegue) على CodePen.

 .wrapper { flex-direction: row || row-reverse || column || column-reverse; }

فليكس راب

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

• nowrap (افتراضي): يمنع العناصر الموجودة في الحاوية المرنة من الالتفاف
• التفاف: لف العناصر حسب الحاجة في صفوف متعددة (أو أعمدة ، حسب flex-direction )
• الالتفاف العكسي: تمامًا مثل wrap ، لكن عدد الصفوف (أو الأعمدة) ينمو في الاتجاه المعاكس حيث يتم لف العناصر

راجع خاصية Pen FlexboxToptal - Parent - `flex-wrap` بواسطة DD (Diegue) على CodePen.

 .wrapper { flex-wrap: nowrap || wrap || wrap-reverse; }

فليكس فلو

يمكنك الجمع بين خصائص flex-direction flex-wrap في خاصية واحدة: flex-flow .

 .wrapper { flex-flow: {flex-direction} {flex-wrap}; }

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

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

• flex-start (افتراضي): تتم محاذاة العناصر إلى اليسار (على غرار العناصر المضمنة مع text-align: left )
• نهاية مرنة: العناصر محاذاة إلى اليمين (على غرار العناصر المضمنة مع text-align: right )
• المركز: تتم توسيط العناصر (على غرار العناصر المضمنة مع text-align: center )
• space-around (حيث يبدأ السحر): سيتم عرض كل عنصر بنفس القدر من المساحة حول كل عنصر. لاحظ أن المسافة بين عنصرين فرعيين متتابعين ستكون ضعف المسافة بين العناصر الخارجية وجوانب الغلاف.
• space-between: تمامًا مثل space-around ، باستثناء أنه سيتم فصل العناصر بنفس المسافة ولن يكون هناك مسافة بالقرب من أي من حافتي الغلاف.

ملاحظة: تذكر flex-direction ، عند ضبطه على column أو column-reverse ، يقوم بتبديل المحور. إذا تم تعيين أحدهما ، فسيؤثر justify-content الضبط على المحاذاة الرأسية ، وليس الأفقية.

راجع خاصية Pen FlexboxToptal - Parent - `justify-content` بواسطة DD (Diegue) على CodePen.

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

تشبه هذه الخاصية justify-content ولكن سياق تأثيراته هو الصفوف بدلاً من الغلاف نفسه:

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

راجع خاصية Pen FlexboxToptal - الأصل - `محاذاة العناصر` بواسطة DD (Diegue) على CodePen.

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

تشبه هذه الخاصية justify-content and align-items ولكنها تعمل في المحور الرأسي والسياق هو الغلاف بالكامل (وليس الصف مثل المثال السابق). لرؤية آثاره ، ستحتاج إلى أكثر من صف واحد:

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

راجع خاصية Pen FlexboxToptal - Parent - `محاذاة المحتوى` بواسطة DD (Diegue) على CodePen.

فليكس غرو

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

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

 .wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; } 

راجع خاصية Pen FlexboxToptal - Children - `flex-Grow` بواسطة DD (Diegue) على CodePen.

فليكس شرينك

على غرار flex-grow ، تحدد هذه الخاصية ما إذا كان العنصر "قابل للتقلص" أم لا بقيمة عددية. على غرار flex-grow المرنة ، يحدد flex-shrink shrink عامل الانكماش لعنصر مرن.

شاهد خاصية Pen FlexboxToptal - Children - `flex-shrink` بواسطة DD (Diegue) على CodePen.

 .wrapper .element { flex-shrink: 1; /* Default 0 */ }

فليكس بيسيس

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

تلميح: flex-basis لا يدعم calc() و box-sizing: border-box في كل متصفح ، لذلك أوصي باستخدام width إذا كنت بحاجة إلى استخدام واحد من هذه (لاحظ أنك ستحتاج أيضًا إلى تعيين flex-basis: auto; ).

راجع خاصية Pen FlexboxToptal - Children - "أساس مرن" بواسطة DD (Diegue) على CodePen.

 .wrapper .element { flex-basis: size || auto; /* Default auto */ }

ثني

يمكنك الجمع بين خصائص Flex flex-grow Grow و flex-shrink و flex-basis في خاصية واحدة: flex كما يلي:

 .wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

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

محاذاة الذات

تشبه هذه الخاصية align-items ولكن يتم تطبيق التأثير بشكل فردي على كل عنصر. القيم الممكنة هي:

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

راجع Pen FlexboxToptal - Children - خاصية `align-self` بواسطة DD (Diegue) على CodePen.

ترتيب

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

راجع خاصية Pen FlexboxToptal - Children - `order` بواسطة DD (Diegue) على CodePen.

 .wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

سحبها جميعًا معًا: أمثلة لاستخدامات Flexbox

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

مكون المحاذاة العمودية

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

 .wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ } 

راجع Pen FlexboxToptal - الاستخدامات الحقيقية التي يمكننا تقديمها - محاذاة عمودية بواسطة DD (Diegue) على CodePen.

نصف / نصف تخطيط

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

باستخدام المزيد من الأساليب التقليدية ، يمكنك إنشاء هذا التخطيط بعناصر عائمة (بعرض 50٪ لكل منها) ، ومسح العناصر العائمة في الغلاف ("clearfix" :before و :after ، overflow: hidden ، أو whacky <div> مع clear: both; في النهاية). ومع ذلك ، فإن الأمر يتطلب الكثير من العمل والنتيجة ليست مستقرة مثل ما يوفره Flexbox.

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

المجمع الخارجي:

 .wrapper { display: flex; flex-direction: column; /* only for mobile */ }

أغلفة داخلية:

 .inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ } 

راجع Pen FlexboxToptal - الاستخدامات الحقيقية التي يمكننا تقديمها - قسم نصف النزيف بواسطة DD (Diegue) على CodePen.

أزرار التنقل كاملة العرض

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

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

Flexbox يجعل هذا أكثر بساطة.

خصائص الغلاف:

 .navbar { display: flex; }

ممتد خصائص الطفل:

 .navbar-item { flex-grow: 1; /* They will grow */ }

الخصائص التابعة غير الممتدة:

 .navbar-other { flex-grow: 0; // They won't grow } 

راجع Pen FlexboxToptal - الاستخدامات الحقيقية التي يمكننا تقديمها - شريط التنقل الكامل للأزرار بواسطة DD (Diegue) على CodePen.

دعاية

كم مرة كان عليك تنفيذ مجموعة من مربعات المعلومات مع الرموز والنصوص في مشاريع مختلفة؟

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

خصائص الغلاف:

 .wrapper { display: flex; flex-wrap: wrap; }

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

 .blurb { flex-grow: 0; /* elements don't grow */ flex-shrink: 0; /* elements don't shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

بالنسبة لإطارات عرض الأجهزة اللوحية والجوال ، يتراوح العرض بين 50٪ و 100٪.

راجع Pen FlexboxToptal - الاستخدامات الحقيقية التي يمكننا تقديمها - Blurbs بواسطة DD (Diegue) على CodePen.

تعزيز التوافق عبر المستعرضات

لقد تغير بناء الجملة الخاص بـ Flexbox عدة مرات عبر إصدارات مختلفة من المستعرضات. قد تكون هذه مشكلة عند تنفيذ تخطيط باستخدام Flexbox ومحاولة دعم متصفحات الويب القديمة ، خاصة الإصدارات القديمة من Internet Explorer.

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

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

روبي:

• قضبان المصفف الآلي
• وسيط Autoprefixer

Node.js:

• PostCSS Autoprefixer
• Grunt Autoprefixer
• جالب أوتوبريفكسير

ابدأ في إنشاء مخططات ذكية

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

إذا كنت بحاجة إلى بعض المساعدة المرئية لتخطيط مخططك التالي ، يمكنك تجربة هذا الملعب الأنيق:

شاهد Pen FlexboxToptal - ملعب Flexbox بواسطة DD (Diegue) على CodePen.

افتحه في نافذة جديدة.

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