استخدام خاصية align-content في CSS3 ومثال

وصف

عندما يكون هناك مساحة زائدة على المحور الأفقي (عمودي)، يمكن استخدام خاصية CSS لتحريك عناصر قاطرة المرنة إلى داخل قاطرة المرنة. لا يؤثر هذا الخاصية على القاطرة المرنة الواحدة السطر. justify-contentيحمل العناصر على المحور الرئيسي (الافقي).

التالي يلخص استخدام الخاصية و تاريخ إصداراتها.

قواعد النحو لاستخدام align-content

قواعد النحو لهذه الخاصية كالتالي:

align-content:　center　|　flex-start　|　flex-end　|　space-between　|　space-around　|　stretch　|　initial　|　inherit

النموذج التالي يوضح كيفية استخدام خاصية align-content في CSS.

　.flex-container　{
　　　　　　　　　　　/*　Safari浏览器　*/
　　　　　　　　　　　display:　-webkit-flex;　
　　　　　　　　　　　-webkit-flex-flow: row wrap;
　　　　　　　　　　　-webkit-align-content: space-around;
　　　　　　　　　　　/* جملة قياسية */
　　　　　　　　　　　display: flex;
　　　　　　　　　　　flex-flow: row wrap;
　　　　　　　　　　　align-content: space-around;
　　　　}

قيمة الخصائص

يصف الجدول أدناه قيمة هذا الخصائص.

متوافق مع المتصفحات

يدعم جميع المتصفحات الرئيسية الخاصية align-content. الرقم يمثل إصدار المتصفح الأول الذي يدعم هذه الخاصية.

قراءة إضافية

يرجى الرجوع إلى الدروس التالية:تسجيل CSS.

خصائص مرتبطة:align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.