فصل چهاردهم: کار با Flexbox در CSS

اموزش رایگان CSS

چرا Flexbox مهمه؟

وقتی می‌خوای چیدمان عناصر صفحه رو راحت و واکنش‌گرا انجام بدی (مثلاً چند تا کارت، منو یا گالری عکس)، Flexbox حکم شیشه‌شور اتوماتیک رو داره.
با چند خط CSS می‌تونی همه چیز رو به‌راحتی کنار هم و حتی توی انواع صفحه‌نمایش بچینی.

اصول اولیه flexbox

۱. فعال‌سازی Flexbox

کافیه display رو روی flex بذاری:

.container {
  display: flex;
}

حالا هر چیزی داخل .container (یعنی فرزندهاش) می‌شن flex items و می‌تونی چیدمانشون رو کنترل کنی!

۲. جهت چیدمان (flex-direction)

کارت‌ها پیش‌فرضی کنار هم افقی هستند.
ولی می‌تونی به صورت عمودی (ستونی) کنی:

.container {
  display: flex;
  flex-direction: row; /* افقی (پیش‌فرض) */
}
/* یا: */
.container {
  display: flex;
  flex-direction: column; /* ستونی */
}

۳. فاصله‌دهی و ترازبندی خطی (justify-content)

  • عناصر رو در مسیر اصلی (row یا column) توزیع می‌کنه.
.container {
  justify-content: center;      /* وسط‌چین */
  justify-content: flex-end;    /* آخر خط */
  justify-content: flex-start;  /* اول خط (پیش‌فرض) */
  justify-content: space-between; /* دو سر فاصله */
  justify-content: space-around;  /* فاصله اطراف */
  justify-content: space-evenly;  /* فاصله مساوی */
}

۴. تراز عمودی (align-items)

  • عناصر را نسبت به محور متقاطع (عمودی/افقی) تراز می‌کند.
.container {
  align-items: center;    /* وسط محور عمودی */
  align-items: flex-start; /* بالای محور */
  align-items: flex-end;   /* پایین محور */
  align-items: stretch;   /* کشیده (پیش‌فرض) */
}

۵. فاصله و جایگیری هر خط (align-content)

اگر ردیف‌های چندگانه داری (وقتی flex-wrap داریم):

.container {
  flex-wrap: wrap;
  align-content: space-between;
}

۶. گسترش دادن یا کوچک کردن آیتم‌ها (flex-grow, flex-shrink)

با این دستورها می‌تونی بگی هر آیتم چقدر بزرگ یا کوچک بشه.

.item {
  flex-grow: 1; /* هر آیتم به یک نسبت بزرگ میشه */
}

مثال عملی: ساخت یک گالری ساده

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* فاصله بین آیتم‌ها */
  height: 200px;
}

.item {
  background: #2196f3;
  color: #fff;
  padding: 30px;
  border-radius: 8px;
  font-size: 1.5rem;
}

تمرین‌ها

۱. یک منو افقی بساز که وسط صفحه نمایش باشد.
۲. سه کارت در یک ردیف و وسط چین درست کن (در موبایل زیر هم بیایند، flex-direction: column با media query).
۳. به هر آیتم flex-grow بده که در هر ابعادی هم اندازه باشند.

نکته سریع:

Flexbox برای طراحی‌های واکنش‌گرا (Responsive) خیلی کارآمد است. اگر کار با float و margin خسته‌ات کرده، flexbox حلالِ مشکلاته!

محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *