توسعه فرانت‌اند

چیت‌شیت CSS Flexbox

تراز و توزیع منعطف عناصر در یک محور؛ از ردیف و ستون ساده تا wrap و کنترل اندازه آیتم‌ها. Flexbox برای چیدمان یک‌بعدی اجزای رابط مناسب است. محور اصلی را flex-direction تعیین می‌کند و در جهت RTL، row از جهت نوشتار صفحه اثر می‌پذیرد. justify-content روی محور اصلی و align-items روی محور متقاطع عمل می‌کند. نام محور با flex-direction عوض می‌شود؛ مقادیر را با layout واقعی بسنجید. از این صفحه به‌عنوان مرجع سریع استفاده کنید و مثال‌ها و نکته‌ها را با نسخهٔ ابزار، نیاز و شرایط واقعی پروژهٔ خود تطبیق دهید.

NOVIN SKILLS / DIGITAL STUDIO

ساخت flex container

فرزندان مستقیم عنصر با display:flex به flex item تبدیل می‌شوند.

1.toolbar {2  display: flex;3  align-items: center;4  gap: 0.75rem;5}

جهت محور اصلی

row محور افقی و column محور عمودی می‌سازد؛ reverse را با جهت نوشتار و ترتیب DOM آزمایش کنید.

1.row { display: flex; flex-direction: row; }2.column { display: flex; flex-direction: column; }

Wrap و چند خط

wrap اجازه می‌دهد آیتم‌ها در فضای کم به خط بعد بروند.

1.tag-list {2  display: flex;3  flex-wrap: wrap;4  gap: 0.5rem;5}

Flow shorthand

flex-flow جهت و wrap را در یک declaration ترکیب می‌کند.

1.responsive-row {2  display: flex;3  flex-flow: row wrap;4}

توزیع روی محور اصلی

برای فاصله‌گذاری، gap اغلب از توزیع فضای خالی قابل‌پیش‌بینی‌تر است.

1.navigation {2  display: flex;3  justify-content: space-between;4  align-items: center;5  gap: 1rem;6}

تراز آیتم‌ها روی محور متقاطع

align-items روی همهٔ آیتم‌ها اثر می‌گذارد و stretch مقدار پیش‌فرض متداول است.

1.stack {2  display: flex;3  align-items: center;4  gap: 1rem;5}

تراز آیتم و خطوط

align-self یک item را تغییر می‌دهد؛ align-content بین خطوط چندگانه فضا می‌دهد.

1.item--top { align-self: flex-start; }23.wrapped {4  display: flex;5  flex-wrap: wrap;6  align-content: space-between;7  min-height: 16rem;8}

تراز با auto margin

auto margin می‌تواند یک بخش را به انتهای محور اصلی براند.

1.toolbar {2  display: flex;3  align-items: center;4}56.toolbar__actions { margin-inline-start: auto; }

flex shorthand

ترتیب shorthand برابر grow، shrink و basis است.

1.main { flex: 1 1 20rem; }2.sidebar { flex: 0 0 16rem; }3.fixed-action { flex: none; }

رشد و جمع‌شدن

grow سهم فضای اضافه و shrink سهم کاهش فضای کم را تعیین می‌کند.

1.item { flex-grow: 1; flex-shrink: 1; }2.item--fixed { flex-shrink: 0; }

Basis و اندازهٔ پایه

basis را به‌عنوان اندازهٔ اولیهٔ محور اصلی در نظر بگیرید؛ auto معمولاً اندازهٔ محتوا یا width/height را می‌بیند.

1.card { flex: 1 1 15rem; }2.icon { flex: 0 0 2.5rem; }

رفع سرریز محتوای بلند

min-width:auto می‌تواند item را از والد بیرون ببرد؛ min-width:0 اجازهٔ کوچک‌شدن می‌دهد.

1.flex-child {2  min-width: 0;3}45.truncate {6  overflow: hidden;7  text-overflow: ellipsis;8  white-space: nowrap;9}

Gap در Flexbox

gap فاصلهٔ بین آیتم‌ها و خطوط را بدون marginهای پراکنده می‌سازد.

1.actions {2  display: flex;3  flex-wrap: wrap;4  column-gap: 1rem;5  row-gap: 0.5rem;6}

Wrap معکوس

wrap-reverse جهت قرارگیری خطوط را روی محور متقاطع برمی‌گرداند.

1.items {2  display: flex;3  flex-wrap: wrap-reverse;4}

Order و دسترس‌پذیری

order فقط ترتیب دیداری را تغییر می‌دهد؛ focus و خواندن screen reader همچنان از ترتیب DOM پیروی می‌کند.

1.visual-last {2  order: 2;3}

Flexbox یا Grid

Flexbox معمولاً برای یک محور و اجزای یک ردیف مناسب است؛ برای ردیف و ستون‌های هم‌زمان، Grid را بررسی کنید.

1Flexbox: row یا column، نوار ابزار، گروه کنترل‌ها2Grid:    شبکهٔ کارت، ردیف و ستون هم‌زمان3Both:    Grid برای صفحه‌بندی، Flexbox درون اجزا

برای استفاده در پروژه

نکات کلیدی

۱
با display: flex یک flex container بسازید؛ فرزندان مستقیم آن flex item می‌شوند.
۲
محور اصلی را با flex-direction: row یا column تعیین کنید و اثر آن را بر RTL بررسی کنید.
۳
توزیع روی محور اصلی را با justify-content و تراز محور متقاطع را با align-items کنترل کنید.
۴
برای فاصله یکنواخت میان آیتم‌ها از gap استفاده کنید، نه marginهای پراکنده.
۵
با flex-wrap: wrap اجازه دهید آیتم‌ها در عرض محدود به خط بعد بروند.
۶
رشد، جمع‌شدن و اندازه پایه را با flex: grow shrink basis آگاهانه تنظیم کنید.
۷
با align-self تراز یک آیتم را تغییر دهید و با align-content خطوط چندگانه را مدیریت کنید.
۸
برای محتوای متغیر از min-width: 0 استفاده کنید تا آیتم flex بی‌دلیل از container بیرون نزند.
۹
برای نوار ابزار، گروه دکمه یا تراز محتوای یک‌بعدی Flexbox را انتخاب کنید؛ شبکه دوبعدی معمولاً برای Grid مناسب‌تر است.
۱۰
ترتیب دیداری را با order تغییر ندهید مگر ترتیب DOM و دسترسی صفحه‌کلید همچنان قابل‌فهم بماند.
۱۱
در Flexbox، flex: 1 را با نیاز به basis و حداقل اندازه بررسی کنید؛ shorthand می‌تواند flex-basis را نیز تغییر دهد.
۱۲
در RTL، محور اصلی با row-reverse و ترتیب DOM را جداگانه بسنجید؛ از دوبار معکوس‌کردن ترتیب بپرهیزید.