Flexbox - ورقة الغش Ultimate CSS Flex (مع الرسوم البيانية المتحركة!)

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

يتيح لك تخطيط CSS flexbox تنسيق HTML بسهولة. يجعل Flexbox من السهل محاذاة العناصر رأسيًا وأفقيًا باستخدام الصفوف والأعمدة. العناصر سوف "تنثني" لأحجام مختلفة لملء الفراغ. يجعل التصميم سريع الاستجابة أسهل.

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

تتضمن المقالة صورًا متحركة مفيدة من Scott Domes والتي ستجعل من السهل فهم وتصور flexbox.

جميع خصائص CSS Flexbox

فيما يلي قائمة بجميع خصائص flexbox لـ CSS التي يمكن استخدامها لوضع العناصر في CSS. بعد ذلك ، سترى كيف تعمل.

CSS التي يمكن تطبيقها على الحاوية

display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow:  ||  justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS التي يمكن تطبيقها على العناصر / العناصر الموجودة في الحاوية

order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis:  | auto; /* default auto */ flex: none | [  ? ||  ] align-self: auto | flex-start | flex-end | center | baseline | stretch;

المصطلح

قبل أن تتعلم ما تفعله خصائص flexbox ، من المهم أن تفهم المصطلحات المرتبطة بها. فيما يلي تعريفات لمصطلحات Flexbox الرئيسية ، مأخوذة من مواصفات W3C الرسمية لـ flexbox.

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

CSS Display Flex

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

A divالتخلف عنصر ل display:block. يشغل العنصر الذي يحتوي على إعداد العرض هذا العرض الكامل للخط الموجود عليه. فيما يلي مثال لأربعة عناصر div ملونة في عنصر div أصلي مع إعداد العرض الافتراضي:

لاستخدام flexbox في قسم من صفحتك ، قم أولاً بتحويل الحاوية الرئيسية إلى حاوية مرنة عن طريق الإضافة display: flex;إلى CSS للحاوية الرئيسية.

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

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

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

الترتيب الافتراضي بعد التطبيق display: flexهو ترتيب العناصر على طول المحور الرئيسي من اليسار إلى اليمين. يوضح الرسم المتحرك أدناه ما يحدث عند flex-direction: columnإضافته إلى عنصر الحاوية.

يمكنك أيضًا التعيين flex-directionإلى row-reverseو column-reverse.

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

justify-contentهي خاصية لمحاذاة العناصر في الحاوية على طول المحور الرئيسي (انظر مخطط المصطلحات أعلاه). يتغير هذا حسب كيفية عرض المحتوى. يسمح لنا بملء أي مساحة فارغة في الصفوف وتحديد كيف نريد "تبريرها".

وهنا لدينا الخيارات الأكثر شيوعا لتبرير المحتوى: flex-start | flex-end | center | space-between | space-around.

إليك ما تبدو عليه الخيارات المختلفة:

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

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

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

فيما يلي الخيارات الأكثر شيوعًا المستخدمة لمحاذاة العناصر: flex-start | flex-end | center | baseline | stretch

ل stretchللعمل كيف تتوقعون، يجب تعيين ارتفاع عنصر من العناصر التي autoبدلا من ارتفاع محددة.

تُظهر هذه الرسوم المتحركة كيف تبدو الخيارات:

الآن سنستخدم كلا من justify-contentو align-items. سيظهر هذا الفرق بين المحاور الرئيسية والمحاور المتقاطعة.

محاذاة الذات

align-self يسمح لك بضبط محاذاة عنصر واحد.

لها كل نفس خصائص align-items.

في الرسم المتحرك التالي ، يحتوي div الأصل على CSS align-items: centerو flex-direction: row. أول مربعين يتنقلان عبر align-selfقيم مختلفة .

فليكس راب

سيحاول Flexbox افتراضيًا احتواء جميع العناصر في صف واحد. ومع ذلك ، يمكنك تغيير هذا مع flex-wrapالخاصية. هناك ثلاث قيم يمكنك استخدامها لتحديد وقت انتقال العناصر إلى صف آخر.

القيمة الافتراضية هي flex-wrap: nowrap. سيؤدي هذا إلى بقاء كل شيء في صف واحد من اليسار إلى اليمين.

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

flex-wrap: wrap-reverse يسمح أيضًا للعناصر بالظهور إلى الصف التالي ولكن هذه المرة يتم عرض العناصر من اليمين إلى اليسار.

فليكس فلو

flex-flowيجمع بين استخدام flex-wrapو flex-directionفي خاصية واحدة. يتم استخدامه عن طريق تحديد الاتجاه أولاً ثم الالتفاف. هنا مثال:flex-flow: column wrap;

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

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

توسيط عموديًا باستخدام Flexbox

إذا كنت تريد توسيط جميع المحتويات عموديًا داخل عنصر أصل ، فاستخدم align-items. هذا هو الكود الذي يجب استخدامه:

.parent { display: flex; align-items: center; }

الألعاب والتطبيقات

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

Flexbox Defense هي لعبة ويب حيث تتعلم flexbox بينما تحاول منع الأعداء القادمين من تجاوز دفاعاتك.
Flexbox Froggy هي لعبة تساعد فيها Froggy والأصدقاء عن طريق كتابة كود CSS.
Flexyboxes هو تطبيق يسمح لك بمشاهدة نماذج التعليمات البرمجية وتغيير المعلمات لترى كيف يعمل Flexbox بصريًا.
Flexbox Patters هو موقع ويب يعرض مجموعة من أمثلة Flexbox.

استنتاج

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