انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 77
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
8
الأمثلة
9
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,620
محتوى الدرس
في هذا الدرس 8تصفّح المواضيع

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.

HTML 
align-content:value;

CSS align-content values

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

HTML 
align-content:stretch|center|flex-start|flex-end|space-between|space-around|space-evenly|initial|inherit;

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

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

جرّب بنفسك

CSS flex align content stretch

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

HTML 
.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.

HTML 
.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.

HTML 
.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.

HTML 
.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.

HTML 
.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.

HTML 
.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.

HTML 
.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;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…