القائمة الرئيسية

الصفحات

شرح css | دورة CSS كاملة | #13 : كيفية عمل قائمة بلغة css - justifier-centent - align-item

CSS justify-content Property



مثال

قم بمحاذاة العناصر المرنة في وسط الحاوية:

div {
  display: flex;
  justify-content: center;
}
جربها بنفسك "

المزيد من الأمثلة "جربها بنفسك" أدناه.


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

تقوم justify-contentالخاصية بمحاذاة عناصر الحاوية المرنة عندما لا تستخدم العناصر كل المساحة المتاحة على المحور الرئيسي (أفقيًا).

نصيحة: استخدم خاصية align-items لمحاذاة العناصر رأسيًا.

بنية CSS

justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;

قيم الملكية

ValueDescriptionPlay it
flex-startDefault value. Items are positioned at the beginning of the containerPlay it »
flex-endItems are positioned at the end of the containerPlay it »
centerItems are positioned in the center of the containerPlay it »
space-betweenItems will have space between themPlay it »
space-aroundItems will have space before, between, and after themPlay it »
space-evenlyItems will have equal space around themPlay it »
initialSets this property to its default value. Read about initialPlay it »
inheritInherits this property from its parent element. Read about inherit

مزيد من الأمثلة

مثال

قم بمحاذاة العناصر المرنة في بداية الحاوية (هذا افتراضي):

div {
  display: flex;
  justify-content: flex-start;
}
جربها بنفسك "

مثال

قم بمحاذاة العناصر المرنة في نهاية الحاوية:

div {
  display: flex;
  justify-content: flex-end;
}
جربها بنفسك "

مثال

عرض العناصر المرنة بمسافة بين السطور:

div {
  display: flex;
  justify-content: space-between;
}
جربها بنفسك "

مثال

عرض العناصر المرنة بمسافة قبل السطور ، وبينها ، وبعدها:

div {
  display: flex;
  justify-content: space-around;
}
جربها بنفسك "

CSS align-items Property

مثال

توسيط المحاذاة لجميع عناصر عنصر <div> المرن:

div {
  display: flex;
  align-items: center;
}
جربها بنفسك "

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

و align-itemsتحدد خاصية المحاذاة الافتراضية للعناصر داخل الحاوية مرنة.

نصيحة: استخدم خاصية align-self لكل عنصر لتجاوز align-itemsالخاصية.

بنية CSS

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

قيم الملكية

ValueDescriptionPlay it
stretchDefault. Items are stretched to fit the containerPlay it »
centerItems are positioned at the center of the containerPlay it »
flex-startItems are positioned at the beginning of the containerPlay it »
flex-endItems are positioned at the end of the containerPlay it »
baselineItems are positioned at the baseline of the containerPlay it »
initialSets this property to its default value. Read about initialPlay it »
inheritInherits this property from its parent element. Read about inherit


تعليقات

التنقل السريع