كيفية استخدام Flex لمحاذاة عناصر HTML

تسمح لك الخصائص المرنة في CSS بمحاذاة العناصر بشكل أكثر مرونة واستجابة. هذا يجعله مفيدًا عندما تريد أن تكون عناصر HTML الخاصة بك أكثر استجابة داخل متصفح الويب.

ستتناول هذه المقالة كيفية استخدام بعض الخصائص المرنة. يتضمن ذلك الاتجاه المرن وضبط المحتوى وخصائص المحاذاة الذاتية ومحاذاة العناصر ومحتوى المحاذاة وخصائص الفجوة.

كيفية إعداد CSS Flex Display

مثال على هيكل يمكنك استخدامه للاستكشاف أساسيات نظام فليكس بوكس هي مجموعة من divs الفرعية تحت أحد الأبوين div. في الكود أدناه ، يوجد قسم رئيسي "رئيسي". تمثل عناصر div الثلاثة الفرعية العناصر التي يمكنك محاذاتها باستخدام الخصائص المرنة.

لكي يعمل أي تصميم مرن ، ستحتاج إلى إضافة العرض: فليكس الممتلكات إلى الحاوية المرنة الأصل.

.الأبوين {
 عرض: فليكس ؛
}

بدون المرن ، تظهر divs الفرعية واحدة تلو الأخرى في تشكيل عمود أسفل الصفحة.

لعرض مثال على هذا الإعداد ، اعرض التعليمات البرمجية وقم بتشغيلها في هذا مقتطف CodePen.

كيفية التحكم في اتجاه التخطيط

ال الاتجاه المرن تحدد الخاصية اتجاه الصف أو العمود للعناصر الفرعية.

تتضمن خيارات خاصية الاتجاه المرن ما يلي:

الاتجاه المرن: صف | العمود | عكس الصف | العمود العكسي

ستحتاج إلى إضافة حاوية رئيسية تحيط بالعناصر التي ترغب في محاذاتها.

لغة البرمجة:

CSS:

.red {لون الخلفية: أحمر؛ }
.orange {background-color: orange؛ }
.yellow {لون الخلفية: أصفر؛ }
.green {background-color: green؛}
.blue {لون الخلفية: أزرق؛ }
. الأرجواني {لون الخلفية: أرجواني؛ }
.parent div {
 العرض: 40 بكسل ؛
 الارتفاع: 40 بكسل ؛
}

قم بتطبيق خاصية flex-direction على الحاوية المرنة الأصل. سيؤدي هذا إلى محاذاة عناصر div الفرعية.

.الأبوين {
 العرض: 300 بكسل ؛
 عرض: فليكس ؛ 
 الاتجاه المرن: صف.
}

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

اعرض الكود الخاص بخاصية الاتجاه المرن في هذا مقتطف CodePen لرؤية بعض الأمثلة.

كيفية محاذاة العناصر على طول المحور المتقاطع

ال محاذاة العناصر تتحكم الخاصية في محاذاة العناصر على طول المحور المتقاطع. بالنسبة للاتجاه المرن الافتراضي ، يتحكم صف ، عناصر المحاذاة في المحاذاة الرأسية للعناصر.

تتضمن خيارات خاصية محاذاة العناصر ما يلي:

محاذاة العناصر: بداية مرنة | نهاية مرنة | محاذاة العناصر | تمتد

أضف خاصية align-items إلى الحاوية الرئيسية لمحاذاة العناصر الفرعية.

.الأبوين {
 عرض: فليكس ؛ 
 محاذاة العناصر: بداية مرنة ؛
}

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

يمكنك أيضًا اختيار المكان الذي يبدأ منه الخط الأساسي ، مثل الجزء العلوي (الخط الأساسي الأول) أو السفلي (الخط الأساسي الأخير).

محاذاة العناصر: خط الأساس | خط الأساس الأول | خط الأساس الأخير

بالنسبة لعناصر المحاذاة: يعمل الخط الأساسي ، تأكد من أن كل عنصر له ارتفاع أو عرض مختلف (حسب المحور الذي تستخدمه).

​​​

اعرض التعليمات البرمجية لخاصية align-items في هذا مقتطف CodePen لرؤية بعض الأمثلة.

كيفية تجاوز المحاذاة على العناصر الفردية

يمكنك استعمال ال محاذاة الذات لتجاوز أي نمط لمحاذاة العناصر للحاوية الرئيسية. هذا يعني أنه يمكنك تعيين محاذاة مرنة منفصلة على عنصر فردي.

تشمل خيارات خاصية محاذاة الذات ما يلي:

محاذاة ذاتية: تلقائي | بداية مرنة | نهاية مرنة | مركز | خط الأساس | تمتد

لنفترض على سبيل المثال أن الحاوية الرئيسية لديها نمط مرن الاتجاه مضبوط على "صف".

.الأبوين {
 عرض: فليكس ؛ 
 الاتجاه المرن: صف.
}

