سازنده Flexbox
یک کانتینر flex و آیتمهای آن را با کنترلهای بصری تنظیم کنید، واکنش زنده طرحبندی را ببینید و کد CSS را با یک کلیک کپی کنید.
طرحبندی شما کاملاً در مرورگرتان ساخته میشود. هیچیک از تنظیمات شما در BroBroGo آپلود نخواهد شد.
سوالات متداول
تفاوت بین justify-content و align-items چیست؟
ویژگی justify-content آیتمها را در امتداد محور اصلی — جهتی که سطر یا ستون جریان دارد — فاصلهگذاری میکند، در حالی که align-items آنها را در امتداد محور فرعی تراز میکند. جهت را از row به column تغییر دهید تا دو محور جابهجا شوند؛ در این حالت justify-content از بالا به پایین و align-items از چپ به راست کار خواهد کرد.
کنترلهای اختصاصی هر آیتم چگونه کار میکنند؟
یک آیتم را با شماره آن انتخاب کنید، سپس مشخص کنید که چقدر بزرگ شود تا فضای خالی را پر کند (grow)، چقدر در فضای کم فشرده شود (shrink)، اندازه اولیه آن چقدر باشد (basis) و تراز اختصاصی آن در محور فرعی چگونه باشد. ویژگی order ترتیب نمایش آیتم را روی صفحه بدون تغییر در HTML جابهجا میکند. فقط آیتمهایی که تغییر میدهید، استایل اختصاصی خود را در خروجی CSS دریافت میکنند.
چه زمانی wrap و align-content اهمیت پیدا میکنند؟
با غیرفعال کردن wrap، تمام آیتمها مجبور میشوند در یک خط قرار بگیرند و ممکن است فشرده و باریک شوند. با فعال کردن آن، آیتمهایی که جا نمیشوند به خط بعدی میروند — اینجاست که align-content وارد عمل میشود و خطوط را به عنوان یک گروه فاصلهگذاری میکند. ویژگی Gap نیز فاصله بین آیتمها و بین خطوط را بدون نیاز به مارجین تنظیم میکند.