Flexbox CSS

1
2
3
4
5
6
7
8

تجربة شخصية

وحدة تخطيط Flexbox CSS

قبل إصدار وحدة تخطيط Flexbox (الظهور)، كانت هناك أنماط تخطيط متاحة من أربعة أنماط هي:

  • كتلة (Block)، لتحديد جزء من صفحة الويب (القسم)
  • داخلي (Inline)، لتحديد النص
  • الجدول، لبيانات جدول ثنائي الأبعاد
  • التوضيح، لتحديد موقع العنصر بشكل واضح

وحدة التخطيط Flexbox، تتيح تصميم بنية التخطيط التفاعلية التكيفية بسهولة دون استخدام الدفع أو التوضيح.

دعم المتصفح

جميع المتصفحات الحديثة تدعمها flexbox خصائص.

29.0 11.0 22.0 10 48

عناصر Flexbox

لبدء استخدام نموذج Flexbox، يجب عليك أولاً تحديد وحدة Flex.

1
2
3

تُمثل العناصر في الأعلى حاوية منسوبة تحتوي على ثلاثة عناصر منسوبة (المنطقة الزرقاء).

مثال

حاوية تحتوي على ثلاثة عناصر منسوبة:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

تجربة شخصية

العنصر الأب (الحاوية)

من خلال وضع display تُعين الخاصية على flex،حيث ستصبح الحاوية قابلة للتمدد:

1
2
3

مثال

.flex-container {
  display: flex;
}

تجربة شخصية

هذه هي خاصيات حاوية اللياقة:

خصائص flex-direction

flex-direction تحدد الخاصية التوجيه الذي سيتم فيه ت堆ف العناصر المنسوبة في الحاوية.

1
2
3

مثال

column القيمة تضبط التوجيه العمودي للعناصر المنسوبة (من الأعلى إلى الأسفل):

.flex-container {
  display: flex;
  flex-direction: column;
}

تجربة شخصية

مثال

column-reverse القيمة ت堆ف العناصر المنسوبة عمودياً (من الأسفل إلى الأعلى):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

تجربة شخصية

مثال

row القيمة ت堆ف العناصر المنسوبة أفقياً (من اليسار إلى اليمين):

.flex-container {
  display: flex;
  flex-direction: row;
}

تجربة شخصية

مثال

row-reverse القيمة ت堆ف العناصر المنسوبة أفقياً (من اليمين إلى اليسار):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

تجربة شخصية

خصائص flex-wrap

flex-wrap تقرر الخاصية ما إذا كان يجب تغيير سطر العناصر المنسوبة.

يحتوي هذا المثال على 12 عنصر منسوب ليعرض خاصية flex-wrap بشكل أفضل.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

مثال

wrap القيمة تقرر تغيير سطر العناصر المنسوبة إذا لزم الأمر:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

تجربة شخصية

مثال

nowrap القيمة تقرر عدم تغيير سطر العناصر المنسوبة (القيمة الافتراضية):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

تجربة شخصية

مثال

wrap-reverse القيمة تقرر، إذا لزم الأمر، أن يتم تغيير سطر العناصر المنسوبة في العكس:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

تجربة شخصية

خصائص flex-flow

flex-flow الخاصية هي اختصار لتحديد الخاصيتين flex-direction و flex-wrap في نفس الوقت.

مثال

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

تجربة شخصية

خصائص justify-content

justify-content يستخدم الخاصية لتحديد التوجيه للعناصر المنسوبة:

1
2
3

مثال

center القيمة تضع العناصر المنسوبة في منتصف الحاوية:

.flex-container {
  display: flex;
  justify-content: center;
}

تجربة شخصية

مثال

flex-start القيمة تضع العناصر المنسوبة في بداية الحاوية (القيمة الافتراضية):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

تجربة شخصية

مثال

flex-end القيمة تضع العناصر المنسوبة في نهاية الحاوية:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

تجربة شخصية

مثال

space-around القيمة تظهر العناصر المنسوبة مع مسافات قبل وبعد وبين السطور:

.flex-container {
  display: flex;
  justify-content: space-around;
}

تجربة شخصية

مثال

space-between القيمة تظهر العناصر المنسوبة مع مسافات بين السطور:

.flex-container {
  display: flex;
  justify-content: space-between;
}

تجربة شخصية

خصائص align-items

align-items يستخدم الخاصية لتحديد التوجيه العمودي للعناصر المنسوبة.

1
2
3

في هذه الأمثلة، نستخدم حاوية بعلو 200 بكسل من أجل عرض خاصية align-items بشكل أفضل.

مثال

center القيمة تجعل مشاريع flex تتوازى في منتصف الصندوق:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

تجربة شخصية

مثال

flex-start القيمة تجعل مشاريع flex تتوازى في أعلى الصندوق:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

تجربة شخصية

مثال

flex-end القيمة تجعل مشاريع المروجة تتوازى في أسفل الصندوق:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

تجربة شخصية

مثال

