Flex Box

CSS Flexbox Layout Module

يُعد CSS Flexbox أحد أدوات تصميم الويب الحديثة التي تستخدم لتحقيق ترتيب أفضل للعناصر داخل صفحة الويب. يعمل تقريبًا على تحسين تنسيق العناصر على الشاشة وتوزيعها بطريقة أكثر سهولة ومرونة.

ماذا كنا نستخدم قبل Flexbox

• خاصية Block تستخدم لوضع للاقسام في موقعك
• خاصية Inline تستخدم للنصوص
• خاصية table تستخدم اذا اردت وضع البيانات في اكثر من عمود
• ال Positioned للتحكم في موضع اي عنصر

ما هي css flex-box

خاصية flex-box في CSS تستخدم لتحديد توزيع العناصر داخل العنصر الأب، وتمكن المصممين من إنشاء تصاميم مرنة ومتجاوبة وتحقيق توزيع شامل ودقيق للعناصر.

تعمل خاصية flex-box بتحويل العنصر الأب إلى عنصر مرن يحتوي على عناصر داخلية، وتمكن المصممين من تحديد توزيع العناصر داخل العنصر الأب بشكل دقيق ومرن.

تتضمن خاصية flex-box العديد من الخصائص، بما في ذلك:

• display: flex;: يحول العنصر الأب إلى عنصر مرن.
• flex-direction: row/column;: تحدد اتجاه توزيع العناصر داخل العنصر الأب، سواء أفقياً أو عمودياً.
• justify-content: center/flex-start/flex-end/space-between/space-around;: تحدد توزيع العناصر في المساحة الأفقية أو العمودية، وتسمح بتحديد مسافات متساوية بين العناصر.
• align-items: center/flex-start/flex-end/stretch/baseline;: تحدد توزيع العناصر في المساحة العمودية، وتسمح بتحديد مسافات متساوية بين العناصر.
• flex-wrap: wrap/nowrap;: يحدد ما إذا كانت العناصر تلتف على عدة أسطر أو تبقى على سطر واحد.
• flex-grow: number;: يحدد مساحة العنصر الفارغة التي يمكن للعناصر الأخرى الانتشار فيها.
• flex-shrink: number;: يحدد القدرة على تصغير حجم العناصر بهدف الاحتفاظ بالمساحة الكلية.
• flex-basis: length;: يحدد حجم العنصر الأساسي قبل توزيع المساحة الزائدة.

وإليك بعض الأمثلة على استخدام flex-box في CSS:

/* تحديد اتجاه توزيع العناصر */
display: flex;
flex-direction: row;

/* تحديد توزيع العناصر في المساحة الأفقية */
justify-content: space-between;

/* تحديد توزيع العناصر في المساحة العمودية */
align-items: center;

/* تحديد ما إذا كانت العناصر تلتف على عدة أسطر */
flex-wrap: wrap;

/* تحديد مساحة العنصر الفارغة التي يمكن للعناصر الأخرى الانتشار فيها */
flex-grow: 1;

يمكن استخدام خاصية flex-box مع العناصر المختلفة في HTML، مثل النص والصور والأشكال والفيديو وغيرها، لتحديد توزيعها وتحقيق التأثيرات المرغوبة. يمكن دمج عدة

الفرق بين display:flex و بين display:block

خاصية display: flex وdisplay: block في CSS تستخدمان لتحديد كيفية عرض العناصر في الصفحة، ولكنهما تختلفان في طريقة تعاملهما مع توزيع العناصر داخل العنصر الأب.

• display: block: تجعل العنصر يشغل المساحة الكاملة المتاحة في العرض، ويتم عرض العناصر بشكل عمودي، أي أن كل عنصر يظهر في سطر واحد تحت الآخر.
• display: flex: تحول العنصر الأب إلى عنصر مرن (flex container) يحتوي على عناصر داخلية (flex items)، ويتم توزيع هذه العناصر بشكل مرن ومتجاوب.

يمكن استخدام display: block لعرض العناصر في سطر واحد تحت الآخر، والتحكم في العناصر بسهولة باستخدام خصائص أخرى مثل width, height, margin, و padding. ومن الممكن أيضًا تعطيل خاصية float الافتراضية للعناصر باستخدام display: block.

بالمقابل، يمكن استخدام display: flex لتحقيق توزيع مرن ومتجاوب للعناصر داخل العنصر الأب، وتحديد مسافات متساوية بين العناصر وتحديد اتجاه التوزيع والمسافات بين العناصر بشكل دقيق. يمكن استخدام خاصية flex مع العناصر الداخلية لتحديد توزيعها بشكل مرن ومتجاوب فيما بينها.

وإليك بعض الأمثلة للتوضيح:

/* استخدام display: block */
.container {
  display: block;
}

