آموزش CSS | Flexbox

معرفی Flexbox و نحوه استفاده از آنها

Flexbox (مخفف Flexible Box) یک سیستم طرح‌بندی قدرتمند در CSS است که به شما امکان می‌دهد المان‌های داخل یک ظرف (Container) را به‌راحتی در یک بعد (ردیف یا ستون) مرتب و تراز کنید. برخلاف روش‌های قدیمی‌تر مانند float یا position، Flexbox برای طراحی‌های پویا و واکنش‌گرا (Responsive) بسیار مناسب است و کد کمتری نیاز دارد.

مفهوم اصلی:
برای استفاده از Flexbox، شما نیاز به یک ظرف انعطاف‌پذیر (Flex Container) دارید. هر المان HTML که مستقیماً داخل این ظرف قرار می‌گیرد، به‌طور خودکار به یک آیتم انعطاف‌پذیر (Flex Item) تبدیل می‌شود. سپس با تنظیم ویژگی‌های خاص روی ظرف یا آیتم‌ها، می‌توانید نحوه چیدمان را کنترل کنید.

نحوه فعال‌سازی Flexbox:
برای تبدیل یک ظرف به Flex Container، کافیست ویژگی display آن را به flex یا inline-flex تنظیم کنید. مثلاً اگر یک div به صورت زیر در HTML دارید:

<div class="container">
  <div class="item">۱</div>
  <div class="item">۲</div>
  <div class="item">۳</div>
</div>

با اضافه کردن CSS زیر، این ظرف به یک Flex Container تبدیل می‌شود:

.container {
  display: flex;
}

تغییر جهت چیدمان (Flex Direction):
به‌طور پیش‌فرض، آیتم‌ها در یک ردیف افقی (از چپ به راست) چیده می‌شوند. با استفاده از ویژگی flex-direction می‌توانید جهت را تغییر دهید:

• row (پیش‌فرض): آیتم‌ها در یک خط افقی قرار می‌گیرند.
• row-reverse: آیتم‌ها در یک خط افقی اما از راست به چپ قرار می‌گیرند.
• column: آیتم‌ها به صورت عمودی (از بالا به پایین) چیده می‌شوند.
• column-reverse: آیتم‌ها به صورت عمودی از پایین به بالا چیده می‌شوند.

مثال:

.container {
  display: flex;
  flex-direction: column; /* آیتم‌ها عمودی می‌شوند */
}

تراز کردن آیتم‌ها:
Flexbox دو ویژگی اصلی برای تراز کردن فراهم می‌کند:

1. justify-content: برای تراز کردن آیتم‌ها در امتداد محور اصلی (همان جهت flex-direction). مقادیر رایج:

   • flex-start (پیش‌فرض): آیتم‌ها در ابتدای محور قرار می‌گیرند.
   • flex-end: آیتم‌ها در انتهای محور قرار می‌گیرند.
   • center: آیتم‌ها در وسط محور قرار می‌گیرند.
   • space-between: فضای مساوی بین آیتم‌ها ایجاد می‌کند.
   • space-around: فضای مساوی در اطراف هر آیتم ایجاد می‌کند.

2. align-items: برای تراز کردن آیتم‌ها در امتداد محور عمودی (عمود بر محور اصلی). مقادیر رایج:

   • stretch (پیش‌فرض): آیتم‌ها کشیده می‌شوند تا ارتفاع ظرف را پر کنند.
   • flex-start: آیتم‌ها در ابتدای محور عمودی قرار می‌گیرند.
   • flex-end: آیتم‌ها در انتهای محور عمودی قرار می‌گیرند.
   • center: آیتم‌ها در وسط محور عمودی قرار می‌گیرند.

یک مثال عملی:
فرض کنید می‌خواهید سه کادر رنگی را در وسط صفحه به صورت افقی و عمودی وسط‌چین کنید:

<div class="container">
  <div class="box" style="background: red;">۱</div>
  <div class="box" style="background: blue;">۲</div>
  <div class="box" style="background: green;">۳</div>
</div>

.container {
  display: flex;
  justify-content: center;   /* افقی وسط‌چین */
  align-items: center;       /* عمودی وسط‌چین */
  height: 200px;             /* برای دیده شدن تراز عمودی */
  border: 1px solid black;
}
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  color: white;
  text-align: center;
  line-height: 50px; /* برای وسط‌چین کردن متن داخل کادر */
}

در این مثال، هر سه کادر در مرکز ظرف (از نظر افقی و عمودی) قرار می‌گیرند. با تغییر justify-content به space-between، فاصله مساوی بین کادرها ایجاد می‌شود و آنها در دو طرف ظرف قرار می‌گیرند.

نکته مهم:
Flexbox فقط در یک بعد (ردیف یا ستون) کار می‌کند. اگر نیاز به طرح‌بندی دو بعدی (سطر و ستون همزمان) دارید، بهتر است از CSS Grid استفاده کنید که در بخش‌های بعدی توضیح داده می‌شود. اما برای شروع و بسیاری از نیازهای روزمره، Flexbox کافی و ساده‌تر است.