ورقة غش تخطيط CSS Flexbox
توفر هذه الصفحة ورقة غش مرئية لتخطيط CSS Flexbox، بما في ذلك خصائص الحاوية وخصائص العناصر وأمثلة التخطيط الشائعة.
خصائص الحاوية (Container Properties)
| الخاصية | القيمة | الوصف |
|---|---|---|
display |
flex |
تمكين التخطيط المرن (Flex Layout) |
flex-direction |
row |
المحور الرئيسي أفقي، نقطة البداية على اليسار |
row-reverse |
المحور الرئيسي أفقي، نقطة البداية على اليمين | |
column |
المحور الرئيسي عمودي، نقطة البداية في الأعلى | |
column-reverse |
المحور الرئيسي عمودي، نقطة البداية في الأسفل | |
flex-wrap |
nowrap |
القيمة الافتراضية، يتم ترتيب العناصر في سطر واحد |
wrap |
التفاف العناصر إلى أسطر متعددة | |
wrap-reverse |
التفاف العناصر بشكل عكسي | |
justify-content |
flex-start |
محاذاة المحور الرئيسي: محاذاة لليسار |
flex-end |
محاذاة المحور الرئيسي: محاذاة لليمين | |
center |
محاذاة المحور الرئيسي: توسيط | |
space-between |
محاذاة المحور الرئيسي: تباعد متساوٍ بين العناصر، العنصر الأول في البداية والأخير في النهاية | |
space-around |
محاذاة المحور الرئيسي: تباعد متساوٍ حول كل عنصر | |
align-items |
flex-start |
محاذاة المحور الجانبي: محاذاة للأعلى |
flex-end |
محاذاة المحور الجانبي: محاذاة للأسفل | |
center |
محاذاة المحور الجانبي: توسيط | |
baseline |
محاذاة المحور الجانبي: المحاذاة بناءً على خط أساس النص | |
stretch |
القيمة الافتراضية، تمدد العناصر لملء الحاوية | |
align-content |
flex-start |
محاذاة المحور الجانبي لعدة أسطر: للأعلى |
flex-end |
محاذاة المحور الجانبي لعدة أسطر: للأسفل | |
center |
محاذاة المحور الجانبي لعدة أسطر: توسيط | |
space-between |
محاذاة المحور الجانبي لعدة أسطر: تباعد متساوٍ بين الأسطر | |
space-around |
محاذاة المحور الجانبي لعدة أسطر: تباعد متساوٍ حول الأسطر | |
stretch |
القيمة الافتراضية، تمدد الأسطر لملء المساحة المتبقية |
خصائص العناصر (Item Properties)
| الخاصية | القيمة | الوصف |
|---|---|---|
flex-grow |
number |
يحدد قدرة العنصر على النمو إذا لزم الأمر، الافتراضي هو 0 (لا ينمو) |
flex-shrink |
number |
يحدد قدرة العنصر على الانكماش إذا لزم الأمر، الافتراضي هو 1 |
flex-basis |
auto |
يحدد الحجم الافتراضي للعنصر قبل توزيع المساحة المتبقية |
align-self |
auto |
يسمح بتغيير المحاذاة لعنصر مفرد وتجاوز خاصية align-items |
flex-start |
محاذاة العنصر في بداية الحاوية | |
flex-end |
محاذاة العنصر في نهاية الحاوية | |
center |
محاذاة العنصر في المركز | |
baseline |
محاذاة خط أساس العنصر مع خط أساس الحاوية | |
stretch |
تمدد العنصر لملء الحاوية (إذا كان للحاوية ارتفاع) |
أمثلة تخطيط شائعة
| التخطيط | خصائص الحاوية | خصائص العناصر |
|---|---|---|
| شريط تنقل أفقي | display: flex;justify-content: space-around; |
|
| شريط جانبي عمودي | display: flex;flex-direction: column;justify-content: flex-start; |
|
| تخطيط شبكي | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| تخطيط البطاقات | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |