Get best of the week

كل شيء عن الكلمة الرئيسية في CSS

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

الكلمة الأساسية autoلها معنى خاص عند استخدامها مع خصائص CSS المختلفة. سنقوم بتحليل الميزات autoالمتعلقة بتطبيق هذه القيمة على خصائص مختلفة. هنا ، أولاً وقبل كل شيء ، سنهتم بالتفاصيل الفنية للعمل.



auto. سنتحدث أيضًا عن كيفية تحقيق أقصى استفادة من استخدام هذه الخاصية. ستجد هنا ملاحظات حول autoحالات الاستخدام والأمثلة.

خاصية العرض: auto


العرض الأولي لعناصر الكتلة ، مثل <div>أو <p>، هو القيمة auto. هذا يؤدي إلى حقيقة أن هذه العناصر تشغل المساحة الأفقية الكاملة للكتلة التي تحتوي عليها.

"عرض الكتلة الذي يحتوي على العنصر" ، وفقًا لمواصفات CSS ، هو قيمة محسوبة بالصيغة التالية:

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’

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


مقارنة بين العرض: تلقائي والعرض: 100٪

ضع في اعتبارك ، على سبيل المثال ، ميزات الجهاز للتخطيطات أعلاه.

إليك ترميز HTML:

<div class="wrapper">
  <div class="item"></div>
</div>

إليك CSS:

* {
    box-sizing: border-box;
}

.wrapper {
      max-width: 600px;
      margin: 2rem auto 0;
      padding: 1rem;
}

.item {
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}

هنا يبدو كل شيء كما ينبغي ، يقتصر المحتوى على العنصر الأصل.


العنصر داخل العنصر الأصل

، وماذا يحدث إذا حددت أن عرض العنصر (width) لا يجب تحديده كقيمةauto، ولكن كيف100%؟ باستخدام هذا النهج ، سيشغل العنصر 100٪ من عرض العنصر الأصلي ، حيث ستتم إضافة المساحة المخصصة لهامشَي اليمين واليسار. هنا هو النمط المناسب:

.item {
      width: 100%;
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}

ولكن ماذا يحدث بعد تطبيقه على عنصر.


يتجاوز العنصر العنصر الأصل (اتجاه النص هو ltr).

العنصر عريض568px . تحسب على النحو التالي:

‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ = 15 + 16 + 506 + 16 + 15 = 568px

إذا تم directionتعيين الخاصية إلى قيمة ltr، margin-rightفسيتم تجاهل القيمة تمامًا. في حالتنا ، هذا بالضبط ما يحدث. ومع ذلك ، إذا تم directionتسجيلها rtl، سيتم تجاهلها margin-left.


يتجاوز العنصر العنصر الأصل (اتجاه النص هو rtl). يمكنك

هنا تجربة رمز المثال.

▍ حالات الاستخدام للعرض: تلقائي


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

عرض مختلف للعناصر في إصدارات الجوال وسطح المكتب للصفحة



خيارات تطبيقات الهاتف المحمول وسطح المكتب

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

إليك ترميز HTML:

<div class="group">
    <div class="group__item">
        <button class="c-button">Sign In</button>
    </div>
    <div class="group__item">
        <button class="c-button c-button--ghost">Register</button>
    </div>
</div>

من أجل وضع الأزرار بجانب بعضها البعض في النسخة المحمولة من الصفحة ، استخدمت تخطيط Flexbox. إليك CSS ذات الصلة:

.group {
    display: flex;
}

.group__item {
    width: 50%;
}

في إصدار سطح المكتب ، أحتاج إلى الأزرار لاحتلال عرض العنصر الأصلي بالكامل. قد يكون هناك إغراء لاستخدام التصميم width: 100%. حقيقة؟ ولكن هناك حل أفضل:

@media (min-width: 800px) {
    /*    flexbox-    */
    .group {
        display: block;
    }

    .group__item {
        width: auto;
    }
}

نظرًا لأن .group__itemهذا عنصر كتلة ، width: autoيؤدي الاستخدام إلى حقيقة أن هذا العنصر يملأ تمامًا نفسه المساحة المتاحة في العنصر الأصلي.

