إستفتسار عن خاصية display flex و justify-content

أبو مهيب · 11 يوليو 2023

السلام عليكم

هل شرط أساسي عند كتابة display flex أن يتبعها خاصية justify-content

وماهي الصلة بينهم ؟

اقتباس

عمر قره محمد · 11 يوليو 2023

لا ليس شرطاً،

فالـ `display: flex` يستخدم لتحديد عنصر كحاوية مرنة وتمكين تخطيط Flexbox لمحتوياتها.

بينما `justify-content` يستخدم لمحاذاة العناصر المرنة على المحور الرئيسي (أفقيًا) عندما لا تستخدم العناصر كل المساحة المتاحة .

وهذه كل الاحتمالات التي تقبلها justify-content :

images?q=tbn:ANd9GcR6mV6Yyrzo_iOnB5jDwhc

وهذا مثال على استخدامهما :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        justify-content: center;
      }

      .item {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

أسامة زيادة · 11 يوليو 2023

وعليكم السلام

لا، ليس شرطاً أساسياً أن يتبع استخدام خاصية display: flex بخاصية justify-content. الخاصية display: flex تُستخدم لتعريف عنصر واحد كعنصرٍ مرن (flex container) ولجعل العناصر الفرعية (flex items).

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

بالطبع، يمكنك استخدام خاصية justify-content إذا كنت ترغب في تحديد توزيع العناصر الفرعية بشكل محدد. وهناك قيم مختلفة يمكنك استخدامها مع justify-content مثل flex-start (التوزيع من البداية)، center (التوسيط)، flex-end (التوزيع من النهاية)، space-between (توزيع متساوٍ بين العناصر) وغيرها.

للإطلاع أكثر حول الخاصية display و justify-content

Mustafa Suleiman · 11 يوليو 2023

بالطبع لا، إلا إذا أردت توزيع العناصر داخل حاوية Flexbox، حيث نستخدم justify-content لتوزيع العناصر أفقيًا بينما نستخدم align-items لتوزيع العناصر رأسيًا.

لكن انتبه إلى أنه عندما نحدد خاصية flex-direction بقيمة column أي تحويل إتجاه العناصر من أفقي إلى رأسي، يتم عكس استخدام justify-content حيث تصبح خاصة بتوزيع العناصر رأسيًا، بينما تصبح خاصية align-items خاصة بتوزيع العناصر أفقيًا ونفس الأمر بالنسبة لخاصية align-content.

لكن فرق بين align-items و align-content حيث أن الأولى خاصة بتوزيع خط واحد من العناصر، بينما الثانية خاصة بتوزيع أكثر من خط كالتالي:

Screenshot2023-07-12001756.png.c45153b4b705f323fdb9b657a566b6a5.png