CSS

CSS flex Align Content
خاصية align-content مع flex في لغة CSS

سوف تتعلم في هذا الدرس خاصية  align-content في لغة CSS ووظيفيتها وكيفية إستخدامها مع حاويات flex box وجميع القيم الخاصة بها.

التاريخ

06 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1325

المواضيع

24
الشروحات chevron_left CSS flex Align Content chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS flex Align Content
خاصية align-content مع flex في لغة CSS

</> CSS flex Align Content
خاصية align-content مع flex في لغة CSS

تستخدم خاصية align-content بجانب خاصية flex-wrap في لغة CSS لتقوم بعمل مسافات بين العناصر وحولها داخل حاوية flex box, فهي تشبهة تماماً خاصية justify-content لكن بشكل عمودي وليس أفقي.


قيم خاصية align-content في لغة CSS:

  • stretch القيمة الأفتراضية وهي تقسم المسافات المتبقية من الحاوية بين العناصر علي هيئية مسافات فارغة حول العناصر وتبدأ المسافات بعد أول عنصر في الحاوية.
  • center يتم عرض العناصر في منتصف الحاوية ويتم تقسيم المساحات المتبقية أعلي وأسفل العناصر.
  • flex-start يتم عرض العناصر في بداية الحاوية عمودي من أعلي إذا كانت غير عكسية عمودياً.
  • flex-end يتم عرض العناصر في نهاية الحاوية عمودي  من أسفل إذا كانت غير عكسية عمودياً.
  • space-between يتم عمل مساحات فارغة متساوية بين العناصر ولا يكون هناك مساحات قبل أول عنصر وبعد أخر عنصر.
  • space-around يتم توزيع المسافات بالتساوي في الحاوية، مع وجود مسافات نصف الحجم على كلا الطرفين بالأعلي والأسفل.
  • space-evenly يتم توزيع المسافات بالتساوي في الحاوية، مع وجود مسافات متساوية الحجم على كلا الطرفين بالأعلي والأسفل.
CSS align-content syntax

طريقة كتابة خاصية align-content في لغة CSS.

align-content:value;
CSS align-content values

قيم خاصية align-content في لغة CSS.

align-content:stretch|center|flex-start|flex-end|space-between|space-around|space-evenly|initial|inherit;
هام
يجب أن تلاحظ خاصية align-content تعمل بجانب خاصية flex-wrap إذا كانت العناصر عمودياً داخل الحاوية.

</> CSS flex align content stretch
خاصية align-content مع القيمة stretch في لغة CSS

تستخدم خاصية align-content مع القيمة stretch في لغة CSS لتقسيم المسافات المتبقية من الحاوية بين العناصر علي هيئية مسافات فارغة حول العناصر وتبدأ المسافات بعد أول عنصر في الحاوية وهي القيمة الأفتراضية.

CSS flex align content stretch

خاصية align-content مع القيمة stretch في لغة CSS.

.flex-container
{
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:200px;
  height:400px;
  align-content:stretch;
}

</> CSS flex align content center
خاصية align-content مع القيمة center في لغة CSS

تستخدم خاصية align-content مع القيمة center في لغة CSS ليتم عرض العناصر في منتصف الحاوية ويتم تقسيم المساحات المتبقية أعلي وأسفل العناصر بالتساوي.

CSS flex align content center

خاصية align-content مع القيمة center في لغة CSS.

.flex-container
{
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:200px;
  height:400px;
  align-content:center;
}

</> CSS flex align content flex start
خاصية align-content مع القيمة flex-start في لغة CSS

تستخدم خاصية align-content مع القيمة flex-start في لغة CSS ليتم عرض العناصر في بداية الحاوية عمودي من أعلي إذا كانت غير عكسية عمودياً.

CSS flex align content flex start

خاصية align-content مع القيمة flex-start في لغة CSS.

.flex-container
{
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:200px;
  height:400px;
  align-content:flex-start;
}

</> CSS flex align content flex end
خاصية align-content مع القيمة flex-end في لغة CSS

تستخدم خاصية align-content مع القيمة flex-end في لغة CSS ليتم عرض العناصر في نهاية الحاوية عمودي  من أسفل إذا كانت غير عكسية عمودياً.

CSS flex align content flex end

خاصية align-content مع القيمة flex-end في لغة CSS.

.flex-container
{
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:200px;
  height:400px;
  align-content:flex-end;
}

</> CSS flex align content space between
خاصية align-content مع القيمة space-between في لغة CSS

تستخدم خاصية align-content مع القيمة space-between في لغة CSS ليتم عمل مساحات فارغة متساوية بين العناصر ولا يكون هناك مساحات قبل أول عنصر وبعد أخر عنصر.

CSS flex align content space between

خاصية align-content مع القيمة space-between في لغة CSS.

.flex-container
{
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:200px;
  height:400px;
  align-content:space-between;
}

</> CSS flex align content space around
خاصية align-content مع القيمة space-around في لغة CSS

تستخدم خاصية align-content مع القيمة space-around في لغة CSS ليتم توزيع المسافات بالتساوي في الحاوية، مع وجود مسافات نصف الحجم على كلا الطرفين بالأعلي والأسفل.

CSS flex align content space around

خاصية align-content مع القيمة space-around في لغة CSS.

.flex-container
{
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:200px;
  height:400px;
  align-content:space-around;
}

</> CSS flex align content space evenly
خاصية align-content مع القيمة space-evenly في لغة CSS

تستخدم خاصية align-content مع القيمة space-evenly في لغة CSS ليتم يتم توزيع المسافات بالتساوي في الحاوية، مع وجود مسافات متساوية الحجم على كلا الطرفين بالأعلي والأسفل.

CSS flex align content space evenly

خاصية align-content مع القيمة space-evenly في لغة CSS.

.flex-container
{
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  background-color: DodgerBlue;
  border:orange dashed 2px;
  width:200px;
  height:400px;
  align-content:space-evenly;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.