CSS Flexbox چیست؟
CSS Flexbox (Flexible Box Layout) یک مدل طرحبندی یکبعدی برای توزیع فضا و تراز کردن آیتمها در یک ردیف یا ستون است. کانتینر flex با display: flex تعریف میشود و فرزندان مستقیم آن flex item میشوند. ویژگیهای کلیدی کانتینر: flex-direction (ردیف یا ستون)، flex-wrap (تکخطی در مقابل چندخطی)، justify-content (تراز محور اصلی)، align-items (تراز محور متقاطع برای هر خط) و align-content (تراز محور متقاطع چند خط). ویژگیهای کلیدی آیتم: flex-grow (میزان رشد آیتم)، flex-shrink (میزان کوچک شدن)، flex-basis (اندازه اولیه) و align-self (align-items کانتینر را برای آیتم خاصی بازنویسی میکند). Flexbox برای نوارهای ناوبری، ردیفهای کارت، طرحبندیهای مرکزی و هر چیدمان یکبعدی ایدهآل است.
نحوه استفاده از تولیدکننده CSS Flexbox
-
ویژگیهای کانتینر (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) را با استفاده از منوهای کشویی و فیلد ورودی تنظیم کنید.
-
برای انتخاب روی هر آیتمی در پیشنمایش کلیک کنید (نارنجی میشود).
-
flex-grow، flex-shrink، flex-basis و align-self آیتم انتخابشده را در پنل آیتم تنظیم کنید.
-
برای افزودن آیتمهای بیشتر روی '+ افزودن آیتم' کلیک کنید؛ برای حذف آیتم انتخابشده روی 'حذف' کلیک کنید.
-
بین تبهای CSS و HTML جابجا شوید تا کد تولیدشده را ببینید، سپس روی کپی کلیک کنید.
-
برای شروع مجدد با طرحبندی پیشفرض ۳ آیتمی روی 'بازنشانی همه' کلیک کنید.