يمكنك تطبيق خاصية align-self على العنصر الفردي. سيستخدم العنصر الفردي تصميم خاصية align-self ، وسيتم توسيط العنصر عبر الحاوية الرئيسية.

اعرض الكود الخاص بخاصية align-self في هذا مقتطف CodePen لرؤية بعض الأمثلة.

كيفية توزيع الخطوط عبر المحور المتقاطع

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

تتضمن خيارات خاصية محاذاة المحتوى ما يلي:

محاذاة المحتوى: بداية مرنة | نهاية مرنة | مركز | تمتد | مسافة بين | حول الفضاء

أضف خاصية محاذاة المحتوى إلى الحاوية المرنة الأصل. لن تعمل خاصية محاذاة المحتوى إلا إذا تم تعيين خاصية الالتفاف المرن. أضف التفافًا مرنًا: قم باللف إلى الحاوية الرئيسية ، وقم بتقليل عرض عنصر div الرئيسي لفرض العناصر على أكثر من سطر واحد.

.الأبوين {
 التفاف المرن: التفاف.
 عرض: فليكس ؛
 محاذاة المحتوى: مرنة البداية ؛
 العرض: 180 بكسل ؛
}

اعرض رمز خاصية محاذاة المحتوى في هذا مقتطف CodePen لرؤية بعض الأمثلة.

كيفية محاذاة العناصر على المحور الرئيسي

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

تتضمن خيارات خاصية justify-content:

تبرير المحتوى: بداية مرنة | نهاية مرنة | مركز | مسافة بين | حول الفضاء | الفضاء بالتساوي

لف العناصر التي تريد محاذاتها أسفل حاوية مرنة رئيسية.

لغة البرمجة:

CSS:

.red {لون الخلفية: أحمر؛ }
.green {لون الخلفية: lightgreen؛ }
.blue {لون الخلفية: أزرق؛ }

أضف خاصية justify-content إلى الحاوية المرنة الأصل.

.الأبوين {
 العرض: 300 بكسل ؛
 عرض: فليكس ؛ 
 تبرير المحتوى: بداية مرنة ؛
}

تدعم خاصية justify-content أيضًا القيم المدرجة في مواصفات CSS Box Alignment. يتضمن هذا قيمًا مثل "البدء" و "النهاية" و "اليسار" و "اليمين". بعض المتصفحات لا تدعم هذه.

تحتوي خاصية justify-content أيضًا على كلمة أساسية "آمنة" يمكنك استخدامها. هذا يضمن أن العناصر تحاول البقاء ضمن نطاق الحاوية الرئيسية.

يتم استخدامه أيضًا لمنع فقدان البيانات ، في حالة تركيز كلمة طويلة. يؤدي استخدام الكلمة الأساسية الآمنة إلى منع حرف div أقصر من قطع الحرفين الأول والأخير.

.الأبوين {
 عرض: فليكس ؛ 
 تبرير المحتوى: مركز آمن ؛
}

تقتصر الكلمة الأساسية الآمنة أيضًا على متصفحات معينة. يمكنك التحقق من التوافق في هل بإمكاني استخدم.

اعرض الكود الخاص بخاصية justify-content في هذا مقتطف CodePen لرؤية بعض الأمثلة.

كيفية إضافة مسافات بين العناصر

ال الفارق تسمح لك الخاصية بإضافة مقدار المسافة بين العناصر. انها واحدة من أحدث ميزات CSS التي يمكن أن تساعدك في إنشاء تخطيط سريع الاستجابة.

قم بتطبيق خاصية الفجوة على الحاوية المرنة الأصل.

.الأبوين {
 عرض: فليكس ؛
 فجوة: 70 بكسل ؛
}

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

.الأبوين { 
 العرض: 300 بكسل ؛
 فجوة: 120 بكسل ؛
}

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

.الأبوين { 
 العرض: 300 بكسل ؛
 التفاف المرن: التفاف.
 فجوة: 120 بكسل ؛
}

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

تحدد خاصية فجوة الصف المسافة بين كل صف. تحدد خاصية فجوة العمود المسافة بين كل عمود.

.الأبوين { 
 فجوة الصف: 120 بكسل ؛ 
}
.الأبوين { 
 فجوة العمود: 120 بكسل ؛ 
}

عرض رمز خاصية الفجوة في هذا مقتطف CodePen لرؤية بعض الأمثلة.

استخدام المزيد من خصائص Flex على موقع الويب الخاص بك

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

Flexbox هي تقنية تخطيط قوية ، لكنها مجرد جزء صغير من CSS. يمكنك أيضًا التعرف على خصائص CSS الجديدة ، وتقنيات التشفير النظيف ، والأدوات المستخدمة لتحسين CSS.

11 أدوات مفيدة لفحص وتنظيف وتحسين ملفات CSS

اقرأ التالي

نبذة عن الكاتب