الفرق بين المراجعتين لصفحة: «CSS/align-self»

من موسوعة حسوب
< CSS
→ التعديل السابق
مرئينص الويكي
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
لا ملخص تعديل
 
(2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:الخاصية <code>align-self</code>}}</noinclude>
<noinclude>{{DISPLAYTITLE:الخاصية <code>align-self</code>}}</noinclude>
الخاصية <code>align-self</code> في CSS تضبط محاذاة عناصر flex في السطر الحالي متجاوزةً قيمة الخاصية <code>[[CSS/align-items|align-items]]</code>، وإذا كانت حاشية <code>[[CSS/margin|margin]]</code> أحد العناصر في المحور المعامد مضبوطةً إلى <code>auto</code> فسيتم تجاهل الخاصية <code>align-self</code>.
الخاصية <code>align-self</code> في CSS تضبط محاذاة عناصر flex في السطر الحالي متجاوزةً قيمة الخاصية <code>[[CSS/align-items|align-items]]</code>، وإذا كانت حاشية <code>[[CSS/margin|margin]]</code> أحد العناصر في المحور المعامد مضبوطةً إلى <code>auto</code> فسيتم تجاهل الخاصية <code>align-self</code>.
== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>auto</code>
|-
! scope="row" |تُطبَّق على
|عناصر flex.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.
|}


لا يمكن تطبيق هذه الخاصية على العناصر الكتلية (block-level boxes) أو خلايا الجداول.<syntaxhighlight lang="css">
لا يمكن تطبيق هذه الخاصية على العناصر الكتلية (block-level boxes) أو خلايا الجداول.<syntaxhighlight lang="css">
سطر 33: سطر 54:
align-self: unset;
align-self: unset;
</syntaxhighlight>
</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>auto</code>
|-
! scope="row" |تُطبَّق على
|عناصر flex.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.
|}


== أمثلة ==
== أمثلة ==
سطر 138: سطر 139:
تقبل الخاصية <code>align-self</code> القيم التالية، لاحظ أنَّنا لم نشرح القيم غير المدعومة إلا في قلّة من المتصفحات لعدم جدوى ذلك.
تقبل الخاصية <code>align-self</code> القيم التالية، لاحظ أنَّنا لم نشرح القيم غير المدعومة إلا في قلّة من المتصفحات لعدم جدوى ذلك.


=== القيمة <code>auto</code> ===
=== <code>auto</code> ===
ستؤدي إلى استخدام قيمة الخاصية <code>[[CSS/align-items|align-items]]</code> للعنصر الأب.
ستؤدي إلى استخدام الخاصية <code>[[CSS/align-items|align-items]]</code> للعنصر الأب.


=== القيمة <code>flex-start</code> ===
=== <code>flex-start</code> ===
ستتم محاذاة العناصر بجوار بعضها بدءًا من بداية المحور الثانوي لحاوية flex (أي من أعلى العنصر في أغلبية الحالات).
ستتم محاذاة العناصر بجوار بعضها بدءًا من بداية المحور الثانوي لحاوية flex (أي من أعلى العنصر في أغلبية الحالات).


=== القيمة <code>flex-end</code> ===
=== <code>flex-end</code> ===
ستتم محاذاة العناصر بجوار بعضها بدءًا من نهاية المحور الثانوي لحاوية flex (أي من أسفل العنصر في أغلبية الحالات).
ستتم محاذاة العناصر بجوار بعضها بدءًا من نهاية المحور الثانوي لحاوية flex (أي من أسفل العنصر في أغلبية الحالات).


=== القيمة <code>center</code> ===
=== <code>center</code> ===
ستتم محاذاة العناصر بجوار بعضها بدءًا من وسط المحور الثانوي لحاوية flex.
ستتم محاذاة العناصر بجوار بعضها بدءًا من وسط المحور الثانوي لحاوية flex.


=== القيمة <code>stretch</code> ===
=== <code>stretch</code> ===
إذا كانت أبعاد العناصر الموجودة داخل الحاوية على المحور الثانوي أقل من أبعاد الحاوية، فستزيد أبعاد العناصر زيادةً متساويةً لكن مع احترام القيود المفروضة عبر خاصيات <code>[[CSS/max-height|max-height]]</code> أو <code>[[CSS/max-width|max-width]]</code> (أو ما شابه ذلك)، وبالتالي ستكون أبعاد العناصر الموجودة داخل الحاوية تساوي بُعد الحاوية على المحور الثانوي.
إذا كانت أبعاد العناصر الموجودة داخل الحاوية على المحور الثانوي أقل من أبعاد الحاوية، فستزيد أبعاد العناصر زيادةً متساويةً لكن مع احترام القيود المفروضة عبر خاصيات <code>[[CSS/max-height|max-height]]</code> أو <code>[[CSS/max-width|max-width]]</code> (أو ما شابه ذلك)، وبالتالي ستكون أبعاد العناصر الموجودة داخل الحاوية تساوي بُعد الحاوية على المحور الثانوي.


سطر 158: سطر 159:
</syntaxhighlight>
</syntaxhighlight>


