فحص خاصية CSS المرن

هل تساءلت يومًا عن كيفية عمل خاصية اختزال CSS flex؟ يسمح لك بتعيين قيم الخصائص flex-grow، flex-shrinkو flex-basis. لقد لاحظت أن هذه الخاصية تُستخدم غالبًا في العرض flex: 1، مما يسمح بتمديد العنصر المرن ليشغل المساحة المتاحة. في هذا المقال ، أريد أن أتحدث عن خاصية الاختزال والخصائص التي يتم تعيينها باستخدامها. سأتحدث عن متى ولماذا يمكنك استخدام هذه الخصائص ، وسأقدم أمثلة عملية.







flex

خاصية النمو المرن

flex-growتُستخدم خاصية CSS لضبط ما يسمى عامل النمو المرن ، والذي يسمح لهذه العناصر بالتمدد لملء المساحة المتاحة. يمكن استخدام الأعداد الصحيحة فقط كقيم لهذه الخاصية. لنلقي نظرة على مثال.



ها هي ترميز HTML:

<div class="wrapper">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

إليك الأنماط:

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

.item {
    flex-grow: 1;
}

flex-growيمكن أن تؤثر الخاصية على عرض العنصر أو ارتفاعه ، بناءً على قيمة الخاصية flex-direction. عند التفكير في الأمثلة التالية ، ضع في اعتبارك أنه تم تعيين الخاصية التي يستخدمونها flex-directionعلى القيمة الافتراضية ( row). إذا لم يكن الأمر كذلك ، فسوف أخبرك بذلك.



لاحظ أنه بدون استخدامها flex-grow، سيتم تعيين العناصر المرنة على عرضها الافتراضي ، والذي يساوي عرضها الأصلي. وفي حالة استخدامها flex-grow: 1، يتم توزيع المساحة الحرة المتاحة بين العناصر.





أعلاه ، لا تنطبق خاصية Flex-Grow. أدناه هو النمو المرن: 1



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



يوضح الرسم التوضيحي التالي كيف تبدو العناصر بدون استخدام الخاصيةflex-grow. بمعنى آخر ، تظهر العناصر هنا بحجمها الطبيعي.





لا يتم استخدام خاصية الزيادة المرنة



لفهم كيفية حساب عرض العناصر المرنة ، ألق نظرة على الصيغ أدناه. لقد وجدت هذه الصيغ في مادة Samantha Ming (التي أشكرها عليها!).



دعنا نحسب عرض العنصر الأول - العنصر الذي يحتوي على النصCSS.





البحث عن عرض العنصر



لذلك ، يتم استخدام الصيغة التالية هنا:

  = ((flex-grow  /   flex-grow) *  ) +   

دعنا نحلل هذه الصيغة:

• flex-grow هو عامل النمو المحدد للصنف.
• flex-grow هو مجموع قيم عوامل النمو لجميع العناصر.
• - هذه هي المساحة الخالية للحاوية الموجودة بها قبل استخدام الآليات flex-grow.
• - هذا ، كما قد تتخيل ، عرض العنصر قبل تغييره به flex-grow.

ينتج عن استبدال القيم الحقيقية في هذه الصيغة ما يلي:

  = ( (1 / 3) * 498) + 77 = 241

قيم نمو مرنة مختلفة لعناصر مختلفة

في المثال السابق ، تم استخدام نفس القيمة لجميع العناصر المرنة flex-grow. لنحاول الآن تعيين خاصية للعنصر الأول flex-grow: 2. كيف سيتم حساب عرض العناصر الآن؟ عند التفكير في الصيغة التالية ، ضع في اعتبارك أن عرض المساحة الحرة في مثالنا هو 498px.





العثور على عرض عنصر في موقف ما عندما يكون للعناصر المختلفة



نمو مرني مختلف كما ترى ، فإنه يستخدم نفس الآلية لحساب عرض العناصر التي تمت مناقشتها أعلاه. يتمثل الاختلاف الرئيسي في أنه يتم تعيين قيمةflex-growالعنصر الأول على أنها2، وهو ما ينعكس في صيغة حساب عرض العناصر.

هل يمكن استخدام 0 كقيمة زيادة مرنة؟

