أبو مهيب نشر 11 يوليو 2023 أرسل تقرير مشاركة نشر 11 يوليو 2023 السلام عليكم هل شرط أساسي عند كتابة display flex أن يتبعها خاصية justify-content وماهي الصلة بينهم ؟ اقتباس 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 11 يوليو 2023 أرسل تقرير مشاركة نشر 11 يوليو 2023 لا ليس شرطاً، فالـ `display: flex` يستخدم لتحديد عنصر كحاوية مرنة وتمكين تخطيط Flexbox لمحتوياتها. بينما `justify-content` يستخدم لمحاذاة العناصر المرنة على المحور الرئيسي (أفقيًا) عندما لا تستخدم العناصر كل المساحة المتاحة . وهذه كل الاحتمالات التي تقبلها justify-content : وهذا مثال على استخدامهما : <!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> 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 أسامة زيادة نشر 11 يوليو 2023 أرسل تقرير مشاركة نشر 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 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 11 يوليو 2023 أرسل تقرير مشاركة نشر 11 يوليو 2023 بالطبع لا، إلا إذا أردت توزيع العناصر داخل حاوية Flexbox، حيث نستخدم justify-content لتوزيع العناصر أفقيًا بينما نستخدم align-items لتوزيع العناصر رأسيًا. لكن انتبه إلى أنه عندما نحدد خاصية flex-direction بقيمة column أي تحويل إتجاه العناصر من أفقي إلى رأسي، يتم عكس استخدام justify-content حيث تصبح خاصة بتوزيع العناصر رأسيًا، بينما تصبح خاصية align-items خاصة بتوزيع العناصر أفقيًا ونفس الأمر بالنسبة لخاصية align-content. لكن فرق بين align-items و align-content حيث أن الأولى خاصة بتوزيع خط واحد من العناصر، بينما الثانية خاصة بتوزيع أكثر من خط كالتالي: وأنصحك باستخدام الموقع التالي للتعرف على خواص Flexbox أنثاء تعلمك وسيسهل عليك الأمر كثيرًا: https://flexbox.malven.co اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
أبو مهيب
السلام عليكم
هل شرط أساسي عند كتابة display flex أن يتبعها خاصية justify-content
وماهي الصلة بينهم ؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.