خاصية Flex Direction

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 45 من 76.

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

يؤثر هذا أيضاً على كيفية عمل خصائص مثل 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 بعرض عناصر الـ flex الخاصة به في صف من اليسار إلى اليمين، بينما سيقوم العنصر .container-row-reverse بعرضها من اليمين إلى اليسار.

التحدي

سهل

لقد تم إعطاؤك مستند HTML يحتوي على عنصرين <strong><div></strong> أب، يحتوي كل منهما على ثلاثة عناصر <strong><div></strong> أبناء. تم تعيين عناصر <div> الأب بالفعل كحاويات مرنة (flex containers) باستخدام display: flex;. مهمتك هي استخدام خاصية flex-direction لتغيير ترتيب العناصر المرنة.

اتبع الخطوات أدناه:

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

ورقة مرجعية

تتحكم خاصية flex-direction في الاتجاه الذي يتم فيه ترتيب العناصر داخل حاوية مرنة (flex container):

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

القيم:

row: الافتراضي. يتم وضع العناصر من اليسار إلى اليمين (المحور الرئيسي الأفقي)
row-reverse: يتم وضع العناصر من اليمين إلى اليسار (المحور الرئيسي الأفقي)
column: يتم وضع العناصر من الأعلى إلى الأسفل (المحور الرئيسي الرأسي)
column-reverse: يتم وضع العناصر من الأسفل إلى الأعلى (المحور الرئيسي الرأسي)

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

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

جرّب بنفسك

<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>