آموزش کامل فلکس باکس یا Flexbox در CSS3

مقدمه

Flexbox یکی از ماژول‌های پرکاربرد CSS3 برای طراحی چیدمان انعطاف‌پذیر و واکنش‌گرا است. با Flexbox می‌توان عناصر را در یک محور افقی یا عمودی به راحتی مرتب و ترازبندی کرد. برای یادگیری کامل CSS3 و Flexbox حرفه‌ای، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی Flexbox

Flexbox یک سیستم یک‌بعدی است که شامل کانتینر و آیتم‌های داخلی می‌شود. با استفاده از ویژگی‌های display: flex، justify-content و align-items می‌توان چیدمان را کنترل کرد.

کانتینر با display: flex;
تراز افقی با justify-content
تراز عمودی با align-items
کنترل ترتیب آیتم‌ها با order
انعطاف‌پذیری با flex-grow, flex-shrink, flex-basis

مثال عملی با کد

Flexbox افقی ساده:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 10px;
}

Flexbox عمودی و ترتیب آیتم‌ها:

.container {
  display: flex;
  flex-direction: column;
}

.item2 {
  order: -1; /* آیتم دوم جلوتر نمایش داده می‌شود */
}

استفاده از flex-grow برای بزرگ شدن آیتم:

.item1 {
  flex-grow: 2; /* دو برابر فضای آزاد */
}

.item2 {
  flex-grow: 1;
}

نکات مهم و توضیحات تکمیلی

Flexbox برای طراحی یک‌بعدی بسیار مناسب است.
ترازبندی و توزیع آیتم‌ها با justify-content و align-items انجام می‌شود.
ترکیب Flexbox با Grid امکان طراحی پیشرفته و واکنش‌گرا را فراهم می‌کند.
کنترل اندازه آیتم‌ها با flex-grow، flex-shrink و flex-basis باعث انعطاف‌پذیری بیشتر می‌شود.