بالتأكيد تستطيع! بما أن الخاصية flex-growتقبل القيم الصحيحة ، ويمكن كتابتها عليها 0. هذا يعني أننا لا نريد تغيير حجم العنصر المرن ليشغل بعض المساحة الخالية في الحاوية.





عواقب تعيين خاصية Flex-Grow على 0



كما ترى ، فإن العنصر الذي تم تعيين الخاصية لهflex-grow: 0لا يغير العرض. يمكن أن تكون هذه التقنية مفيدة عندما تريد أن يحافظ عنصر مرن على عرضه الأصلي.

لا يجعل Flex-Grow العناصر متشابهة

هناك مفهوم خاطئ شائع مفاده أن الاستخدام flex-growيسمح لعناصر المطابقة بأن يكون لها نفس العرض. هذا خطأ. نقطة الاستخدام flex-growهي توزيع المساحة المتاحة بين العناصر. كما ترون من خلال تحليل الصيغ أعلاه ، يتم حساب العرض النهائي للعناصر المرنة بناءً على عرضها الأصلي (أي ما كان لديهم قبل تطبيقها flex-grow).



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

خاصية Flex-shrink

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





يتم تعيين خاصية flex-shrink لعنصر المركز: 1 فيما



يلي الأنماط الخاصة بهذا المثال:

.item-2 {
    width: 300px;
    flex-shrink: 1;
}

سيجعل المتصفح عرض العنصر item-2متساويًا 300pxعند استيفاء الشروط التالية:

• العرض الإجمالي لجميع العناصر أقل من عرض الحاوية.
• عرض إطار عرض الصفحة يساوي عرض العنصر أو أكبر منه.

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









لا يتقلص عرض العنصر الذي يحتوي على النص "هو" طالما أن هناك مساحة كافية على الشاشة لعرضه. كما ترى ، لا يتقلص العنصر ، مع الحفاظ على العرض300pxطالما أن هناك مساحة كافية له.

خاصية الأساس المرن

flex-basisتحدد الخاصية الحجم الأساسي للعنصر المرن قبل تخصيص المساحة الخالية وفقًا لعوامل المرونة التي تحددها flex-growو الخصائص flex-shrink. بشكل افتراضي ، بالنسبة لجميع القيم باستثناء autoو content، تكون القيمة flex-basisمساوية لعرض العنصر ، وعند استخدام الخاصية flex-direction: column، يكون ارتفاعه.



الخاصية flex-basisتقبل نفس القيم التي widthو خصائص يمكن أن تتخذ height. القيمة الافتراضية هي القيمة autoالتي يتم تعيينها بناءً على القيمة content. contentيتم تعيين القيمة تلقائيًا بناءً على حجم محتوى العنصر المرن.



دعنا نطبق item-1الأنماط التالية على العنصر من مثالنا:

.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
}

استخدام خاصية الأساس المرن: 50٪



هنا ، يتم تخصيص خاصية العنصر الأولflex-basis: 50%. في هذه الحالة ، من المهم إعادة تعيينه إلى0خاصيةflex-grow، مما سيسمح لك بالتأكد من عدم تجاوز حجم العنصر50%.



ماذا يحدث إذا كتبتflex-basisقيمةللممتلكات بدلاً من ذلك100%؟ سيؤدي هذا إلى احتلال العنصر بنسبة 100٪ من عرض العنصر الأصلي ، والتفاف العناصر الأخرى بسطر جديد.



فيما يلي الأنماط ذات الصلة:

.item-1 {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;
}

نتيجة استخدام خاصية الأساس المرن هي 100٪ ؛

خاصية الاختزال المرن

flexتسمح الخاصية ، بتنسيق مختصر ، بتعيين قيم الخاصية flex-grow، flex-shrinkو flex-basis. الافتراضي الذي تأخذ هذه الخاصية هو auto. يطابق flex: 0 1 auto. هذا يعني أنه يسمح للعناصر المرنة أن تنمو في الحجم بناءً على حجم محتواها.



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

العناصر المرنة ذات الأحجام النسبية

هنا CSS:

.item {
    /* ,   ,  flex: 1 1 auto */
    flex: auto;
}

