56. اختصار حاوية Flex: flex-flow

خاصية flex-flow هي اختصار يجمع بين خاصيتي اتجاه حاوية الـ flex: flex-direction و flex-wrap.

النحو (Syntax)

flex-flow: <flex-direction> <flex-wrap>;

مثال

إذا كنت تريد تكدساً عمودياً مسموحاً له بالالتفاف بترتيب عكسي (تخطيط غريب ولكنه ممكن):

css /* الطريقة المفصلة */ .container-long { display: flex; flex-direction: column; flex-wrap: wrap-reverse; }

/* ما يعادلها بالاختصار */ .container-short { display: flex; flex-flow: column wrap-reverse; }

حالة الاستخدام الأكثر شيوعاً (صف مع التفاف)

بما أن row و nowrap هما القيم الافتراضية، فغالباً ما يتم حذفهما إذا كنت تضبط واحدة فقط، ولكن التعريف الأكثر شيوعاً لسلوك الالتفاف القياسي هو:

css .standard-row-wrap { display: flex; flex-flow: row wrap; /* تخطيط أفقياً، والسماح بالالتفاف */ }

الفائدة: استخدام flex-flow يمكن أن يحافظ على إعلانات الحاوية الخاصة بك أكثر نظافة وتجميعاً، مما يؤكد أن هذه الخصائص تحدد التدفق السلوكي الأساسي للحاوية.