---
title: CSS Flexbox
localeTitle: CSS Flexbox
---
## CSS Flexbox

ستعلمك مجموعة التحديات هذه أساسيات استخدام حاويات مرنة. التحديات هي:

1.  [استخدام العرض: فليكس لوضع صناديق اثنين](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md) .
2.  [أضف Flex Flexpowers إلى Tweet تضمين](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md) .
3.  [استخدم خاصية الاتجاه المرن لإجراء صف](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row/index.md) .
4.  [قم بتطبيق الخاصية ذات الاتجاه المرن لإنشاء صفوف في تطبيق Tweet Tweet](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed/index.md) .
5.  [استخدم خاصية الاتجاه المرن لعمل عمود](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column/index.md) .
6.  [قم بتطبيق الخاصية ذات الاتجاه المرن لإنشاء عمود في تغريدة Tweet](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed/index.md) .
7.  [محاذاة العناصر باستخدام خاصية justify-content](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property/index.md) .
8.  [استخدم خاصية theify-content في تطبيق Tweet Tweet](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed/index.md) .
9.  [محاذاة العناصر باستخدام خاصية عناصر المحاذاة](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property/index.md) .
10.  [استخدم الخاصية align-items في Tweet Tweet](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed/index.md) .
11.  [استخدم خاصية flex-wrap إلى التفاف صف أو عمود](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column/index.md) .
12.  [استخدم خاصية الانكماش المرن لتقليص العناصر](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items/index.md) .
13.  [استخدم خاصية Flex-grow لتوسيع العناصر](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items/index.md) .
14.  [استخدم الخاصية الأساسية المرنة لتعيين الحجم الأولي لعنصر](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item/index.md) .
15.  [استخدم خاصية الاختزال المرن](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-shorthand-property/index.md) .
16.  [استخدم خاصية الطلب لإعادة ترتيب العناصر](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items/index.md) .
17.  [استخدم خاصية self-align](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-align-self-property/index.md) .