هنا ، يتم تحديد حجم العناصر المرنة بناءً على محتواها. نتيجة لذلك ، ستظهر العناصر ذات المحتوى الأكبر بشكل أكبر.





العنصر الذي يحتوي على المزيد من المحتوى سيكون له المزيد

العناصر المرنة ذات الأبعاد المطلقة

على عكس المثال السابق ، إذا flex-basisتم تعيين الخاصية إلى قيمة 0، فسيؤدي ذلك إلى زيادة جميع العناصر المرنة إلى نفس الحجم.



هذا هو النمط:

.item {
    /*  flex: 1 1 0% */
    flex: 1;
}

العناصر من نفس الحجم

مميزات خاصية Flex التي أحبها

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

▍ قيمة واحدة بدون وحدات

هنا CSS:

.item {
    flex: 1;
}

هنا ، flexيتم كتابة قيمة واحدة بدون وحدات إلى العقار . سيتم تفسير هذه القيمة من قبل النظام على أنها قيمة الممتلكات flex-grow. سيبدو مكافئها flex: 1 1 0.

▍ قيمتان بدون وحدات

دعونا نلقي نظرة على النمط التالي:

.item {
    flex: 1 1;
}

هنا نضع القيم بشكل صريح flex-growوعلى التوالي flex-shrink. flex-basisسيؤدي هذا إلى إعادة تعيين إلى الافتراضي.

▍ قيمة واحدة تمثل حجمًا معينًا

لنتحدث عن كيفية "فك تشفير" النمط التالي:

.item {
    flex: 100px;
    /* flex: 1 1 100px */
}

قيمة 100pxسيتم التعامل من قبل النظام كقيمة flex-basis. و flex-growو flex-shrinkالإرادة، افتراضيا، تكون مكتوبة 1.

▍ استخدام 0 بدون تحديد وحدات

افترض أنك تريد التعيين flex-basisإلى قيمة 0باستخدام الخاصية flex. لحل هذه المشكلة ، سنقرر القيام بذلك:

.item {
    flex: 0;
}

لا يُنصح بالقيام بذلك ، لأنه يمكن أن يربك كل من أولئك الذين سيقرأون هذا الرمز والمتصفح. كيف نفهم - إلى ماذا يشير هذا بالضبط 0؟ إلى الممتلكات flex-grow، flex-shrinkأو flex-basis؟ بشكل عام ، ظهر الارتباك. إليك ما تقوله مواصفات CSS عنها :



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



أي لتجنب الغموض ، يجب إعادة كتابة الكود أعلاه على النحو التالي:

.item {
    flex: 0%;
    /* flex: 1 1 0% */
}

يتم استخدام البناء هنا 0%، ولكن يمكنك ، على سبيل المثال ، استخدام البناء 0px.

استخدم خاصية الاختزال المرن

عندما تحتاج إلى تعيين خصائص flex-grow، flex-shrinkومن flex-basisالأفضل استخدام خاصية الاختزال لذلك flex.



إلقاء نظرة على مواصفات CSS :



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

حالات الاستخدام والأمثلة العملية

▍ تجسيدات المستخدم

صورة رمزية تم تكوينها باستخدام الخاصية المرنة



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



ها هي الترميز:

<div class="user">
    <img class="user__avatar" src="shadeed.jpg" alt="" />
    <div>
        <h3>Ahmad Shadeed</h3>
        <p>Author of Debugging CSS</p>
    </div>
</div>

هذا هو النمط:

.user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.user__avatar {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
}

لاحظ أنه عندما أقوم بإعداد العنصر user__avatar، قمت بتطبيق الخاصية flex: 0 0 70px. هذا مهم ، لأنه بدون هذا الإعداد ، قد لا يتم عرض الصورة بشكل صحيح في بعض المتصفحات القديمة. علاوة على ذلك ، فإن أولوية العقار flexأعلى من أولوية العقار width(عندما يتعلق الأمر بالوضع الذي يتم تطبيقه فيه flex-direction: row) والممتلكات height(في الحالة التي يتم تطبيقه فيها flex-direction: column).



إذا قمت بتغيير حجم الصورة الرمزية ، مما أثر على الخاصية فقط flex، فسيتجاهل المتصفح ما تم تعيينه في الخاصية width. هذا هو النمط المناسب:

.user__avatar {
    /*   100px,   70px */
    flex: 0 0 100px;
    width: 70px;
    height: 70px;
}

▍ عنوان العنصر

عنوان العنصر



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

.page-header {
    display: flex;
    flex-wrap: wrap;
}

.page-header__title {
    flex: 1;
}

حقل الإدخال لتجهيز الرسالة

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

form {
    display: flex;
    flex-wrap: wrap;
}

input {
    flex: 1;
    /*   */
}

هذا المثال هو دليل جيد على استخدام الممتلكات flex-grow.



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

▍ محاذاة العناصر السفلية الموجودة على بطاقات مختلفة

الهدف هو محاذاة كلا التاريخين مع الخط الأحمر.



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



يمكن استخدام نموذج flexbox لحل هذه المشكلة.



ها هي الترميز:

<div class="card">
    <img src="thumb.jpg" alt="">
    <h3 class="card__title">Title short</h3>
    <time class="card__date"></time>
</div>

يمكنك تحقيق هدفنا باستخدام العقار flex-direction: column. يمكن تصميم عنصر card__title، عنوان ، عن طريق تطبيق خاصية flex-growوجعلها تشغل كل المساحة المتاحة لها. نتيجة لذلك ، اتضح أن خط التاريخ سيظهر في الجزء السفلي من البطاقة. سيحدث هذا حتى لو كان العنوان نفسه قصيرًا بدرجة كافية.



إليك الأنماط:

.card {
    display: flex;
    flex-direction: column;
}

/*   */
.card__title {
    flex-grow: 1;
}

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

/*   */
.card__date {
    margin-top: auto;
}

استخدام قيم مختلفة لعوامل الرقة

في هذا القسم، أريد أن أتحدث حول استخدام خصائص flex-growو flex-shrinkالتي تم تعيينها قيم أخرى غير 1. سأقدم الآن بعض الأمثلة العملية لاستخدام مخطط مماثل لتعيين هذه الخصائص.

▍ لوحات التحكم

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



هذا المثال ، ألهمني تصميم Facebook (أخذت أيضًا الرموز من هناك). تحتوي لوحة التحكم (العنصرactionsفي الكود التالي) على أربعة عناصر. آخر (عنصرactions__item.user) له عرض أصغر من عرض العناصر الأخرى. يمكنك إنشاء لوحة تحكم مثل هذه:

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

.actions__item {
    flex: 2;
}

.actions__item.user {
    flex: 1;
}

▍ الرسوم المتحركة التي يتم فيها شد العنصر

يمتد العنصر عندما تحوم فوقه



يمكن أن تتحرك عناصر Flex عندما تحوم فوقها. يمكن أن تكون هذه التقنية مفيدة للغاية. إليك CSS ذات الصلة:

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

.palette__item {
    flex: 1;
    transition: flex 0.3s ease-out;
}

.palette__item:hover {
    flex: 4;
}

هنا يمكنك العثور على مقطع فيديو يوضح كل شيء أثناء العمل.

▍ قم بزيادة حجم البطاقة النشطة

يعجبني حقًا هذا المشروع على CodePen ، والذي ينفذ آلية لزيادة حجم البطاقة مع وصف لخطة التعريفة التي نقر عليها المستخدم. يتم تغيير حجم البطاقة عن طريق تعيين قيمة الخاصية flex-growالخاصة بها 4.





زيادة حجم البطاقة النشطة

ماذا لو كانت محتويات الحاوية أكبر من الحاوية نفسها؟

العناصر لا تتناسب مع الحاوية



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



لنجرب هذا النمط:

.wrapper {
    display: flex;
}

.wrapper img {
    flex: 1;
}

ولكن حتى عند استخدام الخصائص ، flex: 1لا يتم وضع الصور في الحاوية. بالإشارة إلى مواصفات CSS :



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



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

.wrapper img {
    flex: 1;
    min-width: 0;
}

انظر هذا المقال لي للحصول على التفاصيل.

النتيجة

أخبرتك هنا عن العقار flexوكيفية استخدامه. أتمنى أن تكون قد تعلمت شيئًا جديدًا ومفيدًا من هذه المادة.



هل تستخدم خاصية flex CSS في مشاريعك؟