.item {
  width: 100%;
  margin-bottom: 10px;
}

/* استخدام display: flex */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  margin-right: 10px;
}

في هذا المثال، يتم استخدام display: block لعرض العناصر في سطر واحد تحت الآخر، ويتم استخدام display: flex لتحقيق توزيع مرن ومتجاوب للعناصر داخل العنصر الأب، وتحديد مسافات متساوية بين العناصر وتحديد اتجاه التوزيع والمسافات بين العناصر بشكل دقيق.

شرح خاصية flex-direction

خاصية flex-direction هي خاصية في CSS تحدد اتجاه توزيع العناصر داخل العنصر الأب الذي لديه خاصية display: flex. يمكن استخدام flex-direction لتحديد اتجاه توزيع العناصر سواء أفقيًا أو عموديًا.

تتضمن القيم الأربعة الممكنة لخاصية flex-direction هي:

• row: يتم توزيع العناصر في اتجاه أفقي من اليسار إلى اليمين. هذه هي القيمة الافتراضية.
• row-reverse: يتم توزيع العناصر في اتجاه أفقي من اليمين إلى اليسار.
• column: يتم توزيع العناصر في اتجاه عمودي من الأعلى إلى الأسفل.
• column-reverse: يتم توزيع العناصر في اتجاه عمودي من الأسفل إلى الأعلى.

يمكن تحديد خاصية flex-direction باستخدام CSS، على سبيل المثال:

/* توزيع العناصر في اتجاه أفقي من اليسار إلى اليمين */
.container {
  display: flex;
  flex-direction: row;
}

/* توزيع العناصر في اتجاه أفقي من اليمين إلى اليسار */
.container {
  display: flex;
  flex-direction: row-reverse;
}

/* توزيع العناصر في اتجاه عمودي من الأعلى إلى الأسفل */
.container {
  display: flex;
  flex-direction: column;
}

/* توزيع العناصر في اتجاه عمودي من الأسفل إلى الأعلى */
.container {
  display: flex;
  flex-direction: column-reverse;
}

تستخدم خاصية flex-direction عادة لتغيير اتجاه توزيع العناصر داخل العنصر الأب، وذلك لتحسين تصميم المواقع وتحسين تجربة المستخدم.

شرح خاصية flex-wrap

خاصية flex-wrap هي خاصية في CSS تحدد ما إذا كان يجب للعناصر الداخلية في العنصر الأب الذي لديه خاصية display: flex أن تلتف على أكثر من سطر أم يجب أن تظل على سطر واحد. تستخدم هذه الخاصية للتحكم في توزيع العناصر على الشاشة وتحسين تجربة المستخدم في حالة وجود عناصر كثيرة.

تتضمن القيم الثلاثة الممكنة لخاصية flex-wrap هي:

• nowrap: يجب على العناصر الداخلية البقاء على سطر واحد وعدم اللف.
• wrap: يجب على العناصر الداخلية اللف على عدة أسطر إذا تجاوزت المساحة المتاحة.
• wrap-reverse: يجب على العناصر الداخلية اللف على عدة أسطر إذا تجاوزت المساحة المتاحة، ولكن بالترتيب العكسي.

يمكن تحديد خاصية flex-wrap باستخدام CSS، على سبيل المثال:

/* يجب على العناصر الداخلية البقاء على سطر واحد */
.container {
  display: flex;
  flex-wrap: nowrap;
}

/* يجب على العناصر الداخلية اللف على عدة أسطر */
.container {
  display: flex;
  flex-wrap: wrap;
}

/* يجب على العناصر الداخلية اللف على عدة أسطر بالترتيب العكسي */
.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

تستخدم خاصية flex-wrap عادة لتحسين تصميم المواقع وتحسين تجربة المستخدم عند وجود عدد كبير من العناصر الداخلية في العنصر الأب. ويمكن استخدامها بشكل مشترك مع خاصية flex-direction لتحقيق توزيع مثالي للعناصر.

شرح خاصية align-items

خاصية align-items هي خاصية في CSS تحدد توزيع العناصر داخل العنصر الأب الذي لديه خاصية display: flex في المساحة العمودية. تستخدم هذه الخاصية لتحديد موضع العناصر داخل العنصر الأب بشكل دقيق.

تتضمن القيم الخمسة الممكنة لخاصية align-items هي:

• stretch: تمدد العناصر لملء المساحة المتاحة عمودياً (هذه القيمة الافتراضية).
• flex-start: تحديد موضع العناصر بالأعلى من المساحة المتاحة.
• flex-end: تحديد موضع العناصر بالأسفل من المساحة المتاحة.
• center: تحديد موضع العناصر في المنتصف العمودي للمساحة المتاحة.
• baseline: تحديد موضع العناصر بناءً على خط الأساس الخاص بالنص في العنصر الأب.

