غالبا ما يواجه مصممو الويب والمطورون مهمة وضع كتل متعددة في سطر واحد. قد يكون هذا ضروريا ، على سبيل المثال ، لإنشاء قائمة تنقل أو قائمة أفقية. في مثل هذه الحالات ، يمكن أن تكون كس أداة مفيدة للتحكم في وضع ومحاذاة الكتل.
يوفر كس عدة طرق لترتيب كتل في صف واحد. واحدة من أسهل الطرق هي استخدام خاصية "العرض" بقيمة "مضمنة" أو "كتلة مضمنة". يسمح هذا للكتل بشغل المساحة اللازمة فقط في سطر واحد والانتقال تلقائيا إلى سطر جديد عندما لا تكون هناك مساحة كافية.
طريقة أخرى هي استخدام خاصية "الطفو". يسمح لك بمحاذاة الكتل أفقيا وإنشاء تأثير الكتل "العائمة". يمكنك أيضا استخدام خاصية "فليكس بوكس" ، والتي توفر خيارات أكثر مرونة للتحكم في موقع الكتل في صف واحد.
مثال على استخدام خاصية "العرض: كتلة مضمنة":
بلوك 1
- بلوك 2
- بلوك 3
- طرق بسيطة لترتيب كتل في صف واحد في كس
باستخدام خاصية الطفو
باستخدام فليكس بوكس
- سؤال وجواب
- كيف يمكنني ترتيب الكتل في صف واحد في المغلق?
- كيف يمكنني ترتيب الكتل في صف واحد دون الانتقال إلى سطر جديد?
- كيف يمكنني ترتيب الكتل في صف واحد مع المسافة بينهما?
الشبكة: باستخدام شبكة كس ، يمكنك إنشاء شبكة مرنة يمكن أن تشغل فيها الكتل عددا مختلفا من الأعمدة. للقيام بذلك ، قم بتعيين خاصية العرض إلى كتلة الحاوية: الشبكة وتعيين الأبعاد المطلوبة لكل كتلة باستخدام الشبكة قالب الأعمدة وخصائص الشبكة قالب الصفوف.
الجدول: تمثيل الكتل في شكل جدول باستخدام العلامات
,
و
يجعل من السهل محاذاة الكتل على التوالي. للقيام بذلك ، يجب وضع كل كتلة في خلية منفصلة من الجدول باستخدام علامة
.
وبالتالي ، باستخدام هذه الطرق ، يمكنك بسهولة ترتيب الكتل في صف واحد وإنشاء تصميم صفحة مضغوط وجمالي.
لاستخدام خاصية التعويم ، تحتاج إلى تعيين القيمة المناسبة لخاصية التعويم. على سبيل المثال ، لترتيب الكتل في صف من اليسار إلى اليمين ، يمكنك استخدام القيمة اليسرى. هنا مثال على هذا الاستخدام:
في هذا المثال ، نقوم بإنشاء ثلاث كتل ، كل منها بعرض وارتفاع 100 بكسل ، وكل كتلة تطفو إلى اليسار بمسافة بادئة
الهامش الأيمن: 10 بكسل;
. هذا يخلق فجوات بين الكتل.
يمكن أن تتدفق العناصر التي تتبع الكتل باستخدام خاصية الطفو حولها من الجانب. لتجنب هذا ، يمكنك استخدام خاصية واضحة. على سبيل المثال:
في هذا المثال ، تمت إضافة كتلة مع فئة "مسح" ، والذي يستخدم واضح:على حد سواء ؛ خاصية. يؤدي هذا إلى بدء العناصر اللاحقة في ترتيبها من سطر جديد.
وبالتالي ، فإن خاصية التعويم تجعل من السهل وضع الكتل على التوالي على صفحة الويب. ومع ذلك ، يجب ألا يغيب عن البال أنه عند استخدام خاصية التعويم ، قد تكون هناك مشكلة في تدفق العناصر وإدارة الفجوات بين الكتل.
باستخدام فليكس بوكس
فليكسبوكس هو أداة قوية لترتيب العناصر في صف واحد. يسمح لك بالتحكم في ترتيب العناصر ومحاذاتها وحجمها ، مما يجعلها قابلة للتكيف بسهولة مع الأجهزة المختلفة.
لاستخدام فليكس بوكس ، يجب عليك أولا تعيين العرض: فليكس الملكية إلى الحاوية. هذا يجعل جميع العناصر الفرعية لعناصر الحاوية المرنة التي يمكن ترتيبها في صف أو عمود.
بعد ضبط العرض: خاصية فليكس ، يمكنك استخدام خصائص مختلفة للتحكم في تخطيط العناصر. على سبيل المثال ، تحدد خاصية تبرير المحتوى محاذاة العناصر على طول المحور الرئيسي (أفقي للصفوف وعمودي للأعمدة) ، وتحدد خاصية محاذاة العناصر محاذاتها على طول المحور العرضي.
وبالإضافة إلى ذلك ، فليكسبوكس يجعل من السهل تعيين ترتيب العناصر باستخدام خاصية النظام. كلما انخفضت قيمة الخاصية ، سيتم عرض العنصر مبكرا في الصف.
باستخدام خاصية التفاف المرن ، يمكنك السماح بنقل العناصر إلى الصف أو العمود التالي عندما لا تكون هناك مساحة كافية. هذا مفيد بشكل خاص لإنشاء تخطيطات سريعة الاستجابة.
مثال على استخدام فليكس بوكس: