تعد تقنية CSS Flexbox واحدة من أهم التقنيات في تنسيق وتحديد موقع العناصر والأشكال في صفحات الويب. توفر Flexbox طرقًا مرنة وقوية لإنشاء تخطيطات متجاوبة. في هذه المقالة، سنتعرف على كيفية استخدام Flexbox لتعديل العناصر والأشكال بشكل مفصل، بما في ذلك الأكواد المصاحبة.
مفهوم تقنية CSS Flexbox
Flexbox هو نظام تنسيق يستخدم لتوزيع العناصر ضمن صفحة الويب على المحور الرئيسي (main axis) والمحور الفرعي (cross axis). يتيح Flexbox للمطورين تنظيم العناصر بسهولة وتحكم في توزيعها وتحديد حجمها ومحاذاتها.
كيفية الاستخدام
1. إعداد Flexbox:
للبدء في استخدام Flexbox، يجب أن نعيد عنصر الكونتينر الرئيسي (container) إلى Flexbox. يمكنك تحقيق ذلك عن طريق تعيين خاصية display للعنصر الرئيسي بقيمة flex. هنا مثال على الكود:
2. تحديد اتجاه المحور الرئيسي:
يمكنك استخدام خاصية flex-direction لتحديد اتجاه المحور الرئيسي لعناصر Flexbox. يمكن أن يكون الاتجاه أفقيًا (row) أو عموديًا (column) أو عكس الاتجاه الأفقي (row-reverse) أو عكس الاتجاه العمودي (column-reverse).
النتيجه:
وإذا استخدمت flex-direction:column;
3. توزيع العناصر في المساحة المتاحة:
يمكنك استخدام خاصية justify-content لتحديد كيفية توزيع العناصر على المحور الرئيسي. يمكن أن يكون التوزيع من البداية (flex-start) أو النهاية (flex-end) أو الوسط (center) أو توزيع متساوٍ للمساحة بين العناصر (space-between) أو توزيع متساوٍ للمساحة حول العناصر (space-around).
4. تحكم في ترتيب العناصر:
يمكنك استخدام خاصية order لتحديد ترتيب العناصر في Flexbox. يمكن أن تكون القيمة إيجابية أو سلبية، حيث يتم ترتيب العناصر حسب القيمة المعطاة.
5. ضبط حجم العناصر
يمكنك استخدام خاصيتي flex-grow و flex-shrink و flex-basis لتحديد حجم العناصر في Flexbox. يمكن أن تكون القيمة لـ flex-grow و flex-shrink إيجابية، بينما يمكن أن تكون القيمة لـ flex-basis بالبكسل أو بالنسبة المئوية.
6. تحكم في محاذاة العناصر على المحور الفرعي:
يمكنك استخدام خاصيتي align-items و align-self لمحاذاة العناصر على المحور الفرعي. يمكن أن تكون القيمة من البداية (flex-start) أو النهاية (flex-end) أو الوسط (center) أو محاذاة أسفل العناصر بناءً على الخط الأساسي (baseline) أو تمدد العناصر لملء المساحة (stretch).
7. إنشاء تخطيطات متعددة الأعمدة:
يمكنك استخدام خاصية flex-wrap و flex-flow لإنشاء تخطيطات متعددة الأعمدة في Flexbox. يمكن أن تكون القيمة لـ flex-wrap إما nowrap لمنع العناصر من الانتقال إلى سطر جديد أو wrap للسماح بالانتقال إلى سطر جديد عند امتلاء المساحة المتاحة. الكود التالي يوضح ذلك:
8. تنسيق العناصر داخل Flexbox:
يمكنك استخدام خاصيتي align-content و gap لتنسيق العناصر داخل Flexbox. يمكن أن تكون القيمة لـ align-content من البداية (flex-start) أو النهاية (flex-end) أو الوسط (center) أو توزيع متساوي للمساحة بين العناصر (space-between) أو توزيع متساوٍ للمساحة حول العناصر (space-around) أو تمدد العناصر لملء المساحة (stretch). يمكن أن تكون القيمة لـ gap بالبيكسل لإنشاء فواصل بين العناصر. الكود التالي يوضح ذلك:
استنتاج
قدمت لك هنا نبذه عامة على كيفية تعديل العناصر والأشكال باستخدام تقنية CSS Flexbox مع كتابة الأكواد لكل خاصية. يمكنك الآن الاستفادة من Flexbox لإنشاء تخطيطات متجاوبة وتحقيق تصاميم إبداعية على صفحات الويب الخاصة بك. Flexbox يوفر العديد من الخصائص والقيم التي يمكن استكشافها لتناسب احتياجاتك الخاصة.