خاصية Flex Direction

جزء من قسم التنسيق باستخدام CSS في رحلة HTML على Coddy. الدرس 45 من 76.

في CSS، تتحكم الخاصية flex-direction في الاتجاه الذي تُرتَّب فيه العناصر داخل حاوية مرنة. وهي تحدد ما إذا كانت العناصر ستُوضَع في صف أم في عمود.

يؤثر هذا أيضًا في طريقة عمل خصائص مثل justify-content وalign-items. يساعد استخدام flex-direction على النحو الصحيح في إنشاء تخطيطات مرنة وسريعة الاستجابة.

إليك الصياغة الأساسية لاستخدام الخاصية flex-direction:

.container {
    display: flex;
    flex-direction: value;
}

value: الاتجاه المطلوب لعناصر flex، ويمكن أن يكون أحد ما يلي:

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

row-reverse: تُوضَع عناصر Flex في صف من اليمين إلى اليسار. يكون المحور الرئيسي أفقيًا، والمحور المتقاطع عموديًا.

column: تُوضَع عناصر Flex في عمود، من الأعلى إلى الأسفل. يكون المحور الرئيسي عموديًا، والمحور المتقاطع أفقيًا.

column-reverse: تُوضَع عناصر Flex في عمود، من الأسفل إلى الأعلى. يكون المحور الرئيسي عموديًا، والمحور المتقاطع أفقيًا.

على سبيل المثال:

.container-row {
    display: flex;
    flex-direction: row;
}

.container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

في هذا المثال، سيعرض العنصر .container-row عناصره المرنة في صف من اليسار إلى اليمين، وسيعرض العنصر .container-row-reverse عناصره من اليمين إلى اليسار.

التحدي

سهل

لديك مستند HTML يحتوي على عنصري <div> أبويين، ويحتوي كل منهما على ثلاثة عناصر <div> فرعية. تم بالفعل تعيين عنصري <div> الأبويين كحاويتين مرنتين باستخدام display: flex;. مهمتك هي استخدام الخاصية flex-direction لتغيير ترتيب العناصر المرنة.

اتبع الخطوات التالية:

اكتب قاعدة CSS تستهدف عنصر <div> ذي الصنف container1.
- عيّن الخاصية flex-direction إلى column لترتيب العناصر المرنة في عمود رأسي.
اكتب قاعدة CSS تستهدف عنصر <div> ذي الصنف container2.
- عيّن الخاصية flex-direction إلى column-reverse لترتيب العناصر المرنة في عمود معكوس.

جرّب بنفسك

<html>
<head>
    <title>Flex Direction</title>
    <style>
        .container1, .container2 {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container1">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
    <br>
    <div class="container2">
        <div>Another Item 1</div>
        <div>Another Item 2</div>
        <div>Another Item 3</div>
    </div>
</body>
</html>