الفرق بين المراجعتين لصفحة: «CSS/align-self»
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| سطر 161: | سطر 161: | ||
* مسودة [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]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Flexbox]] | [[تصنيف:CSS Flexbox|{{SUBPAGENAME}}]] | ||
مراجعة 15:35، 28 يناير 2018
الخاصية align-self في CSS تضبط محاذاة عناصر flex في السطر الحالي متجاوزةً قيمة الخاصية align-items، وإذا كانت حاشية margin أحد العناصر في المحور المعامد مضبوطةً إلى auto فسيتم تجاهل الخاصية align-self.
لا يمكن تطبيق هذه الخاصية على العناصر الكتلية (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;
| القيمة الابتدائية | auto
|
|---|---|
| تُطبَّق على | عناصر flex. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
أمثلة
لاحظ كيف حددنا موضع آخر عنصر <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;
مصادر ومواصفات
- مسودة 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.