== مصادر ومواصفات ==
==  انظر أيضًا ==
*صفحة الخاصيات الفرعية التي تضبطها الخاصية align وهي:<code>[[CSS/align-content|align-content]]</code>، و <code>[[CSS/align-items|align-items]]</code>.
*صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيف يجب أن يتموضع العنصر في المستند.
*صفحة كل من الخاصيات <code>[[CSS/width|width]]</code>، و <code>[[CSS/bottom|height]]</code> المسؤولة عن تحديد أبعاد العنصر.
==مصادر ومواصفات==
* مسودة [https://drafts.csswg.org/css-align/#propdef-align-self CSS Box Alignment Module Level 3]، أضافت هذه المسودة القيم <code>baseline</code> و <code>first baseline</code> و <code>last baseline</code> و <code>self-start</code> و <code>self-end</code> و <code>start</code> و <code>end</code> و <code>left</code> و <code>right</code> و <code>unsafe</code> و <code>safe</code>؛ لكن دعم هذه القيم ما يزال ضعيفًا.
* مسودة [https://drafts.csswg.org/css-align/#propdef-align-self CSS Box Alignment Module Level 3]، أضافت هذه المسودة القيم <code>baseline</code> و <code>first baseline</code> و <code>last baseline</code> و <code>self-start</code> و <code>self-end</code> و <code>start</code> و <code>end</code> و <code>left</code> و <code>right</code> و <code>unsafe</code> و <code>safe</code>؛ لكن دعم هذه القيم ما يزال ضعيفًا.
* مواصفة [https://drafts.csswg.org/css-flexbox-1/#propdef-align-self CSS Flexible Box Layout Module].  
* مواصفة [https://drafts.csswg.org/css-flexbox-1/#propdef-align-self CSS Flexible Box Layout Module].  

المراجعة الحالية بتاريخ 19:49، 24 يوليو 2018

الخاصية align-self في CSS تضبط محاذاة عناصر flex في السطر الحالي متجاوزةً قيمة الخاصية align-items، وإذا كانت حاشية margin أحد العناصر في المحور المعامد مضبوطةً إلى auto فسيتم تجاهل الخاصية align-self.

بطاقة الخاصية

القيمة الابتدائية auto
تُطبَّق على عناصر flex.
قابلة للوراثة لا
قابلة للتحريك لا
القيمة المحسوبة كما حُدِّدَت.

لا يمكن تطبيق هذه الخاصية على العناصر الكتلية (block-level boxes) أو خلايا الجداول.

/* الكلمات المحجوزة */ 
align-self: auto; 
align-self: normal; 

/* المحاذاة المكانية */
align-self: center;
align-self: start;
align-self: end;
align-self: self-start;
align-self: self-end;
align-self: flex-start;
align-self: flex-end;
align-self: left;
align-self: right;

/* محاذاة خط الأساس */ 
align-self: baseline; 
align-self: first baseline; 
align-self: last baseline; 
align-self: stretch;

/* التحكم بالفائض من المحتوى */
align-self: safe center; 
align-self: unsafe center; 

/* القيم العامة */
align-self: inherit; 
align-self: initial; 
align-self: unset;

أمثلة

لاحظ كيف حددنا موضع آخر عنصر <div> باستخدام الخاصية align-self في المثال الآتي: 

<div>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</div>

شيفرة CSS: 

div {
  display: flex;
  align-items: center;
  height: 120px;
  background-color: #f8f9fa;
  border: 1px solid #eaecf0;
}

div > div {
  height: 60px;
  background-color: skyblue;
  margin: 5px;
  padding: 0.25em;
}

div:nth-child(3) {
  align-self: flex-end;
  background-color: salmon;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 29.0 20.0 11 12.5 غير مدعومة
start و end غير مدعومة مدعومة غير مدعومة غير مدعومة ؟
left و right غير مدعومة 52.0 غير مدعومة غير مدعومة ؟
baseline 57.0 مدعومة غير مدعومة 44.0 ؟
first baseline و last baseline غير مدعومة 52.0 غير مدعومة غير مدعومة ؟
stretch 57.0 52.0 غير مدعومة 44.0 ؟

الإصدارات القديمة من بعض المتصفحات (مثل Chrome و IE و Safari) كانت تدعم flexbox لكن مع استخدام سابقة (-webkit- أو -ms-).

البنية العامة

تقبل الخاصية align-self القيم التالية، لاحظ أنَّنا لم نشرح القيم غير المدعومة إلا في قلّة من المتصفحات لعدم جدوى ذلك.

auto

ستؤدي إلى استخدام الخاصية align-items للعنصر الأب.

flex-start

ستتم محاذاة العناصر بجوار بعضها بدءًا من بداية المحور الثانوي لحاوية flex (أي من أعلى العنصر في أغلبية الحالات).

flex-end

ستتم محاذاة العناصر بجوار بعضها بدءًا من نهاية المحور الثانوي لحاوية flex (أي من أسفل العنصر في أغلبية الحالات).

center

ستتم محاذاة العناصر بجوار بعضها بدءًا من وسط المحور الثانوي لحاوية flex.

stretch

إذا كانت أبعاد العناصر الموجودة داخل الحاوية على المحور الثانوي أقل من أبعاد الحاوية، فستزيد أبعاد العناصر زيادةً متساويةً لكن مع احترام القيود المفروضة عبر خاصيات max-height أو max-width (أو ما شابه ذلك)، وبالتالي ستكون أبعاد العناصر الموجودة داخل الحاوية تساوي بُعد الحاوية على المحور الثانوي.

البنية الرسمية

align-self: auto | flex-start | flex-end | center | stretch;

 انظر أيضًا

  • صفحة الخاصيات الفرعية التي تضبطها الخاصية align وهي:align-content، و align-items.
  • صفحة الخاصية position التي تصف كيف يجب أن يتموضع العنصر في المستند.
  • صفحة كل من الخاصيات width، و height المسؤولة عن تحديد أبعاد العنصر.

مصادر ومواصفات

  • مسودة CSS Box Alignment Module Level 3، أضافت هذه المسودة القيم baseline و first baseline و last baseline و self-start و self-end و start و end و left و right و unsafe و safe؛ لكن دعم هذه القيم ما يزال ضعيفًا.
  • مواصفة CSS Flexible Box Layout Module.
مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/align-self&oldid=13573»