2.3 KiB
| title | localeTitle |
|---|---|
| Flex Property | فليكس الملكية |
فليكس الملكية
الخاصية flex عبارة عن اختصار لتحديد حجم عنصر مرن. flex-grow flex-shrink flex-basis في هذه الخاصية المختزلة.
هذه الخاصية ليس لها أي تأثير إذا كان العنصر ليس عنصرًا flex-item . عنصر Flex هو عنصر يمثل طفلاً مباشراً لأحد الوالدين في حاوية مع خاصية العرض مثل flex أو inline-flex .
بناء الجملة
الاختلافات الممكنة في بناء الجملة المذكورة أدناه. flex-grow flex-shrink يأخذ عدد صحيح كقيمة. flex-basis يأخذ وحدات حجم منتظم مثل px ، em ، rem… الخ.
flex: <flex-grow> <flex-shrink> <flex-basis>; flex: <flex-basis>; flex: <flex-grow>; flex: <flex-grow> <flex-basis>; flex: <flex-grow> <flex-shrink>;
تحدد flex-basis حجم العنصر على طول المحور الرئيسي. داخل الحاوية ، يتم تعريف المحور الرئيسي flex-direction . المحور الرئيسي هو الأفقي عندما يكون flex-direction هو row . عمودي عندما يكون flex-direction هو column .
flex-basis: 20px لتحديد العرض الأولي للعنصر إلى 20 20px إذا كان flex-direction هو row . نفس flex-basis ينطبق على ارتفاع إذا كان fle-direction هو column .
flex: 20px تقصد تلقائيًا flex-basis: 20px ، نظرًا لأن الخاصية المختزلة لها flex-basis فقط كخاصية يمكن أن تأخذ قيمة مع الوحدة.
flex: 2 تحدد flex-grow: 2 ، وينمو العنصر مرتين أطول / أطول من العناصر الأخرى مع flex-grow: 1 .
flex: 1 2 تحدد flex-grow: 1 و flex-shrink: 2 . ينمو العنصر ليأخذ مساحة فارغة بالتناسب مع العناصر الأخرى ذات flex-grow: 1 ولكن يتقلص ضعفه عندما يقارن العناصر الأخرى مع flex-shrink: 1 عند الضغط على الفضاء.
معلومات اكثر
- مرجع الخاصية
flexعلى MDN