هنا نسخة عمل من هذا المثال.

خاصية الارتفاع: تلقائي


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

خذ بعين الاعتبار المثال التالي:

<div class="wrapper">
  <div class="item">What's my height?</div>
</div>

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

  1. يمكنك تعيين عنصر بفئة .wrapperبارتفاع ثابت ، ثم إضافة .itemخاصية إلى نمط العنصر height: 100%.
  2. يمكنك استخدام .wrapperتخطيط Flexbox للعنصر ، بحيث يتم توسيع الطفل .itemبشكل افتراضي إلى حجم العنصر الرئيسي.

إليك CSS:

.wrapper {
    height: 200px;
}

.item {
    height: 100%;
}


عناصر الوالدين والطفل

الحقول والكلمات الرئيسية لصناعة السيارات


غالبًا ما تُستخدم الحقول (الهوامش الخارجية) للتمركز الأفقي للعناصر التي يُعرف عرضها.

تأمل في مثال.


سيتم توسيط العنصر. يجب توسيط

المستطيل الأزرق أفقيًا. لهذا الغرض ، يمكنك استخدام النمط التالي:

.element {
    margin-left: auto;
    margin-right: auto;
}

الانتقال إلى مواصفات CSS:

إذا تم تعيين خصائص "margin-left" و "margin-right" على "auto" ، يكون عرض الهوامش هو نفسه. هذا يؤدي إلى المحاذاة الأفقية للعنصر نسبة إلى حواف الكتلة بما في ذلك.


حقول عنصر لها نفس العرض.

وإليك عرض توضيحي لهذا المثال.

▍ استخدام الهامش: خاصية السيارات للعناصر ذات الوضع المطلق



العنصر المركزي:

السيناريو الآخر الأقل شيوعًا لتطبيق القيمةautoهو توسيط العناصر ذات الموقع المطلق باستخدام البناءmargin: auto. إذا كان هناك عنصر يجب أن يتم توسيطه داخل العنصر الأصل أفقيًا وعموديًا ، فقد يبدو أنك بحاجة إلى استخدامtranslateXأوخاصية لهذا الغرضtranslateY.

لكيmargin: autoتسمح لناالخاصيةبمحاذاة العنصر بشكل صحيح ، يجب استيفاء الشروط التالية:

  1. يتم تحديد عرض العنصر وارتفاعه.
  2. تم تعيين خاصية العنصر position: absolute.

إليك ترميز HTML:

<div class="wrapper">
  <div class="item">I am centered.</div>
</div>

إليك رمز النمط:

.wrapper {
    position: relative;
}

.item {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

فيما يلي شرح لتقنية المحاذاة هذه.

تخطيطات Flexbox وتخصيص حقل تلقائي


يمكن أن يثبت استخدام الحقول التي تم تكوينها تلقائيًا ، في بعض الحالات ، أنها خدعة مفيدة جدًا. إذا كان العنصر الفرعي يحتوي على حقل تم تعيين أبعاده باستخدام القيمة auto، فسيتم إزالته إلى أقصى حد في العنصر الأصل إلى الجانب المقابل للحقل المكون. على سبيل المثال ، إذا تم تعيين خاصية لعنصر مرن margin-left: auto، فسيتم إزالته إلى أقصى اليمين.

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


زوج من العناصر في حاوية Flexbox

نحتاج إلى نقل العنصر رقم 2 إلى الحد الأيمن للحاوية. يعد استخدام قيمةautoالخاصية أمرًارائعًالهذاmargin-left:

.wrapper {
    display: flex;
}

.item-2 {
    margin-left: auto;
}

إليك ما حدث بعد تطبيق هذا النمط.


يتم نقل العنصر رقم 2 إلى الحافة اليمنى للحاوية.

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

.item-2 {
    margin-top: auto;
}

ها هي النتيجة.


يتم نقل العنصر رقم 2 إلى الحافة السفلية للحاوية.

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

.item-1 {
    margin: auto;
}

هذا يكفي لتوسيط العنصر.


تمركز العنصر رقم 1 على الحاوية

خاصية lexFlex والقيمة التلقائية


عند تطوير تخطيطات Flexbox ، يمكنك استخدام الخاصية للعناصر التابعة flex: auto. ماذا يعني هذا التصميم؟ والحقيقة هي أنه عندما يكون للعنصر flex: autoالتابع خاصية ، فإن هذا يعادل حقيقة أن العنصر يتم تعيين نمط flex: 1 1 autoمشابه للبناء التالي:

    .item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
    }

