fix: converted single to triple backticks5 (#36232)

guide/arabic/certifications/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md

@@ -8,25 +8,28 @@ localeTitle: أضف Flex Flexpowers إلى Tweet تضمين
 
 سيضمن الرأس أن الصورة والاسم والمقبض ومتابعة الأزرار ستتم إعادة ترتيبها بشكل أفقي.
 
- `header { 
-    display: flex; 
- } 
-` 
+```CSS
+header {
+    display: flex;
+}
+``` 
 
 يحاذي الاسم والمقبض ليبدو كجملة واحدة.
 
- `header .profile-name { 
-    display:flex; 
-    margin-left: 10px; 
-  } 
-` 
+```CSS
+header .profile-name {
+    display:flex;
+    margin-left: 10px;
+  }
+``` 
 
 ستؤدي إضافة الخاصية إلى زر المتابعة مع الهامش إلى توسيط الزر إلى الحجم الصحيح.
 
- `header .follow-btn { 
-    display:flex; 
-    margin: 0 0 0 auto; 
-  } 
-` 
+```CSS
+header .follow-btn {
+    display:flex;
+    margin: 0 0 0 auto;
+  }
+``` 
 
 يتم استخدام نفس الفكرة على عناصر التذييل.

guide/arabic/certifications/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed/index.md

@@ -6,9 +6,10 @@ localeTitle: قم بتطبيق الخاصية ذات الاتجاه المرن
 
 سيؤدي تغيير اتجاه المرن من صفه الافتراضي إلى العمود عن طريق إضافة الخاصية إلى css بشكل واضح إلى إظهار المقبض لإخفاء الاسم.
 
- `header .profile-name { 
-    display: flex; 
-    flex-direction: column; 
-    margin-left: 10px; 
-  } 
-`
+```css
+header .profile-name {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+  }
+```

guide/arabic/certifications/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md

@@ -10,7 +10,8 @@ localeTitle: استخدم العرض
 
 مثال:
 
- `#main-container {
+```CSS
+#main-container {
     display: flex;
- }
-`
+}
+```

guide/arabic/certifications/responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item/index.md

@@ -6,15 +6,16 @@ localeTitle: استخدم الخاصية الأساسية المرنة لتعي
 
 يمكنك تحقيق نفس تأثير التحديتين السابقتين مع `flax-basis` . بعد تحديد قيم approati ، سترى `#box-2` أكبر من `#box-1` قبل تطبيق أي تقلص أو نمو.
 
- `#box-1 { 
-  background-color: dodgerblue; 
-  height: 200px; 
-  flex-basis: 10em; 
- } 
- 
- #box-2 { 
-  background-color: orangered; 
-  height: 200px; 
-  flex-basis: 20em; 
- } 
-`
+```css
+#box-1 {
+  background-color: dodgerblue;
+  height: 200px;
+  flex-basis: 10em;
+}
+
+#box-2 {
+  background-color: orangered;
+  height: 200px;
+  flex-basis: 20em;
+}
+```

guide/arabic/certifications/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column/index.md

@@ -6,8 +6,9 @@ localeTitle: استخدم خاصية الاتجاه المرن لعمل عمود
 
 لتكديس العناصر الفرعية للحاوية المرنة فوق بعضها البعض ، يمكنك تغيير _الاتجاه المرن_ بالطريقة التالية:
 
- `#main-container { 
-    display: flex; 
-    flex-direction: column; 
- } 
-`
+```CSS
+#main-container {
+    display: flex;
+    flex-direction: column;
+}
+```

guide/arabic/certifications/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row/index.md

@@ -6,11 +6,12 @@ localeTitle: استخدم خاصية الاتجاه المرن لإجراء صف
 
 بمجرد أن يكون لديك حاوية مرنة عن طريق إضافة _الشاشة: flex؛_ إلى الحاوية الرئيسية ، يمكنك تحديد ما إذا كنت تريد تكديس الأطفال في صف عن طريق إضافة ما يلي:
 
- `#box-container { 
-    display: flex; /* This makes the flex container */ 
-    height: 500px; 
-    flex-direction: row-reverse; /* This makes the direction be a row with reversed elements */ 
-  } 
-` 
+```css
+#box-container {
+    display: flex; /* This makes the flex container */
+    height: 500px;
+    flex-direction: row-reverse; /* This makes the direction be a row with reversed elements */
+  }
+``` 
 
 ستلاحظ كيف أن ألوان تبديل المواضع مثل الاتجاه الافتراضي للحاويات المرنة هي صفوف كما قد تكون لاحظت من [مثال tweet](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md) .

guide/arabic/certifications/responsive-web-design/css-flexbox/use-the-flex-shorthand-property/index.md

@@ -8,9 +8,10 @@ localeTitle: استخدم خاصية الاختزال المرن
 
 مثال:
 
- `#box-1 { 
-    background-color: dodgerblue; 
-    flex: 2 2 150px; 
-    height: 200px; 
-  } 
-`
+```css
+#box-1 {
+    background-color: dodgerblue;
+    flex: 2 2 150px;
+    height: 200px;
+  }
+```