تستخدم خاصية 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;
}

جربها بنفسك

معلومات تهمك

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

عدد المشاركات

التالى

CLOSETAG

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

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS flex Align Content CSS