هنا هو ما MDN يقول عن هذا : "يتم تحديد أبعاد عنصر وفقا لخصائصه widthو height، ولكن يمكن أن تمتد العنصر، أخذ مساحة حرة إضافية متوفرة في الحاوية المرن. عنصر ، من أجل احتواءه في حاوية ، يمكن ضغطه إلى الحد الأدنى لحجمه. هذا مشابه لإعداد النمط flex: 1 1 auto".

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

كالعادة خذ بعين الاعتبار مثال

إليك الترميز:

<div class="wrapper">
  <div class="item item-1">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

هنا الأنماط:

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 120px;
    height: 500px;
}

.item-1 {
    flex: auto;
}

وهذه هي النتيجة.


باستخدام فليكس: auto

هنا نسخة عمل من هذا المثال.

تخطيطات الشبكة والقيمة التلقائية


auto استخدام السيارات لضبط الأعمدة



استخدام أعمدة قالب الشبكة: نمط 1fr 1fr التلقائي

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

.wrapper {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
}

ridتخطيطات الشبكة واستخدام القيمة التلقائية لتعيين الحقول


عند استخدام تخطيطات الشبكة ، autoيمكن استخدام القيمة لتخصيص حقول العناصر. يتم ذلك للحصول على نتائج مشابهة لتلك التي تحققت عند استخدامها autoفي تخطيطات Flexbox. إذا كنا نعمل مع تخطيط شبكة ، وكان أحد عناصر الشبكة ، على سبيل المثال ، نمطًا margin-left: auto، فسيتم نقله إلى الجانب الأيمن من التخطيط ، وسيتم تحديد عرضه بناءً على حجم محتوياته.

خذ بعين الاعتبار المثال التالي.


تخطيط الشبكة

نحن بحاجة إلى عرض عنصرItem 1للاعتماد على محتواه ، وليس على مساحة الشبكة المتاحة له. للقيام بذلك ، يمكننا استخدام النمط التالي:

    .item-1 {
        margin-left: auto;
    }

هنا نتيجة تطبيق هذا النمط.


يعتمد عرض العنصر على محتواه.

تخطيطات TRTL


تجدر الإشارة إلى أن استخدام الخصائص margin-left: autoأو margin-right: autoيظهر نفسه جيدًا لتخطيطات LTR (للتنسيقات التي يوجد فيها المحتوى من اليسار إلى اليمين) ، على سبيل المثال ، لتلك التي يتم استخدامها لعرض النصوص المكتوبة باللغة الإنجليزية. ولكن انتبه إلى أن هذه القيم معكوسة في مواقع متعددة اللغات. والأفضل من ذلك ، وأنا أوصي بفعل ذلك ، باستخدام خصائص Flexbox أو Grid في مثل هذه النماذج ، بالقيام بذلك في الحالات التي يمكن فيها تحقيق الهدف بمساعدتهم. إذا كان لا يمكن تحقيق ذلك بمساعدة مثل هذه الخصائص ، لجأ إلى تعيين خصائص الهامش باستخدام autoالملاذ الأخير فقط. بدلاً من ذلك ، من الأفضل استخدام الخصائص المنطقية لـ CSS .

خاصية الفائض


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

لحل هذه المشكلة ، يمكنك محاولة استخدام النمط التالي:

.element {
    overflow-y: scroll;
}

ولكن مع هذا النهج ، قد يظهر شريط التمرير حتى إذا كان العنصر يعرض محتوى لا يتجاوز حجمه حجم العنصر. هنا مثال.


العنصر الذي يتم فيه تعيين نمط التمرير y:

في متصفح Chrome على نظام Windows ، يتم دائمًا عرض شريط التمرير. هذا مثال على سوء تصرف عنصر يمكن أن يربك المستخدم.يتيح لك

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

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

خصائص عناصر تحديد المواقع


CSS-خصائص المسؤولة عن تحديد المواقع من العناصر، مثل top، right، bottomو left، هو الحفاظ على قيمة auto. ما أريد التحدث عنه الآن ، تعلمت أثناء كتابة هذا المقال.

خذ بعين الاعتبار التخطيط التالي.


تخطيط تجريبي

هناك عنصرpaddingأصل لهخاصية مخصصةتحدد المسافة البادئة. هذا العنصر له عنصر آخر ، طفل. يتم وضع العنصر الفرعي بشكل مطلق ، ولكن خصائصه ، المسؤولة عن تحديد الموقع ، لم يتم تكوينها. هنا الأنماط:

.wrapper {
    position: relative;
    padding: 16px;
}

.item {
    position: absolute;
    width: 100px;
    height: 100px;
}

الحقيقة هي أنه في CSS ، كل خاصية لها قيمة أولية معينة (القيمة الافتراضية). إذا قمت بفحص عنصر فرعي ونظرت إلى الأنماط المحسوبة ، فما قيمة ممتلكاته left؟


جاري فحص الأنماط المحسوبة للطفل.

القيمة الافتراضية للخاصيةleftهي هذه16px. من أين أتت إذا لم نسأله؟ والسبب في ذلك هو أن خصائص العنصر الذي تم تحديد موضعه تمامًا تتوافق مع أقرب والد له تم تعيين خصائصهposition: relative. العنصر الأصلي له خاصيةpadding: 16px. يؤدي هذا إلى وضع الطفل 16 بكسل من الجانبين العلوي والأيسر للوالد. مثيرة للاهتمام ، أليس كذلك؟

الآن قد يكون لديك سؤال حول ما فائدة هذا لنا. أقترح التعامل مع هذا.

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

هنا نمط مناسب للشاشات الصغيرة:

.wrapper {
    position: relative;
}

.item {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}

كيفية إعادة تعيين قيمة الخاصية leftعند عرض صفحة على شاشات كبيرة؟ علاوة على ذلك ، left: 0لا يمكن استخدام القيمة هنا ، لأن هذا سيؤدي إلى حقيقة أن العنصر الفرعي مضغوط إلى حافة العنصر الرئيسي ، لكننا لسنا بحاجة إليه. ألق نظرة على تخطيط الصفحة الموضح أدناه. يوضح وجهة نظري.


لا يعمل العنصر الفرعي بشكل صحيح.

لإعادة تعيين خصائص الموضع للعنصر الفرعي ، يجب استخدام البناءleft: auto. جاء ذلك في MDN على النحو التالي: "يتم وضع عنصر أفقيًا حيث يجب وضعه إذا كان عنصرًا ثابتًا".

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

إليك CSS:

.item {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}

@media (min-width: 800px) {
    .item {
        /*  -  left: 16px */
        left: auto;
    }
}

الأمر نفسه ينطبق على الممتلكات top. قيم محسوبة من rightو الخصائص bottomالتي وضعتها الافتراضية هي ما يعادلها، على التوالي، إلى عرض وارتفاع عنصر.

هنا مشروع تجريبي لهذا القسم.

أمثلة على استخدام القيمة التلقائية


يجب أن أقول على الفور أن الأمثلة الواردة هنا لا تغطي جميع إمكانيات المعنى auto، ولكن آمل أن يكون ما أخبرك به مفيدًا.

arrow سهم تلميح


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


أسهم اتجاهية تشير إلى اتجاهات مختلفة

.tooltip:before {
    /*   */
    position: absolute;
    left: -15px;
}

/*    ,   */
.tooltip.to-right:before {
    /*   */
    position: absolute;
    left: auto;
    right: -15px;
}

لاحظ أنني استخدمت الخاصية left: autoلتجاوز الخاصية left: -15pxفي التنفيذ الأصلي. وهكذا ، يتم استخدام هذا كثيرًا. لذلك ، أوصي باستخدام ما يلي بدلاً من النهج أعلاه:

.tooltip:before {
    position: absolute;
    right: 100%;
}

.tooltip.to-right:before {
    /*   */
    position: absolute;
    right: auto;
    left: 100%;
}

باستخدام قيمة 100%، نتجنب استخدام قيمة محددة بدقة (عرض السهم) ، والتي يمكن أن تؤدي إلى خلل في النظام إذا تغير حجم السهم. يناسب هذا الحل بشكل أفضل التغييرات المستقبلية المحتملة.

Card بطاقة المكون


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


بطاقة

مكونة برمز موجود في زوايا مختلفة باستخدام خاصية ،left: autoيمكنك بسهولة إعادة تعيين قيمة الخاصية المحددة في تنفيذها الأساسي. إليك CSS:

.card .icon {
    position: absolute;
    left: 15px;
    top: 15px;
}

.card.is-right .icon {
    left: auto;
    right: 15px;
}

▍ تخطيطات Flexbox وقيمة خاصية الهامش التلقائي


تخطيطات Flexbox تمنح مطوري الويب إمكانيات لا حصر لها حقًا. من خلال الجمع بين إمكانات هذه التخطيطات والحقول ، والتي تُستخدم قيمتها لتكوينها auto، يمكننا إنشاء تخطيطات قوية جدًا.

خذ بعين الاعتبار المثال التالي.


الضبط التلقائي لحقول العناصر

هناك حاوية رأسية تحتوي على عنوان العنصر ووصفه وزره الموجود على اليمين. نحتاج إلى إرفاق الزر بالجانب الأيمن من الحاوية.

إليك الترميز:

<div class="item">
    <div class="item-group">
        <!--    -->
    </div>
    <button class="item__action">Confirm</button>
</div>

هنا الأنماط:

    .item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .item__action {
        margin-left: auto;
    }

منجز! margin-left: autoيسمح لك استخدام الخاصية بوضع الزر في الزاوية العلوية اليمنى للعنصر. ما هو أجمل هو أنه يمكننا استخدام خصائص CSS المنطقية إذا قمنا بتطوير موقع متعدد اللغات. سيكون CSS شيئًا مثل هذا:

.item__action {
    margin-inline-start: auto;
}

إذا كنت تريد معرفة المزيد عن نمط RTL ، فإليك موردًا مفيدًا مخصصًا لهذا الموضوع.

rid تخطيطات الشبكة وقيمة الهامش التلقائي


بضبط حقول عناصر الشبكة ، يمكنك تعيين قيم ثابتة ونسبة مئوية ، وأيضًا - يمكنك استخدام القيمة auto. أنا مهتم بشكل خاص بالمعنى auto. نلقي نظرة على التخطيط التالي.


تخطيط الشبكة

هنا جزء من الترميز:

<p class="input-group">
    <label for="">Full Name</label>
    <input type="email" name="" id="">
</p>

هنا الأنماط:

.input-group {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;

  @media (min-width: 700px) {
    grid-template-columns: 0.7fr 2fr;
  }
}

أود محاذاة التسميات والعناصر labelعلى الحافة اليسرى من الحقول لإدخال البيانات (العناصر input). للقيام بذلك ، تحتاج إلى تطبيق النمط التالي:

.input-group label {
    margin-left: auto;
}

سيؤدي تطبيق هذا النمط إلى النتيجة الموضحة في الشكل التالي.


التسميات التوضيحية المحاذية لليسار لإدخال البيانات

▍ تصميم نوافذ مشروط



نافذة مشروطة

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

.modal-body {
    overflow-y: auto;
}

بفضل هذا النمط ، يظهر شريط التمرير فقط إذا كانت محتويات النافذة كبيرة بما يكفي.

ملخص


في هذه المقالة ، درسنا ميزات تطبيق الكلمة الأساسية autoفي CSS. نأمل أن تجدها مفيدة لما تقرأه اليوم.

القراء الأعزاء! في أي حالات تستخدم القيمة autoفي CSS؟

More articles:


All Articles