عناصر CSS المرنة
العناصر الفرعية (العناصر)
تصبح العناصر الفرعية المباشرة للحاوية المرنة عناصر مرنة (مرنة) تلقائيًا.
1
2
3
4
يمثل العنصر أعلاه أربعة عناصر زرقاء مرنة داخل حاوية مرنة رمادية.
مثال
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
خصائص العنصر المرن هي:
خاصية الطلب
تحدد الخاصية ترتيب orderالعناصر المرنة.
1
2
3
4
ليس من الضروري أن يظهر العنصر المرن الأول في الكود كعنصر أول في التخطيط.
يجب أن تكون قيمة الطلب رقمًا ، والقيمة الافتراضية هي 0.
مثال
يمكن لخاصية الأمر تغيير ترتيب العناصر المرنة:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
الملكية المرنة
تحدد الخاصية مقدار زيادة العنصر flex-growالمرن بالنسبة لبقية العناصر المرنة.
1
2
3
يجب أن تكون القيمة رقمًا ، والقيمة الافتراضية هي 0.
مثال
اجعل العنصر المرن الثالث ينمو ثماني مرات أسرع من العناصر المرنة الأخرى:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
خاصية flex-shrink
تحدد الخاصية مقدار تقلص العنصر flex-shrinkالمرن بالنسبة لبقية العناصر المرنة.
1
2
3
4
5
6
7
8
9
10
يجب أن تكون القيمة رقمًا ، والقيمة الافتراضية هي 1.
مثال
لا تدع العنصر المرن الثالث يتقلص مثل العناصر المرنة الأخرى:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
خاصية الأساس المرن
تحدد الخاصية الطول flex-basisالأولي للعنصر المرن.
1
2
3
4
مثال
اضبط الطول الأولي للعنصر المرن الثالث على 200 بكسل:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
خاصية المرن
الخاصية هي flexخاصية مختصرة لـ
flex-grow، flex-shrinkو flex-basisProperties.
مثال
اجعل العنصر المرن الثالث غير قابل للنمو (0) ، وغير قابل للتقلص (0) ، وبطول أولي يبلغ 200 بكسل:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
خاصية محاذاة الذات
تحدد الخاصية محاذاة العنصر align-selfالمحدد داخل الحاوية المرنة.
align-self تتجاوز الخاصية المحاذاة الافتراضية التي تم تعيينها بواسطة خاصية الحاوية align-items.
1
2
3
4
في هذه الأمثلة ، نستخدم حاوية بارتفاع 200 بكسل لتوضيح
align-selfالخاصية بشكل أفضل:
مثال
قم بمحاذاة العنصر المرن الثالث في منتصف الحاوية:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
مثال
قم بمحاذاة العنصر المرن الثاني أعلى الحاوية ، والعنصر المرن الثالث في أسفل الحاوية:
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
خصائص عناصر CSS Flexbox
يسرد الجدول التالي جميع خصائص CSS Flexbox Items:
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |