آموزش Flexbox در CSS: راهنمای جامع و پروژه‌محور (صفر تا صد)

آیا از دست‌وپنجه نرم کردن با float ها و position: absolute برای چیدمان (Layout) صفحات وب خسته شده‌اید؟ آیا به دنبال راهی مدرن، قدرتمند و انعطاف‌پذیر برای قرار دادن عناصر در جای درست هستید؟ به دنیای CSS Flexbox خوش آمدید!

Flexbox (یا Flexible Box Layout) انقلابی در نحوه چیدمان عناصر در CSS ایجاد کرد و به یکی از مهارت‌های ضروری برای هر توسعه‌دهنده فرانت‌اند، به‌ویژه در بازار کار ایران، تبدیل شده است. در این راهنمای جامع و قدم به قدم، ما از صفر شروع می‌کنیم و تمام مفاهیم کلیدی Flexbox را با **مثال‌های عملی** و **ساخت یک پروژه کوچک (یک کارت محصول و یک نوار ناوبری ساده)** به شما آموزش می‌دهیم.

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

قبل از شروع مطمئن شوید: (پیش‌نیازها)

آشنایی کامل با مفاهیم پایه HTML و CSS (عناصر، انتخابگرها، Box Model).
یک ویرایشگر کد (مانند VS Code↗️).
یک مرورگر وب مدرن (مانند Chrome یا Firefox) و آشنایی اولیه با ابزارهای توسعه‌دهنده (DevTools) آن.

نکته مهم:

این آموزش بر CSS خالص (Vanilla CSS) تمرکز دارد. گرچه فریمورک‌هایی مانند Tailwind CSS کلاس‌های کمکی برای Flexbox دارند، درک مفاهیم پایه ضروری است.

۱
Flexbox چیست و چرا به آن نیاز داریم؟ (مفاهیم کلیدی)
آشنایی با فلسفه و اجزای اصلی Flexbox.

قبل از اینکه دست به کد شویم، بیایید بفهمیم Flexbox دقیقاً چیست. CSS Flexible Box Layout، که معمولاً به آن Flexbox گفته می‌شود، یک مدل چیدمان یک‌بعدی در CSS است. هدف اصلی آن ارائه راهی کارآمدتر برای چیدمان (layout)، تراز کردن (alignment) و توزیع فضا (distribution) بین آیتم‌ها در یک کانتینر است، حتی زمانی که اندازه آن آیتم‌ها نامشخص یا پویا باشد (از این رو "Flexible" نامیده می‌شود).

چرا Flexbox مهم است؟ پیش از آن، طراحان وب مجبور بودند از ترفندهایی مانند float، clear، display: inline-block و هک‌های position استفاده کنند که اغلب منجر به کدهای پیچیده، شکننده و سخت برای نگهداری می‌شد. Flexbox این مشکلات را با ارائه یک مدل منطقی و مجموعه‌ای از خصوصیات قدرتمند حل کرد. این مدل به خصوص برای طراحی رابط‌های کاربری (UI) مدرن و واکنش‌گرا (Responsive) بسیار کارآمد است.

مفاهیم پایه Flexbox: کانتینر و آیتم‌ها

مدل Flexbox بر اساس دو جزء اصلی کار می‌کند:

Flex Container (کانتینر فلکس): عنصری که خصوصیت display: flex یا display: inline-flex روی آن اعمال می‌شود. این عنصر والد آیتم‌های فلکس است و خصوصیات آن نحوه چیدمان کلی آیتم‌های درونش را کنترل می‌کنند.
Flex Items (آیتم‌های فلکس): فرزندان مستقیم Flex Container. خصوصیات اعمال شده روی این آیتم‌ها، رفتار فردی آن‌ها (مانند اندازه، ترتیب و تراز) را در داخل کانتینر تعیین می‌کنند.

دیاگرام مفهومی Flex Container و Flex Items در CSS Flexbox

نمایش بصری یک Flex Container و Flex Item های درون آن.

محورهای اصلی (Main Axis) و متقاطع (Cross Axis)

درک مفهوم محورها در Flexbox حیاتی است. برخلاف مدل‌های چیدمان سنتی که بر اساس جهت‌های بلوکی (عمودی) و خطی (افقی) بودند، Flexbox دارای دو محور است:

محور اصلی (Main Axis): جهتی که آیتم‌های فلکس در آن چیده می‌شوند. این محور توسط خصوصیت flex-direction تعیین می‌شود (که به زودی بررسی می‌کنیم). به طور پیش‌فرض، محور اصلی افقی است (`row`).
محور متقاطع (Cross Axis): محوری که عمود بر محور اصلی است. اگر محور اصلی افقی باشد، محور متقاطع عمودی خواهد بود و بالعکس.

بسیاری از خصوصیات Flexbox بر اساس این دو محور عمل می‌کنند (مانند justify-content برای محور اصلی و align-items برای محور متقاطع).

دیاگرام محور اصلی (Main Axis) و محور متقاطع (Cross Axis) در CSS Flexbox حالت row