stretch القيمة تجعل مشاريع flex تمد لتملأ الصندوق (القيمة الافتراضية):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

تجربة شخصية

مثال

baseline القيمة تجعل مشاريع flex تتوازى بناءً على الأساس النصي:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

تجربة شخصية

ملاحظة:في هذا المثال، نستخدم حجمًا مختلفًا لـ font-size لتوضيح أن المشاريع قد تم توازيها بناءً على الأساس النصي:

1
2
3
4

خصائص align-content

align-content الخاصية تستخدم لتوازي خطوط المروجة.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

في هذه الأمثلة، نستخدم صندوقًا بارتفاع 600 بكسل، ونضبط خاصية flex-wrap إلى wrap لتوضيح خاصية align-content بشكل أفضل.

مثال

space-between القيمة تظهر خطوط المروجة مع مسافات متساوية بينها:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

تجربة شخصية

مثال

space-around القيمة تظهر خطوط المروجة مدمجة مع مسافات قبلها وبعدها:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

تجربة شخصية

مثال

stretch القيمة تمد خطوط المروجة لتملأ المساحة المتبقية (القيمة الافتراضية):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

تجربة شخصية

مثال

center القيمة تظهر خطوط المروجة في منتصف الصندوق:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

تجربة شخصية

مثال

flex-start القيمة تظهر خطوط المروجة في بداية الصندوق:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

تجربة شخصية

مثال

flex-end القيمة تظهر خطوط المروجة في نهاية الصندوق:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

تجربة شخصية

التوزيع المثالي

في المثال التالي، سنحل مشكلة نمط شائعة جدًا: التوزيع المثالي.

الحل: قم بتحديد justify-content و align-items إذا تم تعيين الخاصية إلى الوسط، فإن مشاريع flex ستعمل بشكل مثالي في الوسط:

مثال

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

تجربة شخصية

عناصر (المشاريع)

عناصر المباشرين للوحدة المروجة (flex) تصبح مشاريع مروجة تلقائيًا.

1
2
3
4

العناصر أعلاه تمثل أربعة عناصر مرونة زرقاء داخل وعاء مرونة رمادي.

مثال

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

تجربة شخصية

خصائص المرونة المستخدمة في العناصر المرونة هي:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

خصائص order

order تحديد ترتيب العنصر المرونة.

1
2
3
4

ليس من الضروري أن يكون العنصر المرونة الأول في الكود هو العنصر الأول في التركيب.

order يجب أن يكون القيمة عددًا، القيمة الافتراضية هي 0.

مثال

order يمكن تغيير ترتيب العناصر المرونة باستخدام هذه الخاصية.

<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

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

يجب أن يكون هذا القيمة عددًا، القيمة الافتراضية هي 0.

مثال

لا تدع العنصر الثالث من المرونة ينكمش بنفس المقدار كالعناصر المرونة الأخرى:

<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

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 خصائص flex-grow، flex-shrink و flex-basis هي اختصارات لخصائص flex.

مثال

جعل العنصر الثالث من المرونة غير قابل للنمو (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-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>

تجربة شخصية

مكتبة صور مرونة باستخدام Flexbox

استخدام Flexbox لإنشاء مكتبة صور مرونة تختلف بين أربعة صور، إثنين من الصور أو صورة كاملة بناءً على حجم الشاشة:

تجربة شخصية

موقع إنترنت مرونقي باستخدام Flexbox

استخدام Flexbox لإنشاء موقع إنترنت مرونقي يحتوي على قائمة توجيهية إليكترونية و محتوى إليكتروني:

تجربة شخصية

خصائص CSS Flexbox

يُظهر الجدول أدناه خصائص CSS التي تستخدم مع flexbox:

خصائص وصف
display تحديد نوع الصندوق المستخدم للعناصر الـ HTML.
flex-direction تحديد اتجاه العناصر الإليكترونية داخل صندوق الإليكترونيات.
justify-content إزاحة العناصر الإليكترونية بشكل أفقي عندما لا تستخدم العناصر الإليكترونية جميع المساحات المتاحة على المحور الرئيسي.
align-items إزاحة العناصر الإليكترونية بشكل عمودي عندما لا تستخدم العناصر الإليكترونية جميع المساحات المتاحة على المحور الرئيسي.
flex-wrap تحديد ما إذا كان يجب تغيير سطر العناصر الإليكترونية، إذا لم يكن هناك مساحة كافية في خط flex لتشغيلها.
align-content تعديل سلوك خاصية flex-wrap. مثل align-items، ولكنها لا تقوم بإزاحة العناصر الإليكترونية، بل تقوم بإزاحة خط flex.
flex-flow خصائص القصيرات الخاصة ب flex-direction و flex-wrap.
order تحديد ترتيب العناصر الإليكترونية بالنسبة للعناصر الأخرى في نفس القالب.
align-self للأغراض الإليكترونية. تغطي خاصية align-items الخاصة بالقالب.
flex flex-grow،flex-shrink و flex-basis خصائص القصيرات.