تعد حيل CSS لـ flexbox ضرورية لضبط الحاوية وتصميمها ووضعها باستخدام flexbox وخصائص خدعة CSS Flexbox الأخرى. يتم استخدام خاصية حيل CSS وقيم الخصائص المتعددة لتصميم المربع المرن وبياناته. يمكننا استخدام حيل CSS لضبط المحاذاة والموضع والمساحة والتصميمات الأخرى لـ flexbox.

يتم استخدام تنسيق حيل CSS التالي لتصميم flexbox.

• حيل CSS لاتجاه Flecbox
• حيل CSS لمحاذاة Flexbox
• حيل CSS لهامش Flexbox

الاتجاه المرن

يتم استخدام الاتجاه المرن للحصول على اتجاه الحاوية داخل الصندوق المرن. يمكننا ضبط الحاويات حسب المتطلبات.

بناء الجملة:

يستخدم بناء الجملة التالي حيل CSS لـ flexbox. يمكننا استخدام خصائص CSS أخرى للاتجاه المرن.

 display: flex; flex-direction: row | row-reverse | column | column-reverse; 

وصف:

• يمكننا استخدام العرض المرن افتراضيًا للحاوية أو العنصر.
• يستخدم الاتجاه المرن خاصية CSS مع قيم الصف والعمود والقيم العكسية.

أمثلة على الاتجاه المرن

توضح الأمثلة التالية الصندوق المرن مع عرض خصائص وقيم Flex. يمكننا ضبط المحتوى والمحاذاة والاتجاهات.

مثال 1:

توضح الأمثلة التالية الاتجاه المرن مع الصف والمحاذاة والمحتوى مع موضع البداية افتراضيًا.

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

انتاج:

يُظهر الإخراج الصندوق المرن مع حيل CSS.

مثال 2:

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

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row-reverse; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

انتاج:

يُظهر الإخراج الصندوق المرن مع حيل CSS.

مثال 3:

توضح الأمثلة التالية الاتجاه المرن مع العمود والمحاذاة والمحتوى مع موضع البداية افتراضيًا. يعرض العمود علامات البداية إلى النهاية بمحاذاة رأسية.

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: column; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 10px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

انتاج:

بوويرشيل أقل من أو يساوي

يُظهر الإخراج الصندوق المرن مع حيل CSS.

مثال 4:

توضح الأمثلة التالية الاتجاه المرن مع عكس العمود، وتظهر المحاذاة مع موضع البداية افتراضيًا. يُظهر عكس العمود علامة النهاية إلى البداية بمحاذاة رأسية.

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: column-reverse; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 10px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

انتاج:

تعليم كاسيدي هاتشينسون

يُظهر الإخراج الصندوق المرن مع حيل CSS.

حيل المحاذاة المرنة

يستخدم المرن المحاذاة وموضع المحتوى مع حيل أو خصائص CSS.

بناء الجملة:

يستخدم بناء الجملة التالي حيل CSS لمحاذاة flexbox.

 display: flex | inline-flex; flex-direction: row | row-reverse | column | column-reverse; align-self: flex-start | flex-end | center | baseline | stretch; justify-content: start | end | center | space-between | space-around | space-evenly; 

وصف:

• يمكننا استخدام العرض المرن افتراضيًا للحاوية أو العنصر.
• يتم ضبط محاذاة flexbox باستخدام قيم البداية والنهاية والمركز وقيم خدعة CSS الأخرى.
• يتم تعيين المحتوى في flexbox باستخدام خاصية 'justify-content'.

أمثلة

توضح الأمثلة التالية المحتوى وموضع flexbox بقيم مختلفة.

مثال 1:

توضح الأمثلة التالية الاتجاه المرن للصف، والمحاذاة مع النهاية، ومحتوى الضبط الموضح مع موضع النهاية.

 CSS Tricks for Flexbox /* Show CSS trick for flex*/ .flex-containers { display: flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: end; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

انتاج:

يُظهر الإخراج الصندوق المرن مع حيل CSS.

مثال 2:

يعرض flexbox الحاوية في الموضع الأوسط باستخدام خاصية justify-content.

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; flex-direction: row-reverse; align-self: flex-end; justify-content: center; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

انتاج:

يُظهر الإخراج الصندوق المرن مع حيل CSS.

مثال 3:

يستخدم flexbox خاصية ضبط المحتوى لإظهار الحاوية بالمسافة حول العلامة.

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: space-around; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

انتاج:

يُظهر الإخراج الصندوق المرن مع حيل CSS.

مثال 4:

يستخدم flexbox خاصية ضبط المحتوى لإظهار الحاوية بالمسافة حول العلامة. يمكننا استخدام العرض مع قيمة مرنة مضمنة للخاصية.

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: inline-flex; background-color: navy; flex-direction: row; align-self: flex-end; justify-content: space-around; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:200px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <br> CSS Flex Tricks 

انتاج:

يُظهر الإخراج الصندوق المرن مع حيل CSS.

حيل CSS لهامش Flexbox

يمكننا ضبط الهامش والحشوة على Flexbox والمربع الفرعي الخاص به باستخدام خصائص CSS. يمكننا ضبط حيل flexbox CSS الأساسية وقيمتها بالنسبة لمربع العرض. بعد ذلك، قم بإضافة خاصية CSS لتعيين هامش العنصر الفرعي الخاص بـ flexbox.

استبدال كل جافا

بناء الجملة

يتم استخدام بناء الجملة التالي على العنصر الفرعي للمربع المرن لتعيين الهامش.

 Parent_element{ Display: flex; } Child_element{ margin: CSS_VALUE; CSS_property : value; } 

أمثلة

تقوم الأمثلة التالية بتعيين الهامش والتصميم باستخدام حيل CSS مع العناصر الفرعية.

مثال 1:

المثال التالي يعين هامش ومساحة العنصر الأول من حاوية flexbox. يمكننا ضبط قيمة الهامش وحجم الخط ولون الخلفية لتتناسب مع القيمة المطلوبة.

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers &gt; div:first-child { background-color: red; margin: 20px; padding: 30px; font-size: 25px; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> The first child of flexbox set with different CSS tricks </p> CSS Flex Tricks 

انتاج:

يظهر الإخراج هامش العنصر الأول.

مثال 2:

المثال التالي يعين هامش ومساحة العنصر الثالث لحاوية flexbox. يمكننا ضبط قيمة الهامش التلقائي بألوان الخلفية المختلفة.

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers &gt; div:last-child { background-color: yellow; margin-left: auto; padding: 10px; font-size: 25px; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> the last child of flexbox set with different CSS tricks </p> CSS Flex Tricks 

انتاج:

يظهر الإخراج هامش العنصر الأول.

مثال 3:

يعين المثال التالي هامش ومساحة العنصر الأخير في حاوية flexbox.

 CSS Tricks for Flexbox /* Show CSS trick for flex */ .flex-containers { display: flex; background-color: navy; } .flex-containers &gt; .clip3{ background-color: orange; margin: auto; padding: 10px; font-size: 25px; } .flex-containers &gt; div { background-color: #f2f2f2; margin: 10px; padding: 25px; font-size: 20px; } .main_div { background-color: #F4F2F2; height:280px; border : 2px solid grey; } <h4> CSS Tricks for Flexbox </h4> <b> We can set the flexbox with the different CSS properties </b> <br> <p> the last child of flexbox set with different CSS tricks </p> CSS Flex Tricks Study 

انتاج:

يظهر الإخراج هامش العنصر الأول.

خاتمة

تستخدم حيل CSS الخصائص وقيمتها لتعيين تصميم flexbox. يمكننا استخدام تصميمات وحيل متعددة للحصول على التنسيق المطلوب لـ CSS flexbox.