نمایش محور اصلی و محور متقاطع در حالت flex-direction: row (پیش‌فرض).

۲
راه‌اندازی پروژه نمونه: HTML پایه
ایجاد ساختار HTML برای تمرین عملی Flexbox.

برای یادگیری عملی Flexbox، ما دو مثال کوچک می‌سازیم: یک نوار ناوبری ساده (Navbar) و یک چیدمان کارتی (Card Layout). ابتدا ساختار HTML مورد نیاز را ایجاد می‌کنیم. یک فایل به نام index.html و یک فایل به نام style.css در یک پوشه ایجاد کنید.

محتوای فایل index.html:

1<!DOCTYPE html>
2<html lang="fa" dir="rtl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>آموزش Flexbox</title>
7    <link rel="stylesheet" href="style.css">
8     <!-- افزودن فونت وزیرمتن برای خوانایی بهتر فارسی -->
9    <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
10    <style>
11        /* استایل های پایه برای نمایش بهتر - در فایل style.css قرار می گیرد */
12        body {
13            font-family: 'Vazirmatn', sans-serif;
14            margin: 20px;
15            background-color: #f8f9fa;
16            color: #333;
17        }
18        .container {
19            max-width: 960px;
20            margin: 30px auto;
21            padding: 20px;
22            background-color: #fff;
23            border-radius: 8px;
24            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
25        }
26        h1, h2 { text-align: center; margin-bottom: 30px; color: #0065D9; }
27
28        /* --- Navbar Styles (Initial) --- */
29        .navbar { background-color: #004EBA; padding: 10px 20px; border-radius: 5px; margin-bottom: 40px; }
30        .navbar ul { list-style: none; padding: 0; margin: 0; }
31        .navbar li { margin: 0 10px; }
32        .navbar a { color: white; text-decoration: none; font-size: 1.1em; }
33        .logo { font-weight: bold; color: #FFA100; font-size: 1.3em; } /* لوگو سمت راست */
34        .nav-links { /* محفظه لینک ها */ }
35
36        /* --- Card Layout Styles (Initial) --- */
37        .card-container { margin-top: 40px; }
38        .card {
39            background-color: #e9ecef;
40            border: 1px solid #dee2e6;
41            border-radius: 8px;
42            padding: 20px;
43            margin-bottom: 20px; /* برای فاصله اولیه قبل از فلکس */
44            width: 200px; /* عرض ثابت اولیه برای نمایش مشکل بدون فلکس */
45        }
46        .card h3 { margin-top: 0; color: #003A9C; }
47        .card p { font-size: 0.9em; color: #555; }
48
49        /* --- Helper classes for visualization (Temporary) --- */
50        .flex-container {
51            border: 2px dashed #ff006e;
52            padding: 10px;
53            background-color: rgba(255, 0, 110, 0.05);
54            min-height: 100px; /* برای نمایش بهتر */
55        }
56        .flex-item {
57            background-color: #caebfd;
58            border: 1px solid #96d3fb;
59            padding: 15px;
60            text-align: center;
61            color: #004EBA;
62            font-weight: bold;
63            margin: 5px; /* برای دیدن فاصله */
64        }
65
66    </style>
67</head>
68<body>
69
70    <h1>آموزش جامع Flexbox</h1>
71
72    <div class="container">
73        <h2>مثال ۱: نوار ناوبری (Navbar)</h2>
74        <!-- Navbar HTML -->
75        <nav class="navbar flex-container"> <!-- کانتینر فلکس -->
76            <a href="#" class="logo flex-item">Virtual Learn</a>
77            <ul class="nav-links flex-item"> <!-- آیتم فلکس (لیست لینک ها) -->
78                <li><a href="#">خانه</a></li>
79                <li><a href="#">دوره‌ها</a></li>
80                <li><a href="#">وبلاگ</a></li>
81                <li><a href="#">تماس با ما</a></li>
82            </ul>
83            <a href="#" class="login-btn flex-item">ورود</a> <!-- آیتم فلکس -->
84        </nav>
85        <p>هدف: چیدمان لوگو در سمت راست، لینک‌ها در وسط و دکمه ورود در سمت چپ.</p>
86    </div>
87
88    <div class="container">
89        <h2>مثال ۲: چیدمان کارت‌ها (Card Layout)</h2>
90         <!-- Card Layout HTML -->
91        <div class="card-container flex-container"> <!-- کانتینر فلکس -->
92            <div class="card flex-item"> <!-- آیتم فلکس -->
93                <h3>کارت ۱</h3>
94                <p>محتوای کارت شماره یک.</p>
95            </div>
96            <div class="card flex-item"> <!-- آیتم فلکس -->
97                <h3>کارت ۲</h3>
98                <p>این کارت محتوای بیشتری دارد تا ارتفاع آن متفاوت باشد.</p>
99            </div>
100             <div class="card flex-item"> <!-- آیتم فلکس -->
101                <h3>کارت ۳</h3>
102                <p>کارت سوم.</p>
103            </div>
104            <div class="card flex-item"> <!-- آیتم فلکس -->
105                <h3>کارت ۴</h3>
106                <p>و کارت چهارم.</p>
107            </div>
108        </div>
109         <p>هدف: چیدمان کارت‌ها در کنار هم به صورت انعطاف‌پذیر و با تراز مناسب.</p>
110    </div>
111
112</body>
113</html>
114

ما ساختار HTML اولیه را با چند استایل پایه برای نمایش بهتر ایجاد کردیم. کلاس‌هایflex-container وflex-item و استایل‌های کمکی داخل تگ `<style>` فقط برای تجسم بهتر در طول آموزش هستند و در نهایت به فایل style.css منتقل و پاکسازی خواهند شد. فعلاً فایل style.css خالی است.

اگر این فایل HTML را در مرورگر باز کنید، می‌بینید که عناصر هنوز چیدمان مناسبی ندارند. نوار ناوبری به هم ریخته است و کارت‌ها زیر هم قرار گرفته‌اند. حالا با Flexbox این وضعیت را تغییر خواهیم داد!

۳
فعال‌سازی Flexbox: جادوی display: flex
اولین و مهم‌ترین قدم: تبدیل یک عنصر به Flex Container.

برای اینکه مدل چیدمان Flexbox را فعال کنیم، کافی است به عنصر والد (کانتینر) که می‌خواهیم فرزندانش (آیتم‌ها) را با Flexbox بچینیم، خصوصیت display را با مقدار flex بدهیم. همچنین مقدار inline-flex وجود دارد که کانتینر را مانند یک عنصر inline رفتار می‌کند، اما فرزندانش همچنان طبق قوانین Flexbox چیده می‌شوند. ما از flex استفاده می‌کنیم.

بیایید این خصوصیت را به کانتینرهای پروژه نمونه خود (یعنی <nav class="navbar"> و <div class="card-container">) اضافه کنیم. کد زیر را به فایل style.css خود اضافه کنید (یا اگر فعلاً از تگ `<style>` در HTML استفاده می‌کنید، به آنجا اضافه کنید):

افزودن به فایل style.css:

1/* --- Flexbox Activation --- */
2.navbar {
3    display: flex;
4    /* فعلا خصوصیات دیگر را برای Navbar اضافه می‌کنیم تا نتیجه را ببینیم */
5    align-items: center; /* تراز عمودی آیتم ها در وسط */
6    justify-content: space-between; /* توزیع فضا بین آیتم ها */
7}
8
9.navbar ul {
10    display: flex; /* لیست لینک ها هم خودش یک فلکس کانتینر برای li ها شد */
11    /* استایل های قبلی ul حذف یا اصلاح می شوند */
12    list-style: none;
13    padding: 0;
14    margin: 0;
15}
16
17.card-container {
18    display: flex;
19}

همچنین استایل‌های کمکی `.flex-container` و `.flex-item` و کلاس‌های مربوطه در HTML را حذف کنید، چون دیگر مستقیماً از display: flexاستفاده می‌کنیم. ما همچنین چند خصوصیت دیگر Flexbox (align-items و justify-content برای navbar، و display: flexبرای ul) را اضافه کردیم تا نتیجه اولیه بهتر دیده شود، در گام‌های بعدی آنها را توضیح خواهیم داد.

حالا صفحه index.html را دوباره در مرورگر باز کنید یا رفرش کنید. چه اتفاقی افتاد؟

آیتم‌های درون نوار ناوبری (لوگو، لیست لینک‌ها، دکمه ورود) حالا در یک ردیف افقی قرار گرفته‌اند و با فاصله بینشان توزیع شده‌اند. لینک‌های داخل ul نیز کنار هم قرار گرفته‌اند.
کارت‌ها نیز حالا در یک ردیف افقی کنار هم چیده شده‌اند (ممکن است از کانتینر بیرون بزنند اگر عرض کافی نباشد، که بعداً با flex-wrap حل می‌کنیم).

این قدرت display: flexاست! به طور پیش‌فرض، آیتم‌ها را در یک ردیف افقی (محور اصلی پیش‌فرض) قرار می‌دهد.

تغییر جهت: flex-direction

خصوصیت flex-direction روی Flex Container اعمال می‌شود و جهت محور اصلی (و در نتیجه جهت چیده شدن آیتم‌ها) را تعیین می‌کند. مقادیر اصلی آن عبارتند از:

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

برای مثال، اگر به .card-container خود flex-direction: column; اضافه کنیم، کارت‌ها دوباره زیر هم قرار می‌گیرند (اما همچنان یک Flex Context فعال است). فعلاً ما همان حالت پیش‌فرض rowرا برای هر دو مثال نیاز داریم.

۴
تراز در محور اصلی: justify-content
نحوه توزیع فضا بین آیتم‌ها در طول محور اصلی.

خصوصیت justify-content که روی Flex Container اعمال می‌شود، نحوه توزیع فضای خالی باقی‌مانده در محور اصلی بین آیتم‌ها را کنترل می‌کند. این یکی از پرکاربردترین خصوصیات Flexbox است. مقادیر مهم آن:

flex-start: (پیش‌فرض) آیتم‌ها به ابتدای محور اصلی می‌چسبند.
flex-end: آیتم‌ها به انتهای محور اصلی می‌چسبند.
center: آیتم‌ها در مرکز محور اصلی قرار می‌گیرند.
space-between: اولین آیتم به ابتدا و آخرین آیتم به انتها می‌چسبد و فضای خالی به طور مساوی بین آیتم‌های میانی توزیع می‌شود. (ما از این مقدار برای Navbar استفاده کردیم).
space-around: فضای خالی به طور مساوی در اطراف هر آیتم توزیع می‌شود (فاصله در ابتدا و انتها نصف فاصله بین آیتم‌هاست).
space-evenly: فضای خالی به طور کاملاً مساوی بین هر جفت آیتم مجاور و همچنین قبل از اولین و بعد از آخرین آیتم توزیع می‌شود.

نمایش تصویری مقادیر مختلف خصوصیت justify-content در CSS Flexbox

نمایش بصری مقادیر مختلف justify-content.

در مثال Navbar، ما از justify-content: space-between; استفاده کردیم تا لوگو به راست (در RTL)، دکمه ورود به چپ، و لیست لینک‌ها در فضای باقی‌مانده وسط قرار گیرند (البته رفتار دقیق ul ممکن است نیاز به تنظیمات بیشتری روی آیتم‌های فلکس داشته باشد که بعداً می‌بینیم). برای مثال کارت‌ها، اگر می‌خواستیم آن‌ها را در مرکز کانتینر قرار دهیم، می‌توانستیم از justify-content: center; استفاده کنیم (البته اگر فضای خالی وجود داشته باشد).

۵
تراز در محور متقاطع: align-items
نحوه چیدمان آیتم‌ها در طول محور متقاطع.

خصوصیت align-items که روی Flex Container اعمال می‌شود، نحوه تراز شدن آیتم‌ها در طول محور متقاطع را کنترل می‌کند. مقادیر اصلی آن:

stretch: (پیش‌فرض) آیتم‌ها کشیده می‌شوند تا ارتفاع (یا عرض، اگر flex-direction: column باشد) کانتینر را پر کنند (مگر اینکه ارتفاع/عرض مشخصی داشته باشند).
flex-start: آیتم‌ها به ابتدای محور متقاطع می‌چسبند.
flex-end: آیتم‌ها به انتهای محور متقاطع می‌چسبند.
center: آیتم‌ها در مرکز محور متقاطع قرار می‌گیرند. (ما از این مقدار برای Navbar استفاده کردیم تا همه چیز در یک راستای عمودی قرار گیرد).
baseline: آیتم‌ها بر اساس خط پایه (baseline) محتوایشان تراز می‌شوند.

نمایش تصویری مقادیر مختلف خصوصیت align-items در CSS Flexbox

نمایش بصری مقادیر مختلف align-items.

در مثال Navbar، استفاده از align-items: center;باعث می‌شود لوگو، لیست لینک‌ها و دکمه ورود، همگی در مرکز عمودی نوار ناوبری قرار بگیرند که ظاهر مرتب‌تری ایجاد می‌کند. در مثال کارت‌ها، اگر کارت‌ها ارتفاع‌های متفاوتی داشته باشند (که در مثال ما اینطور است)، align-items نحوه قرارگیری عمودی آن‌ها نسبت به هم را تعیین می‌کند. مثلاً با align-items: flex-start; همه از بالا تراز می‌شوند.

نکته: align-self

شما می‌توانید تراز عمودی یک آیتم فلکس خاص را با استفاده از خصوصیت align-self روی خود آن آیتم، لغو (override) کنید. این خصوصیت همان مقادیر align-items را می‌پذیرد.

۶
مدیریت خطوط چندگانه: flex-wrap و align-content
وقتی آیتم‌ها در یک خط جا نمی‌شوند چه کنیم؟

به طور پیش‌فرض، آیتم‌های فلکس سعی می‌کنند همگی در یک خط (Single Line) باقی بمانند، حتی اگر این به معنی کوچک شدن یا بیرون زدن از کانتینر باشد (همان مشکلی که ممکن است در مثال کارت‌ها دیده باشید). خصوصیت flex-wrap روی Flex Container این رفتار را کنترل می‌کند:

nowrap: (پیش‌فرض) همه آیتم‌ها در یک خط فشرده می‌شوند.
wrap: آیتم‌ها اجازه دارند به خط (یا ستون، بسته به flex-direction) بعدی شکسته شوند اگر در خط فعلی جا نشوند.
wrap-reverse: مانندwrap اما خطوط جدید در جهت معکوس (بالا به جای پایین) ایجاد می‌شوند.

بیایید flex-wrap: wrap;را به .card-container خود اضافه کنیم تا کارت‌ها در صورت نیاز به خط بعدی بروند:

افزودن به استایل .card-container در style.css:

1.card-container {
2    display: flex;
3    flex-wrap: wrap; /* اجازه شکستن به خط بعدی */
4    /* می‌توانید justify-content را هم اضافه کنید، مثلا: */
5    /* justify-content: center; /* کارت‌ها در مرکز هر خط قرار گیرند */
6}

حالا اگر صفحه را رفرش کنید و عرض مرورگر را کم کنید، می‌بینید که کارت‌ها به جای فشرده شدن، به خط بعدی می‌روند و چیدمان بهتری ایجاد می‌شود.

تراز خطوط چندگانه: align-content

وقتی به دلیل flex-wrap: wrap خطوط (یا ستون‌های) متعددی ایجاد می‌شود، خصوصیت align-content روی Flex Container نحوه توزیع فضای خالی بین این خطوط در محور متقاطع را تعیین می‌کند. توجه کنید که این خصوصیت تنها زمانی اثر دارد که بیش از یک خط وجود داشته باشد. مقادیر آن شبیه justify-content هستند:

flex-start, flex-end, center
space-between, space-around, space-evenly
`stretch` (پیش‌فرض): خطوط کشیده می‌شوند تا فضای کانتینر را پر کنند.

مثلاً اگر فضای عمودی اضافه در .card-container وجود داشت، align-content: center; تمام خطوط کارت‌ها را در مرکز عمودی کانتینر قرار می‌داد.

دیاگرام مقایسه نحوه عملکرد align-items و align-content در CSS Flexbox برای خطوط چندگانه

نمایش تفاوت align-items و align-content.

۷
کنترل آیتم‌های فلکس: انعطاف‌پذیری و ترتیب
خصوصیاتی که روی فرزندان (Flex Items) اعمال می‌شوند.

تا اینجا خصوصیاتی را دیدیم که روی Flex Container اعمال می‌شدند. حالا نوبت به خصوصیاتی می‌رسد که روی خود Flex Items (فرزندان مستقیم کانتینر) اعمال می‌شوند و رفتار آن‌ها را کنترل می‌کنند:

`order`

به طور پیش‌فرض، آیتم‌ها به همان ترتیبی که در HTML آمده‌اند، نمایش داده می‌شوند. خصوصیت order به شما اجازه می‌دهد ترتیب بصری آیتم‌ها را بدون تغییر در HTML تغییر دهید. مقدار پیش‌فرض 0 است. آیتم‌ها با `order` کمتر، زودتر نمایش داده می‌شوند. مقادیر منفی نیز مجاز هستند.
مثال: order: -1; آیتم را به اول می‌برد. order: 1; آن را به بعد از آیتم‌های با order 0 منتقل می‌کند.

flex-grow

این خصوصیت تعیین می‌کند که یک آیتم چقدر از فضای خالی مثبت موجود در کانتینر (در محور اصلی) را باید به خود اختصاص دهد (چقدر "رشد" کند). مقدار آن یک عدد بدون واحد (نسبت) است و پیش‌فرض آن 0 می‌باشد (یعنی آیتم رشد نمی‌کند).
اگر مجموع flex-grow همه آیتم‌ها 1 باشد، هر آیتم با flex-grow: 1 سهم مساوی از فضای خالی را می‌گیرد. اگر یک آیتم flex-grow: 2 و بقیه flex-grow: 1 باشند، آن آیتم دو برابر دیگران از فضای خالی سهم می‌برد.

کاربرد رایج:

برای اینکه یک آیتم (مثلاً بخش محتوای اصلی) تمام فضای خالی باقی‌مانده در کنار آیتم‌های دیگر (مثل سایدبار) را پر کند، به آن آیتم flex-grow: 1; و به بقیه flex-grow: 0; (که پیش‌فرض است) می‌دهیم.

flex-shrink

این خصوصیت تعیین می‌کند که یک آیتم چقدر باید از فضای منفی (وقتی فضا کم است و آیتم‌ها جا نمی‌شوند) کم کند (چقدر "کوچک" شود). مقدار پیش‌فرض آن 1 است، یعنی همه آیتم‌ها به نسبت مساوی کوچک می‌شوند (اگر فضای کافی نباشد و flex-wrap: nowrap`باشد). اگر مقدار آن 0 باشد، آیتم کوچک نمی‌شود و اندازه اصلی خود را حفظ می‌کند.

flex-basis

این خصوصیت اندازه اولیه (ایده‌آل) یک آیتم را قبل از توزیع فضای خالی (توسط flex-grow یا flex-shrink) تعیین می‌کند. می‌تواند یک طول مشخص flex-basis(100px, 10em) یا درصد (50%) یا مقدار auto (پیش‌فرض، اندازه بر اساس محتوا یا width/heightتعیین می‌شود) یا content باشد.

flex (Shorthand)

این یک خصوصیت مختصرنویسی (Shorthand) برای flex-grow, flex-shrink, و flex-basis به ترتیب است. استفاده از آن بسیار رایج است. مقادیر پیش‌فرض آن flex: 0 1 auto;می‌باشد.

flex: 1; مساوی است با flex: 1 1 0%;(رشد و کوچک شدن دارد، اندازه اولیه صفر). این باعث می‌شود آیتم‌ها فضای موجود را به نسبت مساوی تقسیم کنند.
flex: auto; مساوی است با flex: 1 1 auto; (رشد و کوچک شدن دارد، اندازه اولیه بر اساس محتوا).
flex: none; مساوی است با flex: 0 0 auto;(نه رشد می‌کند و نه کوچک می‌شود، اندازه اولیه بر اساس محتوا).
flex: 0 0 200px; یعنی آیتم نه رشد کند، نه کوچک شود و اندازه اولیه‌اش ۲۰۰ پیکسل باشد.

خلاصه خصوصیات Flex Item ها
خصوصیت	کاربرد	مقدار پیش‌فرض
order	تعیین ترتیب بصری آیتم	0
flex-grow	نسبت گرفتن فضای خالی مثبت	0
flex-shrink	نسبت کوچک شدن در کمبود فضا	1
flex-basis	اندازه اولیه آیتم	auto
flex	مختصرنویسی سه تای بالا	0 1 auto
align-self	تراز آیتم در محور متقاطع (لغو align-items)	auto (ارث‌بری از align-items)

حالا با این خصوصیات می‌توانیم چیدمان Navbar و کارت‌ها را دقیق‌تر کنترل کنیم.

۸
تکمیل پروژه نمونه: Navbar و Card Layout نهایی
اعمال تمام مفاهیم آموخته شده برای ساخت چیدمان‌های نهایی.

حالا وقت آن است که با استفاده از تمام خصوصیاتی که یاد گرفتیم، چیدمان Navbar و Card Layout را نهایی کنیم. استایل‌های زیر را به فایل style.css اضافه یا جایگزین کنید (استایل‌های پایه و کمکی که قبلاً اضافه کردیم را حذف یا اصلاح کنید):

استایل نهایی Navbar

افزودن/جایگزینی در style.css:

1/* --- Final Navbar Styles --- */
2.navbar {
3    display: flex;
4    align-items: center; /* تراز عمودی آیتم‌ها در مرکز */
5    justify-content: space-between; /* توزیع فضا: لوگو راست، دکمه چپ، لینک‌ها وسط */
6    background-color: #004EBA;
7    padding: 15px 30px; /* پدینگ بیشتر */
8    border-radius: 8px;
9    margin-bottom: 40px;
10    box-shadow: 0 4px 10px rgba(0, 78, 186, 0.2);
11}
12
13.navbar .logo {
14    color: #FFA100;
15    font-weight: bold;
16    font-size: 1.5em;
17    text-decoration: none;
18    /* flex-grow: 0; flex-shrink: 0; flex-basis: auto; (پیش‌فرض، نیازی به نوشتن نیست) */
19}
20
21.navbar .nav-links {
22    display: flex; /* فرزندان (li) این ul هم فلکس می‌شوند */
23    list-style: none;
24    padding: 0;
25    margin: 0;
26    /* این بخش فضای میانی را پر می‌کند */
27    /* flex-grow: 1; /* اگر می‌خواستیم لینک‌ها فضای بیشتری بگیرند */
28    /* justify-content: center; /* اگر می‌خواستیم لینک‌ها دقیقاً وسط باشند */
29}
30
31.navbar .nav-links li {
32    margin: 0 15px; /* فاصله بیشتر بین لینک‌ها */
33}
34
35.navbar .nav-links a {
36    color: white;
37    text-decoration: none;
38    font-size: 1em;
39    transition: color 0.2s ease-in-out;
40}
41
42.navbar .nav-links a:hover {
43    color: #96D3FB; /* رنگ روشن‌تر هنگام هاور */
44}
45
46.navbar .login-btn {
47    color: #004EBA;
48    background-color: white;
49    padding: 8px 18px;
50    border-radius: 20px;
51    text-decoration: none;
52    font-weight: 500;
53    font-size: 0.95em;
54    transition: background-color 0.2s, color 0.2s;
55    /* flex-grow: 0; flex-shrink: 0; (پیش‌فرض) */
56}
57
58.navbar .login-btn:hover {
59    background-color: #f1f1f1;
60}

با این استایل‌ها، Navbar ظاهری حرفه‌ای‌تر پیدا می‌کند. justify-content: space-between عناصر اصلی (لوگو، لیست، دکمه) را توزیع می‌کند و align-items: center آن‌ها را در مرکز عمودی قرار می‌دهد. همچنین display: flex روی ul.nav-links باعث می‌شود li ها کنار هم قرار گیرند.

استایل نهایی Card Layout

افزودن/جایگزینی در style.css:

1/* --- Final Card Layout Styles --- */
2.card-container {
3    display: flex;
4    flex-wrap: wrap; /* اجازه شکستن خط */
5    gap: 20px; /* ایجاد فاصله مساوی بین آیتم‌ها (جایگزین margin) */
6    /* justify-content: center; /* اختیاری: کارت‌ها در مرکز هر خط باشند */
7    margin-top: 40px;
8    border: none; /* حذف بوردر کمکی */
9    padding: 0;
10    background-color: transparent;
11}
12
13.card {
14    background-color: #ffffff; /* پس زمینه سفید */
15    border: 1px solid #dee2e6;
16    border-radius: 12px; /* گردی بیشتر */
17    padding: 25px;
18    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
19    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
20
21    /* --- Flex Item Properties --- */
22    /* flex-grow: 1; */  /* باعث می‌شود همه کارت‌ها عرض مساوی بگیرند و فضا را پر کنند */
23    /* flex-shrink: 1; */ /* پیش‌فرض */
24    flex-basis: 250px; /* عرض اولیه هر کارت، وقتی فضا هست */
25    /* معادل: flex: 1 1 250px; (اگر flex-grow: 1 باشد) */
26    /* یا: flex: 0 1 250px; (اگر نمی‌خواهیم رشد کنند) - این مورد معمولا بهتر است */
27    flex: 0 1 250px;
28
29    margin: 0; /* حذف margin قبلی چون از gap استفاده کردیم */
30    display: flex; /* خود کارت هم یک فلکس کانتینر عمودی برای محتوایش می‌شود */
31    flex-direction: column;
32}
33
34.card:hover {
35    transform: translateY(-5px);
36    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
37}
38
39.card h3 {
40    margin-top: 0;
41    margin-bottom: 15px;
42    color: #003A9C;
43    font-size: 1.2em;
44}
45
46.card p {
47    font-size: 0.95em;
48    color: #495057;
49    line-height: 1.6;
50    flex-grow: 1; /* باعث می‌شود پاراگراف فضای خالی عمودی کارت را پر کند (اگر دکمه باشد) */
51    margin-bottom: 0;
52}
53
54/* (اختیاری) افزودن دکمه به کارت */
55/* .card .card-button {
56    margin-top: 20px;
57    padding: 8px 15px;
58    background-color: #079CED;
59    color: white;
60    text-align: center;
61    border-radius: 5px;
62    text-decoration: none;
63    transition: background-color 0.2s;
64    align-self: flex-start; /* دکمه به سمت چپ/راست کارت نچسبد */
65} */
66/* .card .card-button:hover { background-color: #0579CB; } */
67

در اینجا، display: flexو flex-wrap: wrap را روی کانتینر اعمال کردیم. gap: 20px روش مدرن‌تری برای ایجاد فاصله بین آیتم‌های فلکس (و گرید) است. مهم‌ترین بخش، تنظیم خصوصیت flex روی خود .card است. با flex: 0 1 250px; می‌گوییم که کارت‌ها نباید رشد کنند (flex-grow: 0)، می‌توانند در صورت نیاز کوچک شوند (flex-shrink: 1) و عرض پایه‌شان 250px است. این باعث می‌شود در هر ردیف تا جایی که جا باشد، کارت‌های 250 پیکسلی قرار گیرند و بقیه به خط بعد بروند. همچنین خود کارت را flex با flex-direction: column کردیم تا بتوانیم محتوای داخل آن (مثل دکمه احتمالی) را بهتر مدیریت کنیم.

اسکرین شات نتیجه نهایی پروژه کارت‌های محصول واکنش‌گرا با استفاده از CSS Flexbox

نتیجه نهایی چیدمان کارت‌ها با Flexbox.

۹
کاربردهای رایج و طراحی واکنش‌گرا با Flexbox
فراتر از مثال‌ها: Flexbox در دنیای واقعی.

Flexbox فقط برای ساخت Navbar و کارت نیست! قدرت واقعی آن در ساده‌سازی بسیاری از الگوهای چیدمان رایج و کمک به طراحی واکنش‌گرا مشخص می‌شود:

وسط‌چین کردن کامل (Perfect Centering): وسط‌چین کردن یک آیتم هم به صورت افقی و هم عمودی که قبلاً چالش‌برانگیز بود، با Flexbox بسیار ساده است:

1.parent {
2    display: flex;
3    justify-content: center; /* Center horizontally */
4    align-items: center;    /* Center vertically */
5    min-height: 300px; /* Ensure parent has height */
6}
7.child { /* The item to be centered */ }

چیدمان‌های Holy Grail (با سایدبار): ایجاد چیدمان‌های سه‌ستونه (هدر، فوتر، محتوا، دو سایدبار) با Flexbox بسیار ساده‌تر از روش‌های قدیمی است (معمولاً با ترکیب flex-grow و flex-basis).
کنترل آیتم‌های فرم:** چیدمان آسان برچسب‌ها (Labels) و ورودی‌ها (Inputs) در کنار هم یا زیر هم.

طراحی واکنش‌گرا (Responsive Design): قدرت اصلی Flexbox در واکنش‌گرایی است. با ترکیب Flexbox و Media Queries، می‌توانید چیدمان را بر اساس عرض صفحه تغییر دهید. مثال:

1/* Default styles (Mobile First) */
2.card-container {
3    display: flex;
4    flex-direction: column; /* کارت ها زیر هم در موبایل */
5    gap: 15px;
6}
7
8.card {
9    flex-basis: auto; /* عرض کامل در ستون */
10}
11
12/* Styles for larger screens (e.g., tablets and up) */
13@media (min-width: 768px) {
14    .card-container {
15        flex-direction: row; /* کارت ها کنار هم در تبلت و دسکتاپ */
16        flex-wrap: wrap;
17        gap: 20px;
18    }
19    .card {
20        flex: 0 1 calc(50% - 10px); /* دو کارت در هر ردیف با فاصله */
21        /* calc(50% - half the gap) */
22    }
23}
24
25/* Styles for even larger screens (e.g., desktops) */
26@media (min-width: 992px) {
27    .card {
28        flex-basis: calc(33.333% - 14px); /* سه کارت در هر ردیف */
29         /* Roughly (100% / 3) - (2/3 * gap) */
30    }
31}

این مثال نشان می‌دهد چگونه چیدمان کارت‌ها از ستونی در موبایل به ۲ ستونه در تبلت و ۳ ستونه در دسکتاپ تغییر می‌کند.

Flexbox در مقابل CSS Grid:

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

🤔 پرسش‌های متداول درباره Flexbox

بله، Flexbox امروزه در تمام مرورگرهای مدرن (Chrome, Firefox, Safari, Edge) به طور کامل پشتیبانی می‌شود. نسخه‌های بسیار قدیمی مرورگرها (مانند اینترنت اکسپلورر ۱۰ و ۱۱) نیاز به پیشوندهای -ms- یا سینتکس قدیمی داشتند، اما برای توسعه مدرن وب، دیگر نیازی به نگرانی در مورد پیشوندهای استاندارد (`-webkit-, -moz-) برای Flexbox نیست و می‌توانید از سینتکس استاندارد استفاده کنید.

justify-content فضای خالی را توزیع می‌کند. اگر هیچ فضای خالی در محور اصلی وجود نداشته باشد (مثلاً مجموع عرض آیتم‌ها برابر یا بیشتر از عرض کانتینر باشد)، justify-content تأثیری نخواهد داشت. مطمئن شوید که کانتینر شما فضای کافی دارد یا از flex-shrink روی آیتم‌ها به درستی استفاده می‌کنید.

قانون کلی خوب این است: Flexbox برای چیدمان‌های یک‌بعدی (یک ردیف یا یک ستون، مانند Navbar، لیست کارت‌های ساده) عالی است. CSS Grid برای چیدمان‌های دوبعدی (هم ردیف و هم ستون، مانند ساختار کلی صفحه، گالری‌های پیچیده) قدرتمندتر است. در عمل، این دو اغلب با هم ترکیب می‌شوند (مثلاً Grid برای ساختار کلی صفحه و Flexbox برای چیدمان محتوای داخل هر بخش گرید).

جمع‌بندی: Flexbox، ابزار قدرتمند شما برای چیدمان مدرن

تبریک می‌گوییم! شما با موفقیت مفاهیم کلیدی و کاربردی CSS Flexbox را از طریق این راهنمای جامع و پروژه‌محور فرا گرفتید. دیدید که چگونه با استفاده از display: flexو خصوصیات مرتبط با کانتینر (flex-direction, justify-content, align-items, flex-wrap, align-content) و آیتم‌ها (`order`, flex-grow, flex-shrink, flex-basis, align-self) می‌توانید چیدمان‌های انعطاف‌پذیر، واکنش‌گرا و مرتبی ایجاد کنید. ساخت نوار ناوبری و چیدمان کارت‌ها به شما تجربه عملی کار با این مفاهیم را داد.

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

تسلط کامل بر طراحی وب واکنش‌گرا! 🚀

Flexbox بخش مهمی از طراحی وب مدرن است. برای یادگیری کامل HTML، CSS، Flexbox، CSS Grid و ساخت وب‌سایت‌های کاملاً واکنش‌گرا و حرفه‌ای از صفر، گام بعدی شما اینجاست!

🎓 دوره پیشنهادی ویژه:

آموزش HTML & CSS ساخت سایت واکنشگرا (Jonas Schmedtmann) در Virtual Learn، با زیرنویس دقیق فارسی، شما را به یک متخصص طراحی وب تبدیل می‌کند و تمام تکنیک‌های لازم برای ساخت وب‌سایت‌های خیره‌کننده را به شما می‌آموزد.

مشاهده جزئیات دوره و شروع تسلط بر CSS

💬 سوالی دارید یا نکته‌ای برای اشتراک‌گذاری؟

تجربیات خود را از کار با Flexbox یا سوالاتی که در طول این آموزش برایتان پیش آمد، در بخش کامنت‌ها با ما و دیگران به اشتراک بگذارید!