لماذا عند وضع flex-basis للصورة لا يتغير عرضها؟

تستخدم الخاصية flex لكي تُحدِّد كيف سيتمدد أو يتقلص أحد العناصر لكي يملأ المساحة المتوافرة في حاوية flex، وهذه الخاصية تعتبر إختصارًا للخواص:

• flex-grow: بقيمة 0
• flex-shrink: بقيمة 1
• flex-basis: بقيمة auto

تقبل الخاصية flex قيمةً واحدةً أو قيمتين أو ثلاث قيم.

عندما تقوم بتحديد الخاصية flex بقيمة واحدة، يكون وكأنك قمت بتحديد الخصائص الثلاث بالقيم التالية:

flex: 1;

/* الخاصية السابقة إختصار لكل التالي*/
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

بينما الخاصية flex-basis تقوم بتحديد حجم صندوق محتوى content box الخاص بالعنصر الرئيسي Main Size إلا إذا تم تعديله من خلال الخاصية box-sizing، وبالتالي يظهر حجم الأيقونة بـ 60px.

مما سبق، عندما تقوم بتحديد flex: 1، يكون وكأنك قمت بتحديد الخاصة flex-grow: بقيمة 1، وبالتالي يأخذ حجم النص .text 100% من العرض ناقص عرض الأيقونة (60px)، وبدون تحديد الخاصية flex على العنصر .text لن تعمل الخاصية flex-basis على الأيقونة.

بتاريخ 5 دقائق مضت قال سامح أشرف:

وبدون تحديد الخاصية flex على العنصر .text لن تعمل الخاصية flex-basis على الأيقونة.

شكرا فهمت بعض الأمور, لكن مازال لدي إشكال في سبب عدم اخذ الايقونة عرض 60px التي قمت بإعطائها لها, و أيضا سبب أخذها المفاجئ لهذه القيمة بعض تحديد flex: 1 للعنصر ذو الكلاس text, فأرجو توضيح هذا الأمر لي

بتاريخ 3 دقائق مضت قال الشخص المصمم:

شكرا فهمت بعض الأمور, لكن مازال لدي إشكال في سبب عدم اخذ الايقونة عرض 60px التي قمت بإعطائها لها, و أيضا سبب أخذها المفاجئ لهذه القيمة بعض تحديد flex: 1 للعنصر ذو الكلاس text, فأرجو توضيح هذا الأمر لي

الخاصية flex-basis ليست مثل الخاصية width، أي أنها لن تعمل (لن تغير عرض العنصر) إلا إن تم تحديد حجم باقي العناصر التي بجانبها (sibings) وفي هذه الحالة هو العنصر .text ، وبالتالي لن يتم تغير عرض الأيقونة إلا إن تم تحجيم العنصر .text من خلال الخاصية flex-grow: 1 (هي نفسها flex: 1).

أنصحك أن تلقي نظرة على هذه المقالات التي تشرح خصائص flexbox من البداية ومع أمثلة عملية:

بتاريخ 1 دقيقة مضت قال سامح أشرف:

الخاصية flex-basis ليست مثل الخاصية width، أي أنها لن تعمل (لن تغير عرض العنصر) إلا إن تم تحديد حجم باقي العناصر التي بجانبها (sibings) وفي هذه الحالة هو العنصر .text ، وبالتالي لن يتم تغير عرض الأيقونة إلا إن تم تحجيم العنصر .text من خلال الخاصية flex-grow: 1 (هي نفسها flex: 1).

أنصحك أن تلقي نظرة على هذه المقالات التي تشرح خصائص flexbox من البداية ومع أمثلة عملية:

 

شكرا جزيلا !!

بتاريخ منذ ساعة مضت قال سامح أشرف:

الخاصية flex-basis ليست مثل الخاصية width، أي أنها لن تعمل (لن تغير عرض العنصر) إلا إن تم تحديد حجم باقي العناصر التي بجانبها (sibings) وفي هذه الحالة هو العنصر .text ، وبالتالي لن يتم تغير عرض الأيقونة إلا إن تم تحجيم العنصر .text من خلال الخاصية flex-grow: 1 (هي نفسها flex: 1).

 

؟؟ قمت بعمل الأكواد التي في الصورة, ألاحظ عندما أقوم بإلغاء width العنصر الأحمر, لا يتغير عرض العنصر الأزرق ؟ فلماذا هذا حدث رغم أنك قلت أن خاصية flex-basis لن تعمل لن تغير عرض العنصر إلا إن تم تحديد حجم باقي العناصر التي بجانبها

بتاريخ 3 ساعات قال الشخص المصمم:

؟؟ قمت بعمل الأكواد التي في الصورة, ألاحظ عندما أقوم بإلغاء width العنصر الأحمر, لا يتغير عرض العنصر الأزرق ؟ فلماذا هذا حدث رغم أنك قلت أن خاصية flex-basis لن تعمل لن تغير عرض العنصر إلا إن تم تحديد حجم باقي العناصر التي بجانبها

في الأساس الخاصية flex-basis تعني العرض الذي سيأخذه كل عنصر (عرض في حالة flex row و ارتفاع في حالة flex column) ثم، المساحة الفارغة الباقية في الحاوي يتم توزيعها اعتمادا على الخاصية flex-grow حتى يتم تحديد العرض النهائي للعناصر، وبالتالي في حالة عدم وجود عناصر مجاورة (أو كان عرضها يساوي 0) سيتم إستخدام الخاصية flex-basis على أنها قيمة العرض الخاص بالعنصر.

فعلى سبيل المثال، في الفيديو الذي قمت بإرفاقه، ستجد أن الأيقونة لها الخاصية flex-basis: 60px أي أن عرضها سيكون 60px ولكن لأن صندوق النص .text يحتوي على نص كبير (محتوى كثير) فسيقوم بأخذ كل المساحة المطلوبة حتى على حساب عرض الأيقونة (في حالة لم يتم وضع الخاصية flex: 1)، لكن لكي لا يحدث هذا الأمر ييجب أن يتم إضافة الخاصية flex: 1 إلى صندوق النص .text لكي يأخذ المساحة المتبقية فقط. وقد تم شرح هذا الأمر في المقالة التي أرفقتها وتحديدًا في قسم (جعل العناصر مرنة).

وهنا مثال آخر:

<style>
  .parent {
    display: flex;
    width: 471px;
    background-color: #eee;
    color: white;
    font-size: 1.5em;
  }

  .red{
    background-color: red;
    height: 100px;
    flex-basis: 100px;
  }

  .blue{
    background-color: blue;
    height: 100px;
    flex: 1; /* لاحظ وجود الخاصية هنا */
  }
</style>

<div class="parent">
  <div class="red">icon</div>
  <div class="blue">text
    <br>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas eaque blanditiis
  </div>
</div>

وسوف تكون نتيجة الكود السابق، كالتالي:

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

بينما إن قمنا بإزالة الخاصية flex:1 ، كالتالي:

.blue{
  background-color: blue;
  height: 100px;
  /* flex: 1; */
}

فستكون النتيجة كالتالي:

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

بتاريخ 10 ساعات قال سامح أشرف:

في الأساس الخاصية flex-basis تعني العرض الذي سيأخذه كل عنصر (عرض في حالة flex row و ارتفاع في حالة flex column) ثم، المساحة الفارغة الباقية في الحاوي يتم توزيعها اعتمادا على الخاصية flex-grow حتى يتم تحديد العرض النهائي للعناصر، وبالتالي في حالة عدم وجود عناصر مجاورة (أو كان عرضها يساوي 0) سيتم إستخدام الخاصية flex-basis على أنها قيمة العرض الخاص بالعنصر.

فعلى سبيل المثال، في الفيديو الذي قمت بإرفاقه، ستجد أن الأيقونة لها الخاصية flex-basis: 60px أي أن عرضها سيكون 60px ولكن لأن صندوق النص .text يحتوي على نص كبير (محتوى كثير) فسيقوم بأخذ كل المساحة المطلوبة حتى على حساب عرض الأيقونة (في حالة لم يتم وضع الخاصية flex: 1)، لكن لكي لا يحدث هذا الأمر ييجب أن يتم إضافة الخاصية flex: 1 إلى صندوق النص .text لكي يأخذ المساحة المتبقية فقط. وقد تم شرح هذا الأمر في المقالة التي أرفقتها وتحديدًا في قسم (جعل العناصر مرنة).

وهنا مثال آخر:

<style>
  .parent {
    display: flex;
    width: 471px;
    background-color: #eee;
    color: white;
    font-size: 1.5em;
  }

  .red{
    background-color: red;
    height: 100px;
    flex-basis: 100px;
  }

  .blue{
    background-color: blue;
    height: 100px;
    flex: 1; /* لاحظ وجود الخاصية هنا */
  }
</style>

<div class="parent">
  <div class="red">icon</div>
  <div class="blue">text
    <br>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas eaque blanditiis
  </div>
</div>

وسوف تكون نتيجة الكود السابق، كالتالي:

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

بينما إن قمنا بإزالة الخاصية flex:1 ، كالتالي:

.blue{
  background-color: blue;
  height: 100px;
  /* flex: 1; */
}

فستكون النتيجة كالتالي:

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

شكرا جزيلا مرة أخرى !!