این آموزش در تاریخ ۱۴۰۰/۱۱/۰۲ آپدیت شده است.
آموزش ویژگی flex-wrap در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی flex-wrap در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی flex-wrap در CSS
با استفاده از ویژگی flex-wrap در CSS میتوان مشخص کرد که آیا آیتم های فلکس در صورت نیاز شکسته شوند و به سطر جدید بروند یا نه مثلا همه ی آیتم ها در یک سطر نمایش داده شوند.
اگر تعداد آیتم های فلکس از اندازه کل عرض ظرف فلکس بیشتر باشند، در اینصورت آیتم ها از ظرف بیرون میزنند، ولی خب ما با استفاده از همین ویژگی flex-wrap میتونیم کاری کنیم که آیتم ها شکسته و به سطر جدید بروند.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی flex-wrap را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : گفتیم اگه آیتم ها تعدادشون زیاد بود و از باکس میخواست بزنه بیرون ، سطر شکسته شه و آیتم ها به سطر جدید بروند
|
1 2 3 4 5 |
.MyContainer{ display: flex; flex-direction: row; flex-wrap: wrap; } |
Free-Learn
جدول مشخصات ویژگی flex-wrap در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | nowrap |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.flexWrap=”wrap”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی flex-wrap در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| flex-wrap | ۲۹ | ۲۸ | ۱۷ | ۹ | ۱۲ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی flex-wrap در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| nowrap | مقدار پیش فرض – از شکسته شدن آیتم ها به سطر بعدی جلوگیری میکند |
| wrap | در صورت نیاز آیتم هارو به سطر بعدی منتقل میکند |
| wrap-reverse | آیتم ها به سطر بعدی منتقل می شوند و بصورت برعکس نمایش داده میشوند |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- یک تگ باید حتما آیتم یا فرزندی از یک فلکس باکس باشد تا ویژگی flex-wrap بروی آن اثر داشته باشد، در غیر اینصورت این ویژگی بی اثر خواهد ماند.