يمكن تحديد خاصية align-items باستخدام CSS، على سبيل المثال:

/* تحديد موضع العناصر بالأعلى من المساحة المتاحة */
.container {
  display: flex;
  align-items: flex-start;
}

/* تحديد موضع العناصر بالأسفل من المساحة المتاحة */
.container {
  display: flex;
  align-items: flex-end;
}

/* تحديد موضع العناصر في المنتصف العمودي للمساحة المتاحة */
.container {
  display: flex;
  align-items: center;
}

/* تحديد موضع العناصر بناءً على خط الأساس الخاص بالنص في العنصر الأب */
.container {
  display: flex;
  align-items: baseline;
}

تستخدم خاصية align-items عادة لتحسين توزيع العناصر داخل العنصر الأب وتحديد موضع العناصر بدقة. ويمكن استخدامها بشكل مشترك مع خاصية justify-content لتحقيق توزيع مثالي للعناصر.

شرح خاصية justify-content

خاصية justify-content هي خاصية في CSS تحدد توزيع العناصر داخل العنصر الأب الذي لديه خاصية display: flex في المساحة الأفقية. تستخدم هذه الخاصية لتحديد موضع العناصر داخل العنصر الأب بشكل دقيق.

تتضمن القيم الخمسة الممكنة لخاصية justify-content هي:

• flex-start: تحديد موضع العناصر باليسار من المساحة المتاحة.
• flex-end: تحديد موضع العناصر باليمين من المساحة المتاحة.
• center: تحديد موضع العناصر في المنتصف الأفقي للمساحة المتاحة.
• space-between: توزيع العناصر على المساحة المتاحة بمسافات متساوية بين العناصر.
• space-around: توزيع العناصر على المساحة المتاحة بمسافات متساوية حول العناصر.

يمكن تحديد خاصية justify-content باستخدام CSS، على سبيل المثال:

/* تحديد موضع العناصر باليسار من المساحة المتاحة */
.container {
  display: flex;
  justify-content: flex-start;
}

/* تحديد موضع العناصر باليمين من المساحة المتاحة */
.container {
  display: flex;
  justify-content: flex-end;
}

/* تحديد موضع العناصر في المنتصف الأفقي للمساحة المتاحة */
.container {
  display: flex;
  justify-content: center;
}

/* توزيع العناصر على المساحة المتاحة بمسافات متساوية بين العناصر */
.container {
  display: flex;
  justify-content: space-between;
}

/* توزيع العناصر على المساحة المتاحة بمسافات متساوية حول العناصر */
.container {
  display: flex;
  justify-content: space-around;
}

تستخدم خاصية justify-content عادة لتحسين توزيع العناصر داخل العنصر الأب وتحديد موضع العناصر بدقة. ويمكن استخدامها بشكل مشترك مع خاصية align-items لتحقيق توزيع مثالي للعناصر.

شرح خاصية align-self

خاصية align-self هي خاصية في CSS تحدد توزيع عنصر محدد داخل العنصر الأب الذي لديه خاصية display: flex في المساحة العمودية. تستخدم هذه الخاصية لتحديد موضع عنصر محدد داخل العنصر الأب بشكل دقيق، بشكل مستقل عن توزيع باقي العناصر داخل العنصر الأب.

تتضمن القيم الخمسة الممكنة لخاصية align-self هي:

• auto: تعتمد قيمة توزيع العنصر على قيمة align-items للعنصر الأب.
• stretch: تمدد العنصر لملء المساحة المتاحة عمودياً (هذه القيمة الافتراضية).
• flex-start: تحديد موضع العنصر بالأعلى من المساحة المتاحة.
• flex-end: تحديد موضع العنصر بالأسفل من المساحة المتاحة.
• center: تحديد موضع العنصر في المنتصف العمودي للمساحة المتاحة.
• baseline: تحديد موضع العنصر بناءً على خط الأساس الخاص بالنص في العنصر الأب.

يمكن تحديد خاصية align-self باستخدام CSS، على سبيل المثال:

/* تحديد موضع العنصر بالأعلى من المساحة المتاحة */
.item {
  align-self: flex-start;
}

/* تحديد موضع العنصر بالأسفل من المساحة المتاحة */
.item {
  align-self: flex-end;
}

/* تحديد موضع العنصر في المنتصف العمودي للمساحة المتاحة */
.item {
  align-self: center;
}

/* تحديد موضع العنصر بناءً على خط الأساس الخاص بالنص في العنصر الأب */
.item {
  align-self: baseline;
}

تستخدم خاصية align-self عادة لتحسين توزيع عنصر محدد داخل العنصر الأب وتحديد موضعه بدقة، بشكل مستقل عن توزيع باقي العناصر داخل العنصر الأب. ويمكن استخدامها بشكل مشترك مع خاصية align-items لتحقيق توزيع مثالي للعناصر.

شرح خاصية flex-grow

خاصية flex-grow هي خاصية في CSS تحدد قدرة العنصر الفرعي على التوسع داخل العنصر الأب الذي لديه خاصية display: flex. تستخدم هذه الخاصية لتحديد نسبة توسع العنصر الفرعي مقارنة بالعناصر الفرعية الأخرى داخل العنصر الأب.

قيمة الخاصية flex-grow هي عدد غير سالب، وتعبر عن النسبة المئوية لتوسع العنصر الفرعي مقارنة بالعناصر الفرعية الأخرى داخل العنصر الأب. وإذا كانت قيمة flex-grow هي 0، فلن يوسع العنصر الفرعي داخل العنصر الأب.

يمكن تحديد خاصية flex-grow باستخدام CSS، على سبيل المثال:

/* تحديد توسع العنصر الفرعي بنسبة 2 مقارنة بالعناصر الفرعية الأخرى */
.item {
  flex-grow: 2;
}

تستخدم خاصية flex-grow عادة لتحسين توزيع العناصر داخل العنصر الأب وتحديد نسبة توسع العنصر الفرعي بدقة، بناءً على حجم العناصر الفرعية الأخرى داخل العنصر الأب. ويمكن استخدامها بشكل مشترك مع خاصية flex-shrink و flex-basis لتحقيق توزيع مثالي للعناصر.

شرح خاصية flex-basis

خاصية flex-basis هي خاصية في CSS تحدد حجم العنصر الفرعي داخل العنصر الأب الذي لديه خاصية display: flex. تستخدم هذه الخاصية لتحديد الحجم الأولي للعنصر الفرعي قبل تطبيق خاصية flex-grow و flex-shrink.

قيمة الخاصية flex-basis هي حجم العنصر الفرعي الأولي، ويمكن تحديد هذه القيمة بوحدات الطول مثل بكسل أو بالنسبة المئوية من عرض العنصر الأب. وإذا كانت قيمة flex-basis هي auto، فسيتم استخدام حجم العنصر الفرعي الأصلي كحجم أولي.

يمكن تحديد خاصية flex-basis باستخدام CSS، على سبيل المثال:

/* تحديد حجم العنصر الفرعي بعرض 200 بكسل */
.item {
  flex-basis: 200px;
}

/* تحديد حجم العنصر الفرعي بنسبة 50% من عرض العنصر الأب */
.item {
  flex-basis: 50%;
}

/* استخدام حجم العنصر الفرعي الأصلي كحجم أولي */
.item {
  flex-basis: auto;
}

تستخدم خاصية flex-basis عادة لتحسين توزيع العناصر داخل العنصر الأب وتحديد الحجم الأولي للعنصر الفرعي بدقة، قبل تطبيق خاصية flex-grow و flex-shrink. ويمكن استخدامها بشكل مشترك مع خاصية flex-grow و flex-shrink لتحقيق توزيع مثالي للعناصر.

شرح خاصية order

خاصية order هي خاصية في CSS تحدد ترتيب العنصر الفرعي داخل العنصر الأب الذي لديه خاصية display: flex. تستخدم هذه الخاصية لتحديد ترتيب العرض العمودي للعناصر الفرعية داخل العنصر الأب، دون الحاجة إلى تغيير ترتيب العناصر في الشفرة البرمجية.

قيمة الخاصية order هي رقم صحيح، وتعبر عن ترتيب العنصر الفرعي داخل العنصر الأب. ويتم عرض العناصر الفرعية في العنصر الأب وفقًا لترتيب الأرقام الصحيحة، حيث يتم عرض العنصر ذو الرقم الأقل أولاً، والعنصر ذو الرقم الأعلى ثانيًا، وهكذا.

يمكن تحديد خاصية order باستخدام CSS، على سبيل المثال:

/* تحديد ترتيب العنصر الفرعي الأول */
.item {
  order: 1;
}

/* تحديد ترتيب العنصر الفرعي الثاني */
.item {
  order: 2;
}

/* تحديد ترتيب العنصر الفرعي الثالث */
.item {
  order: 3;
}

تستخدم خاصية order عادة لتحسين ترتيب العرض العمودي للعناصر داخل العنصر الأب، دون الحاجة إلى تغيير ترتيب العناصر في الشفرة البرمجية. ويمكن استخدامها بشكل مشترك مع خصائص أخرى مثل flex-grow و flex-shrink و flex-basis لتحقيق توزيع مثالي للعناصر.

اختبار css flex box

اضغط على start التي في منتصف الاختبار لبدء الاختبار