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