فلکس‌باکس (Flexbox) تو CSS چیدمان عناصر رو تو یه خط (افقی یا عمودی) ساده می‌کنه و با display: flex شروع می‌شه. با ویژگی‌هایی مثل flex-direction جهت رو عوض می‌کنی، justify-content فاصله‌ها رو تنظیم می‌کنه و align-items تراز رو درست می‌کنه. تو یه مثال، منویی ساختیم که تو دسکتاپ افقیه و تو موبایل عمودی می‌شه. دست به کد بزن و با فلکس‌باکس، سایتت رو منظم و ریسپانسیو کن!

 

اگه تا حالا با چیدمان عناصر تو CSS کلنجار رفتی و نتیجه دلخواهت نشده، فلکس‌باکس (Flexbox) می‌تونه ناجیت باشه! این ابزار قدرتمند چیدمان رو تو یه جهت (افقی یا عمودی) ساده می‌کنه و بهت کمک می‌کنه سایتت رو منظم و ریسپانسیو کنی. تو این مقاله قراره فلکس‌باکس رو از صفر بشناسی، ویژگی‌هاش رو یاد بگیری و با مثال دست به کد بزنی. آماده‌ای؟ بریم سراغش!

فلکس‌باکس چیه؟

فلکس‌باکس یا "Flexible Box Layout" یه روش چیدمان تو CSSه که برای مرتب کردن عناصر تو یه خط (افقی یا عمودی) طراحی شده. قبل از فلکس‌باکس، چیدمان با float یا position بود که گاهی دردسر داشت. فلکس‌باکس این کار رو با کنترل بهتر و کد کمتر آسون می‌کنه.

فکر کن یه جعبه داری (کانتینر) و چند تا چیز توش (آیتم‌ها). فلکس‌باکس بهت می‌گه چطور این آیتم‌ها رو بچینی، فاصله‌شون رو تنظیم کنی و حتی اگه اندازه صفحه عوض شه، درست بمونن.

چرا فلکس‌باکس یاد بگیری؟

  • سادگی: چیدمان رو با چند خط کد درست می‌کنه.
  • انعطاف: آیتم‌ها خودشون با فضا تطبیق می‌دن.
  • ریسپانسیو: برای موبایل و دسکتاپ عالیه.
  • جایگزین قدیمی‌ها: دیگه نیازی به ترفندهای پیچیده نیست.

شروع با فلکس‌باکس

برای استفاده از فلکس‌باکس، اول باید یه کانتینر رو "فلکس" کنی. این کار با display: flex انجام می‌شه.

یه مثال ساده

بیایم سه جعبه تو یه خط بذاریم.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>تست فلکس‌باکس</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item">۱</div>
        <div class="item">۲</div>
        <div class="item">۳</div>
    </div>
</body>
</html>
CSS (فایل styles.css):
.container {
    display: flex;
}

.item {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    color: white;
    text-align: center;
    line-height: 100px;
    margin: 10px;
}

فایل رو تو مرورگر باز کن. می‌بینی سه جعبه کنار هم تو یه خط افقی نشستن. این کار فقط با display: flex انجام شد!

مفاهیم اصلی فلکس‌باکس

فلکس‌باکس دو بخش داره: کانتینر (والد) و آیتم‌ها (فرزندان). هر کدوم ویژگی‌های خودشون رو دارن.

ویژگی‌های کانتینر
  1. display: flex: کانتینر رو فلکس می‌کنه.
  2. flex-direction: جهت چیدمان رو مشخص می‌کنه:
    • row (پیش‌فرض): افقی از چپ به راست.
    • column: عمودی از بالا به پایین.
flex-direction: column;
3- justify-content: آیتم‌ها رو تو جهت اصلی (افقی یا عمودی) تنظیم می‌کنه:
  • flex-start: شروع.
  • flex-end: پایان.
  • center: وسط.
  • space-between: فاصله مساوی بین آیتم‌ها.
  • space-around: فاصله مساوی دور آیتم‌ها.
justify-content: space-between;
4- align-items: آیتم‌ها رو تو جهت عمود بر اصلی تنظیم می‌کنه:
  • stretch (پیش‌فرض): کشیده می‌شن.
  • center: وسط.
  • flex-start: بالا.
align-items: center;
ویژگی‌های آیتم‌ها
  1. flex-grow: چقدر از فضای اضافه رو بگیرن (پیش‌فرض ۰):
flex-grow: 1;
  1.  
  2.  
  3. flex-shrink: چقدر کوچیک بشن اگه جا کم باشه (پیش‌فرض ۱).
  4. flex-basis: اندازه اولیه قبل از تقسیم فضا (مثل 100px).

یه پروژه عملی: منوی افقی

بیایم یه منوی ساده بسازیم.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>منوی فلکس</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="menu">
        <a href="#">خانه</a>
        <a href="#">درباره</a>
        <a href="#">تماس</a>
    </nav>
</body>
</html>
CSS:
.menu {
    display: flex;
    justify-content: space-around;
    background-color: #2c3e50;
    padding: 10px;
}

.menu a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
}
این منو آیتم‌هاش رو با فاصله مساوی تو یه خط افقی می‌چینه. حالا بیایم ریسپانسیوش کنیم:

 

@media (max-width: 600px) {
    .menu {
        flex-direction: column;
        align-items: center;
    }
}

تو موبایل (زیر ۶۰۰ پیکسل)، منو عمودی می‌شه و وسط‌چین.

مثال دیگه: کارت‌های هم‌اندازه

بیایم سه کارت بسازیم که فضای کانتینر رو مساوی پر کنن.

HTML:
CSS:

CSS:

.container {
    display: flex;
    gap: 20px; /* فاصله بین آیتم‌ها */
}

.card {
    flex-grow: 1; /* فضای اضافه رو می‌گیرن */
    background-color: #ecf0f1;
    padding: 20px;
    text-align: center;
}

اینجا هر کارت فضای مساوی می‌گیره و با gap فاصله‌شون قشنگ تنظیم می‌شه.

ترفندهای فلکس‌باکس

  1. وسط‌چینی کامل: برای یه عنصر تو وسط صفحه:
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
  1.  
  2. فاصله ثابت: به جای margin از gap استفاده کن.
  3. ترتیب آیتم‌ها: با order جای آیتم‌ها رو عوض کن:
.item:nth-child(1) {
    order: 2; /* اولی می‌ره آخر */
}

مشکلات رایج و راه‌حل‌ها

  • آیتم‌ها نمی‌چینن: چک کن display: flex رو کانتینر باشه.
  • فاصله‌ها عجیبن: از gap استفاده کن یا margin رو دستی تنظیم کن.
  • اندازه‌ها نمی‌خوره: flex-basis یا width رو چک کن.

قدم بعدی چیه؟

حالا که فلکس‌باکس رو یاد گرفتی:

  • با گرید (Grid) برای چیدمان دوبعدی ترکیبش کن.
  • تو طراحی ریسپانسیو بیشتر ازش استفاده کن.
  • پروژه‌های واقعی رو تست کن.

حرف آخر

فلکس‌باکس مثل یه چوب جادویی برای چیدمان تو CSSه. با چند ویژگی ساده، می‌تونی سایتت رو منظم و انعطاف‌پذیر کنی. دست به کد بزن، این مثال‌ها رو تست کن و اگه سوالی داشتی، تو کامنت‌های "دست به کد" بپرس. تو مقاله‌های بعدی، گرید و چیدمان‌های پیشرفته‌تر رو کار می‌کنیم!