فهم الفرق بين "محاذاة العناصر" و"محاذاة المحتوى" في تخطيط الشبكة

تقدم وحدة تخطيط الشبكة مجموعتين من الخصائص، "ضبط/محاذاة العناصر" و"ضبط/محاذاة المحتوى"، والتي تلعب أدوارًا مميزة في محاذاة عناصر الشبكة والشبكة نفسها داخل الشبكة حاوية.

توضيح مصطلحات الشبكة

• حاوية الشبكة: الحاوية الأصلية التي تحدد مساحة الشبكة الإجمالية.
• الشبكة: شبكة منظمة من الخطوط التي تقسم حاوية الشبكة إلى مناطق الشبكة.
• الشبكة العناصر: المربعات التي تحتوي على محتوى متدفق داخل مناطق الشبكة.

"محاذاة- العناصر" وخصائص "محاذاة المحتوى"، كما توحي أسماؤها، تعمل على محاذاة عناصر الشبكة والشبكة، على التوالي. على وجه التحديد:

ضبط المحتوى
• و محاذاة المحتوى محاذاة مسارات الشبكة داخل مربع المحتوى الخاص بحاوية الشبكة.
justify-self
• وjustify-items محاذاة عناصر الشبكة في البعد المضمّن (أفقيًا حسب الافتراضي).
محاذاة ذاتية
• و محاذاة العناصر محاذاة عناصر الشبكة في بُعد الكتلة (عموديًا بشكل افتراضي).

ادعاء المؤلف بأن خصائص "-المحتوى" موجودة لأنه "في بعض الأحيان قد يكون الحجم الإجمالي لشبكتك يكون أقل من حجم حاوية الشبكة الخاصة بها" يسلط الضوء على ما يلي:

• "ضبط المحتوى يمكن أن تستخدم خصائص "" و"align-content" هذه المساحة لمحاذاة الشبكة مركزيًا أو داخل الحاوية.
• في المقابل، إذا كان حجم الشبكة يساوي حجم الحاوية، فلن تكون هناك مساحة خالية، وستتم هذه المحاذاة الخصائص ليس لها أي تأثير.

[صورة توضيحية من W3C تظهر شبكة أصغر من الحاوية الخاصة بها، مع "ضبط المحتوى" و "محاذاة المحتوى" محاذاة الشبكة داخل الحاوية.

مقتطف من المواصفات

لـ الوضوح، يتم توفير المقتطفات ذات الصلة من مواصفات تخطيط شبكة CSS:

"يمكن محاذاة عناصر الشبكة في البعد المضمن باستخدام خاصية الضبط الذاتي على عنصر الشبكة أو خاصية ضبط العناصر على حاوية الشبكة."

"يمكن أيضًا محاذاة عناصر الشبكة في بُعد الكتلة باستخدام خاصية المحاذاة الذاتية على عنصر الشبكة أو خاصية محاذاة العناصر على الشبكة حاوية."
• "إذا كانت الحواف الخارجية للشبكة لا تتوافق مع حواف محتوى حاوية الشبكة، فستتم محاذاة مسارات الشبكة داخل مربع المحتوى وفقًا لخصائص ضبط المحتوى ومحاذاة المحتوى في حاوية الشبكة. "