Skip to content

فلکس‌باکس CSS توضیح داده شده

همهٔ خصوصیات رایج فلکس‌باکس، دسته‌بندی‌شده بر اساس جایی که اعمال می‌شوند: کانتینر و آیتم. هر ردیف، خصوصیت را با مقادیر رایج و کارکرد آن همراه می‌کند.

فلکس‌باکس عناصر را در یک بعد چیدمان می‌کند: یک ردیف یا یک ستون. display: flex را روی والد قرار دهید تا به کانتینر فلکس تبدیل شود؛ فرزندان مستقیم آن آیتم‌های فلکس می‌شوند. خصوصیات کانتینر توزیع را در راستای محور اصلی و محور عرضی کنترل می‌کنند؛ خصوصیات آیتم تعیین می‌کنند که یک آیتم چقدر رشد می‌کند، جمع می‌شود یا هم‌تراز می‌شود. برای نوارها، ردیف‌ها و وسط‌چین کردن‌های یک‌بعدی فلکس‌باکس را انتخاب کنید.

جدول مرجع · 13 مورد
13 of 13 rows
کانتینر
flex | inline-flexعنصر را به یک کانتینر فلکس تبدیل می‌کند.
row | column | row-reverse | column-reverseمحور اصلی را تعیین می‌کند که آیتم‌ها در راستای آن جریان می‌یابند.
flex-start | center | space-between | space-around | space-evenlyآیتم‌ها را در راستای محور اصلی پخش می‌کند.
stretch | center | flex-start | flex-end | baselineآیتم‌ها را در راستای محور عرضی هم‌تراز می‌کند.
flex-start | center | stretch | space-betweenردیف‌های شکسته را هم‌تراز می‌کند وقتی فضای اضافه در محور عرضی هست.
nowrap | wrap | wrap-reverseاجازه می‌دهد آیتم‌ها به‌جای جمع شدن به خطوط جدید بروند.
0.5rem | 8px 16pxفاصله بین آیتم‌ها، به‌صورت افقی و عمودی.
آیتم
0 | 1 | 2چقدر از فضای آزاد را آیتم نسبت به هم‌تاهایش جذب می‌کند.
0 | 1چقدر آیتم جمع می‌شود وقتی فضای کافی نیست.
auto | 200px | 50%اندازه شروع پیش از تقسیم فضای آزاد.
1 | 1 0 auto | 0 0 200pxمختصر grow shrink basis.
auto | center | flex-start | flex-end | stretchبرای یک آیتم، مقدار align-items کانتینر را بازنویسی می‌کند.
0 | -1 | 2ترتیب یک آیتم را بدون تغییر سورس جابه‌جا می‌کند.