خاصية Justify Content

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

في CSS، تتحكم خاصية justify-content في كيفية تباعد عناصر flex على طول المحور الرئيسي لحاوية flex. فهي تساعد في محاذاة العناصر وتوزيع المساحة الإضافية عندما تتوفر مساحة متبقية. هذه الخاصية مفيدة لتموضع العناصر أفقيًا (في صف) أو رأسيًا (في عمود)، مما يجعل التخطيطات أكثر مرونة واستجابة.

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

.container {
    display: flex;
    justify-content: value;
}

value: المحاذاة المطلوبة لعناصر flex على طول المحور الرئيسي، والتي يمكن أن تكون واحدة مما يلي:

flex-start: هذه هي القيمة الافتراضية. يتم تجميع العناصر باتجاه بداية السطر.

flex-end: يتم تجميع العناصر باتجاه نهاية السطر.

center: يتم توسيط العناصر على طول الخط.

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

space-around: يتم توزيع العناصر بالتساوي على طول الخط، مع وجود مساحة متساوية حولها.

space-evenly: يتم توزيع العناصر بحيث تكون المسافات بين أي عنصرين (والمسافة إلى الحواف) متساوية.

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

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

في هذا المثال، سيقوم العنصر .container-start بمحاذاة عناصر flex الخاصة به إلى بداية المحور الرئيسي، وسيقوم العنصر .container-center بتوسيط عناصر flex الخاصة به على طول المحور الرئيسي.

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على قسمين (<div>) يحتويان على ثلاثة أقسام فرعية (<div>). تم تعيين الأقسام الأب بالفعل كحاوية مرنة باستخدام display: flex;. مهمتك هي استخدام خاصية justify-content لمحاذاة عناصر flex على طول المحور الرئيسي. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <div> الذي يحمل الفئة fruits.
قم بتعيين خاصية justify-content للعنصر .fruits إلى center لتوسيط عناصر flex على طول المحور الرئيسي.
اكتب قاعدة CSS تستهدف عنصر <div> الذي يحمل الفئة vegetables.
قم بتعيين خاصية justify-content للعنصر .vegetables إلى space-between لتوزيع عناصر flex على طول المحور الرئيسي.

ورقة مرجعية

تتحكم خاصية justify-content في كيفية تباعد عناصر flex على طول المحور الرئيسي لحاوية flex:

.container {
    display: flex;
    justify-content: value;
}

القيم المتاحة:

flex-start: العناصر مكدسة نحو البداية (افتراضي)
flex-end: العناصر مكدسة نحو النهاية
center: العناصر متمركزة على طول الخط
space-between: العناصر موزعة بالتساوي، الأول في البداية والأخير في النهاية
space-around: العناصر موزعة بالتساوي مع مساحة متساوية حولها
space-evenly: العناصر موزعة بمسافات متساوية بين أي عنصرين

.container-start {
    display: flex;
    justify-content: flex-start;
}

.container-center {
    display: flex;
    justify-content: center;
}

جرّب بنفسك

<html>
<head>
    <title>Justify Content</title>
    <style>
        .fruits, .vegetables {
            display: flex;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="fruits">
        <div>Apple</div>
        <div>Banana</div>
        <div>Mango</div>
    </div>
    <div class="vegetables">
        <div>Tomato</div>
        <div>Potato</div>
        <div>Cucumber</div>
    </div>
</body>
</html>