كيفية استخدام Flex لجعل موقع الويب الخاص بك أكثر استجابة

يجب أن تكون تصميمات مواقع الويب الحديثة مستجيبة للتغييرات في المحتوى أو حجم المتصفح. يمكنك تحقيق ذلك باستخدام Vanilla CSS أو استعلامات الوسائط أو flexbox.

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

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

إذا لم تكن معتادًا على أساسيات نظام فليكس بوكس، يمكنك استكشاف هذا مقتطف CodePen. يتضمن مثالا على كود لإعداد فليكس بوكس ​​بسيط. أولاً ، ستحتاج إلى لف العناصر الفرعية تحت div أصلي أو "حاوية مرنة".

<فئة div ="الأبوين">
<فئة div ="عنصر الطفل"></div>
<فئة div ="عنصر الطفل"></div>
<فئة div ="عنصر الطفل"></div>
</div>

أضف ال العرض: فليكس الممتلكات إلى div.

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

كيف تنمو العناصر داخل الحاوية

ال ينمو المرن تسمح الخاصية للعناصر الفرعية بالتوسع لملء المساحة المتاحة في عنصر div الأصلي. تتيح لك هذه الخاصية تحديد مقدار "النسبة" من المساحة التي يمكن أن يشغلها كل عنصر مربع.

لإضافة زيادة مرنة ، أضف خاصية CSS المرنة إلى كل عنصر من العناصر الفرعية.

<فئة div ="الأبوين">
<أسلوب div ="لون الخلفية: أحمر؛ نمو المرن: 1"></div>
<أسلوب div ="لون الخلفية: برتقالي ؛ نمو المرن: 1"></div>
<أسلوب div ="لون الخلفية: أصفر. نمو المرن: 1"></div>
<أسلوب div ="لون الخلفية: أخضر ؛ النمو المرن: 3"></div>
<أسلوب div ="لون الخلفية: أزرق ؛ نمو المرن: 1"></div>
</div>

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

النمو المرن لـ 0 لكل عنصر يعني أن المربعات لن تتوسع لملء مساحة الوالد. 0 هي القيمة الافتراضية لهذه الخاصية.

سيؤدي النمو المرن 1 لكل عنصر إلى إجبار جميع الصناديق على التوسع بشكل متساوٍ لتلائم المساحة المتاحة داخل الأصل.

إذا كان أحد العناصر يحتوي على مرونة أكبر ، على سبيل المثال:

<أسلوب div ="لون الخلفية: أخضر ؛ النمو المرن: 3"></div>

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

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

كيفية تقليص العناصر داخل الحاوية

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

يسمح لك Flex-shrink بتحديد نسبة لمقدار كل عنصر يجب أن يتقلص.

أضف خاصية flex-shrink إلى عناصر div الفرعية. قم بتغيير عرض الوالد والأطفال بحيث لا تتناسب العناصر مع الحاوية.

<فئة div ="الأبوين">
<أسلوب div ="لون الخلفية: أحمر؛ فليكس يتقلص: 1"></div>
<أسلوب div ="لون الخلفية: برتقالي ؛ فليكس يتقلص: 1"></div>
<أسلوب div ="لون الخلفية: أصفر. فليكس يتقلص: 1"></div>
<أسلوب div ="لون الخلفية: أخضر ؛ فليكس يتقلص: 2"></div>
<أسلوب div ="لون الخلفية: أزرق ؛ فليكس يتقلص: 1"></div>
</div>

.الأبوين {
 العرض: 500 بكسل ؛
 عرض: فليكس ؛ 
}
.الأبوين شعبة {
 العرض: 150 بكسل ؛
 الارتفاع: 150 بكسل ؛
}

يعني التقلص المرن لـ 1 لجميع العناصر أن جميع العناصر ستتقلص بالتساوي إذا تم تقليل عرض الأصل.

إذا كان أحد العناصر يحتوي على Flex-shrink أكبر ، على سبيل المثال:

<أسلوب div ="لون الخلفية: أخضر ؛ فليكس يتقلص: 2"></div>

سيحاول الصندوق الأخضر تقليص حجم الصناديق الأخرى مرتين.

اعرض الكود الخاص بخاصية flex-shrink في هذا مقتطف CodePen لمشاهدة مثال عملي.

كيفية دفع العناصر إلى الصف التالي

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

تشمل خيارات خاصية الالتفاف المرن ما يلي:

التفاف المرن: nowrap | التفاف | التفاف العكسي

أضف خاصية flex-wrap إلى الحاوية المرنة الأصل. تأكد من أن عرض الحاوية صغير بما يكفي ، بحيث لا يتناسب مع العناصر التابعة بداخلها. سيؤدي هذا إلى إجبار أي عناصر فائضة على صف جديد.

<فئة div ="الأبوين">
<فئة div ="أحمر"></div>
<فئة div ="البرتقالي"></div>
<فئة div ="الأصفر"></div>
<فئة div ="لون أخضر"></div>
<فئة div ="أزرق"></div>
</div>

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

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

إذا حددت ارتفاعًا على الحاوية الرئيسية ، فستضيف الحاوية مسافات بين صفوف العناصر.

إذا كنت تريد إزالة هذا التباعد ، مع الاحتفاظ بارتفاع عنصر div الأصلي ، فاستخدم خاصية محاذاة المحتوى. حدد خاصية align-content كـ "flex-start" في عنصر div الرئيسي:

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

تعد خاصية محاذاة المحتوى واحدة من العديد من الخصائص الأساسية خصائص flexbox التي تسمح لك بالتحكم في المحاذاة.

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

كيفية دفع العناصر إلى العمود التالي

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

تتضمن أمثلة مجموعات الخيارات التي يمكنك استخدامها لخاصية التدفق المرن ما يلي:

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

تعمل هذه الخاصية بشكل مشابه لخاصية flex-wrap أعلاه. أضف التدفق المرن إلى الحاوية المرنة الأصل. تأكد من أن عرض الحاوية الرئيسية صغير بما يكفي لإجبار العناصر الفرعية على الالتفاف:

.الأبوين {
 العرض: 300 بكسل ؛ 
 الحدود: 1 بكسل أسود خالص ؛ 
 عرض: فليكس ؛ 
 التدفق المرن: التفاف العمود.
}
.الأبوين شعبة {
 العرض: 100 بكسل ؛
 الارتفاع: 100 بكسل ؛
}

ستلتف العناصر في الاتجاه المحدد (صف أو عمود).

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

كيفية تغيير ترتيب العناصر

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

لا يجب بالضرورة أن تبدأ الأرقام من 1. يمكنك استخدام أي أرقام وفواصل زمنية ، وستقوم خاصية الترتيب بترتيب عناصر HTML من الأدنى إلى الأعلى.

أضف خاصية order إلى كل عنصر من العناصر الموجودة داخل الحاوية المرنة الأصلية:

<فئة div ="الأبوين">
<فئة div ="أحمر" النمط ="الطلب: 2"></div>
<فئة div ="البرتقالي" النمط ="الطلب: 1"></div>
<فئة div ="الأصفر" النمط ="الطلب: 5"></div>
<فئة div ="لون أخضر" النمط ="الطلب: 4"></div>
<فئة div ="أزرق" النمط ="الطلب: 3"></div>
</div>

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

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

تجربة المزيد من خصائص CSS في موقع الويب الخاص بك

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

يمكنك أيضًا التعرف على المزيد من الخصائص المرنة لمساعدتك في محاذاة عناصر HTML على موقع الويب الخاص بك.

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

اقرأ التالي

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