طراحی نوار وضعیت حبابی(قسمت چهارم)

خصوصیت flex-wrap چیست؟

خصوصیت flex-wrap تعیین می کند که اگر فضای کافی در خط انعطاف پذیر برای آیتم ها وجود نداشته باشد، این آیتم ها زیر یکدیگر قرار گیرند یا نه( به عبارت دیگر، بسته بندی شوند یا نه).

مقادیر امکان پذیر برای این خصوصیت عبارتند از:

1. مقدار nowrap : این مقدار پیش فرض است. و باعث می شود که آیتم ها زیر یکدیگر قرار نگیرند و بسته بندی نشوند.
2. مقدار wrap: باعث می شود که آیتم ها در صورت لزوم بسته بندی شده و در زیر یکدیگر قرار گیرند.
3. مقدار wrap-reverse : این مقدار باعث می شود که آیتم ها در صورت لزوم، در جهت معکوس بسته بندی شوند.

در مثال زیر از مقدار nowrap استفاده شده است:

See the Pen مثال 15 by Ehsan Abbasi (@sbaloot) on CodePen.

در مثال زیر از مقدار wrap استفاده شده است:

See the Pen مثال 16 by Ehsan Abbasi (@sbaloot) on CodePen.

در مثال زیر از مقدار wrap-reverse استفاده شده است:

See the Pen مثال 17 by Ehsan Abbasi (@sbaloot) on CodePen.