Flexbox در CSS

بهنام نوبخت · ۱۴۰۵/۶/۲۸

تا اینجا بیشتر ویژگی‌های CSS را برای کنترل ظاهر عناصر یاد گرفتیم؛ از رنگ و فونت و Box Model گرفته تا Position، Transform، Transition، Animation و Filter. اما یک سؤال مهم باقی می‌ماند: چطور عناصر صفحه را به شکل حرفه‌ای در کنار یکدیگر قرار دهیم؟

مثلاً فرض کنید می‌خواهیم سه کارت را کنار هم قرار دهیم، منوی سایت را به صورت افقی بسازیم، یک دکمه را دقیقاً وسط صفحه قرار دهیم یا محتوای داخل یک کارت را در دو طرف آن پخش کنیم.

در گذشته برای بسیاری از این کارها از float، position، Marginهای مختلف و تکنیک‌های پیچیده استفاده می‌شد. اما Flexbox بسیاری از این مشکلات را بسیار ساده‌تر کرده است.

Flexbox یک سیستم Layout یک‌بعدی در CSS است که برای قرار دادن عناصر در یک ردیف یا ستون، مدیریت فضای آزاد و تراز کردن عناصر طراحی شده است. در Flexbox عناصر می‌توانند متناسب با فضای موجود رشد کنند یا کوچک شوند.

در این مقاله ابتدا مفهوم Flexbox را یاد می‌گیریم، سپس مهم‌ترین ویژگی‌های آن را بررسی می‌کنیم و در پایان چند پروژه واقعی مانند منوی سایت، کارت خدمات و Center کردن محتوا می‌سازیم.

Flexbox چیست؟

Flexbox مخفف Flexible Box Layout است.

برای فعال کردن Flexbox، کافی است روی عنصر والد بنویسیم:

.container {
    display: flex;
}

وقتی یک عنصر display: flex می‌گیرد:

خود عنصر تبدیل به Flex Container می‌شود.
فرزندان مستقیم آن تبدیل به Flex Item می‌شوند.
Flexbox نحوه قرارگیری و اندازه این فرزندان را مدیریت می‌کند.

مثلاً:

<div class="container">
    <div>مورد اول</div>
    <div>مورد دوم</div>
    <div>مورد سوم</div>
</div>

.container {
    display: flex;
}

به صورت پیش‌فرض عناصر در یک ردیف قرار می‌گیرند.

Flex Container و Flex Item

این دو مفهوم را باید به خوبی یاد بگیرید.

فرض کنید:

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

و:

.container {
    display: flex;
}

در اینجا:

.container
    ↓
Flex Container

.item
.item
.item
    ↓
Flex Items

یعنی:

والد → Flex Container
فرزندان مستقیم → Flex Items

نکته مهم این است که فقط فرزندان مستقیم یک Flex Container، Flex Item محسوب می‌شوند.

چرا Flexbox مهم است؟

Flexbox برای بسیاری از Layoutهای یک‌بعدی بسیار مناسب است؛ برای مثال:

MDN نیز Flexbox را برای Layoutهای یک‌بعدی، یعنی Layoutهایی در قالب ردیف یا ستون، معرفی می‌کند.

اولین مثال Flexbox

HTML:

<div class="container">
    <div class="item">مورد ۱</div>
    <div class="item">مورد ۲</div>
    <div class="item">مورد ۳</div>
</div>

CSS:

.container {
    display: flex;
}

.item {
    padding: 20px;
    background: #eee;
    margin: 5px;
}

نتیجه تقریباً به این شکل خواهد بود:

┌────────┐ ┌────────┐ ┌────────┐
│ مورد ۱ │ │ مورد ۲ │ │ مورد ۳ │
└────────┘ └────────┘ └────────┘

بدون اینکه برای هر عنصر float یا position تعریف کنیم.

دو محور اصلی در Flexbox

یکی از مهم‌ترین مفاهیمی که باید در Flexbox یاد بگیرید، محورها هستند.

Flexbox دو محور دارد:

Main Axis
Cross Axis

Main Axis

محور اصلی، جهتی است که Flex Itemها در آن قرار می‌گیرند.

اگر:

flex-direction: row;

باشد، محور اصلی افقی است.

اگر:

flex-direction: column;

باشد، محور اصلی عمودی می‌شود.

Cross Axis

محور متقاطع، عمود بر محور اصلی است.

بنابراین اگر محور اصلی افقی باشد:

Main Axis
────────────────────────→

        ↑
        │
        │ Cross Axis
        ↓

و اگر محور اصلی عمودی باشد، جای این دو محور تغییر می‌کند.

این مفهوم بسیار مهم است، زیرا justify-content و align-items بر اساس این محورها کار می‌کنند.

ویژگی `flex-direction`

این ویژگی مشخص می‌کند Flex Itemها در چه جهتی قرار بگیرند.

چهار مقدار اصلی دارد:

row
row-reverse
column
column-reverse

`row`

مقدار پیش‌فرض است:

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

عناصر در یک ردیف قرار می‌گیرند.

1   2   3   4
→

`row-reverse`

.container {
    display: flex;
    flex-direction: row-reverse;
}

جهت ردیف معکوس می‌شود.

4   3   2   1

`column`

اگر بخواهیم عناصر زیر یکدیگر قرار بگیرند:

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

نتیجه:

`column-reverse`

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

نتیجه:

چهار مقدار flex-direction شامل row، row-reverse، column و column-reverse هستند.

Flexbox در صفحات فارسی و RTL

در سایت‌های فارسی باید یک نکته مهم را در نظر بگیریم.

اگر صفحه دارای:

direction: rtl;

باشد، مفهوم Start و End نسبت به صفحه‌های LTR تغییر می‌کند.

مثلاً:

body {
    direction: rtl;
}

در چنین شرایطی بهتر است در ذهن خود فقط به «چپ» و «راست» وابسته نباشیم و مفهوم:

start
end

را نیز یاد بگیریم.

این موضوع در طراحی Responsive و RTL اهمیت زیادی دارد.

ویژگی `justify-content`

یکی از مهم‌ترین ویژگی‌های Flexbox، justify-content است.

این ویژگی فضای موجود را در امتداد محور اصلی مدیریت می‌کند.

مثلاً:

.container {
    display: flex;
    justify-content: center;
}

عناصر در محور اصلی وسط قرار می‌گیرند.

مقادیر رایج:

flex-start
flex-end
center
space-between
space-around
space-evenly

`justify-content: flex-start`

.container {
    display: flex;
    justify-content: flex-start;
}

عناصر از ابتدای محور اصلی قرار می‌گیرند.

`justify-content: flex-end`

.container {
    display: flex;
    justify-content: flex-end;
}

عناصر در انتهای محور اصلی قرار می‌گیرند.

`justify-content: center`

.container {
    display: flex;
    justify-content: center;
}

عناصر در مرکز محور اصلی قرار می‌گیرند.

این یکی از پرکاربردترین مقادیر Flexbox است.

`justify-content: space-between`

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

فضای خالی بین عناصر تقسیم می‌شود.

مثلاً:

┌──────────────────────────────┐
│  1          2          3     │
└──────────────────────────────┘

عنصر اول در ابتدای فضا و عنصر آخر در انتهای فضا قرار می‌گیرد.

`justify-content: space-around`

.container {
    display: flex;
    justify-content: space-around;
}

برای هر عنصر در اطراف آن فضای توزیع‌شده ایجاد می‌شود.

`justify-content: space-evenly`

.container {
    display: flex;
    justify-content: space-evenly;
}

فضای اطراف و بین عناصر به شکل مساوی‌تری توزیع می‌شود.

ویژگی `align-items`

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

align-items

این ویژگی عناصر را روی محور متقاطع تراز می‌کند.

مقادیر رایج:

stretch
flex-start
flex-end
center

Center کردن عمودی

فرض کنید:

.container {
    height: 300px;

    display: flex;
    align-items: center;
}

عناصر روی محور متقاطع در مرکز قرار می‌گیرند.

Center کردن افقی و عمودی

یکی از معروف‌ترین کاربردهای Flexbox این است:

.container {
    display: flex;

    justify-content: center;
    align-items: center;
}

اگر Container ارتفاع داشته باشد:

.container {
    min-height: 300px;

    display: flex;
    justify-content: center;
    align-items: center;
}

محتوای آن هم در محور اصلی و هم در محور متقاطع وسط قرار می‌گیرد.

این تکنیک یکی از ساده‌ترین روش‌ها برای Center کردن محتواست.

مثال واقعی: Center کردن Login Box

HTML:

<div class="login-page">
    <div class="login-box">
        <h1>ورود</h1>
        <p>به حساب کاربری خود وارد شوید.</p>
    </div>
</div>

CSS:

.login-page {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

.login-box {
    width: 350px;
    padding: 30px;

    background: #fff;
    border-radius: 16px;
}

با چند خط CSS، Box دقیقاً در مرکز صفحه قرار می‌گیرد.

ویژگی `gap`

برای ایجاد فاصله بین Flex Itemها می‌توانیم از gap استفاده کنیم:

.container {
    display: flex;
    gap: 20px;
}

این روش بسیار تمیزتر از این است که برای هر عنصر Margin جداگانه تعریف کنیم.

مثلاً:

.container {
    display: flex;
    gap: 16px;
}

برای فاصله افقی و عمودی می‌توان مقدارهای جداگانه نیز تعیین کرد:

.container {
    display: flex;
    row-gap: 20px;
    column-gap: 30px;
}

ویژگی `flex-wrap`

به صورت پیش‌فرض Flex Itemها تلاش می‌کنند در یک خط باقی بمانند. مقدار اولیه flex-wrap برابر nowrap است. اگر بخواهیم عناصر در صورت کمبود فضا به خط بعد منتقل شوند، از wrap استفاده می‌کنیم.

.container {
    display: flex;
    flex-wrap: wrap;
}

مثلاً:

1   2   3
4   5   6
7   8

این ویژگی برای طراحی Responsive بسیار مهم است.

`nowrap`

.container {
    display: flex;
    flex-wrap: nowrap;
}

همه عناصر در یک خط باقی می‌مانند.

این مقدار پیش‌فرض است.

`wrap-reverse`

.container {
    display: flex;
    flex-wrap: wrap-reverse;
}

عناصر Wrap می‌شوند، اما جهت خطوط برعکس خواهد بود.

ترکیب `flex-direction` و `flex-wrap`

مثلاً:

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

این حالت آن‌قدر رایج است که CSS برای آن یک Shorthand دارد:

.container {
    flex-flow: row wrap;
}

flex-flow ترکیبی از flex-direction و flex-wrap است.

ویژگی `flex-grow`

تا اینجا بیشتر درباره Container صحبت کردیم.

حالا سراغ ویژگی‌های خود Flex Itemها می‌رویم.

flex-grow مشخص می‌کند یک Item در صورت وجود فضای خالی، چه مقدار اجازه رشد داشته باشد.

مثلاً:

.item {
    flex-grow: 1;
}

اگر چند Item داشته باشیم:

.item {
    flex-grow: 1;
}

فضای آزاد بین آن‌ها تقسیم می‌شود.

مثال `flex-grow`

HTML:

<div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
</div>

CSS:

.container {
    display: flex;
}

.item {
    flex-grow: 1;
}

سه عنصر تلاش می‌کنند فضای آزاد را به نسبت مساوی تقسیم کنند.

`flex-grow` با نسبت‌های مختلف

مثلاً:

.item-1 {
    flex-grow: 1;
}

.item-2 {
    flex-grow: 2;
}

.item-3 {
    flex-grow: 1;
}

نسبت تقریباً:

1 : 2 : 1

خواهد بود.

بنابراین Item دوم سهم بیشتری از فضای آزاد دریافت می‌کند.

ویژگی `flex-shrink`

flex-shrink مشخص می‌کند یک Flex Item هنگام کمبود فضا تا چه میزان می‌تواند کوچک شود. مقدار اولیه آن 1 است.

مثلاً:

.item {
    flex-shrink: 1;
}

یعنی عنصر اجازه دارد برای جلوگیری از Overflow کوچک شود.

می‌توانیم آن را غیرفعال کنیم:

.item {
    flex-shrink: 0;
}

در این حالت عنصر اجازه Shrink شدن ندارد.

ویژگی `flex-basis`

flex-basis اندازه اولیه یک Flex Item را روی محور اصلی مشخص می‌کند؛ قبل از اینکه فضای آزاد بین Itemها براساس Grow یا Shrink توزیع شود.

مثلاً:

.item {
    flex-basis: 200px;
}

یعنی اندازه پایه Item برابر 200 پیکسل در نظر گرفته شود.

ویژگی `flex`

ویژگی:

flex

یک Shorthand برای کنترل:

flex-grow
flex-shrink
flex-basis

است.

مثلاً:

.item {
    flex: 1;
}

یکی از رایج‌ترین استفاده‌های Flexbox است.

مثلاً:

.container {
    display: flex;
}

.item {
    flex: 1;
}

باعث می‌شود فضای موجود بین Itemها به صورت متناسب تقسیم شود.

مثال کاربردی: سه ستون مساوی

<div class="columns">
    <div>ستون اول</div>
    <div>ستون دوم</div>
    <div>ستون سوم</div>
</div>

.columns {
    display: flex;
    gap: 20px;
}

.columns > div {
    flex: 1;
    padding: 30px;
    background: #eee;
}

نتیجه:

┌──────────┐ ┌──────────┐ ┌──────────┐
  ستون اول     ستون دوم    ستون سوم 
└──────────┘ └──────────┘ └──────────┘

ویژگی `align-self`

گاهی اوقات نمی‌خواهیم تمام Flex Itemها با یک align-items یکسان تراز شوند.

در این شرایط می‌توانیم برای یک Item خاص از:

align-self

استفاده کنیم.

مثلاً:

.container {
    display: flex;
    align-items: center;
}

.item-special {
    align-self: flex-start;
}

در این حالت سایر عناصر در مرکز هستند، اما Item خاص در ابتدای محور متقاطع قرار می‌گیرد.

ویژگی `order`

Flexbox اجازه می‌دهد ترتیب بصری Flex Itemها را تغییر دهیم.

مثلاً:

.item-1 {
    order: 3;
}

.item-2 {
    order: 1;
}

.item-3 {
    order: 2;
}

ترتیب نمایش بصری تغییر خواهد کرد.

اما یک نکته مهم وجود دارد:

تغییر ترتیب بصری لزوماً ترتیب واقعی محتوا در HTML را تغییر نمی‌دهد.

بنابراین نباید از order برای ایجاد ساختار معنایی اشتباه استفاده کنیم؛ مخصوصاً در طراحی‌های دسترس‌پذیر.

Margin: auto در Flexbox

یکی از تکنیک‌های بسیار کاربردی Flexbox استفاده از:

margin-inline-start: auto;

یا در حالت‌های ساده‌تر:

margin-left: auto;

است.

مثلاً یک Header داریم:

<header class="header">

    <div class="logo">
        لوگو
    </div>

    <nav>
        <a href="#">خانه</a>
        <a href="#">خدمات</a>
        <a href="#">تماس</a>
    </nav>

    <button>
        ورود
    </button>

</header>

CSS:

.header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header button {
    margin-inline-start: auto;
}

دکمه به سمت انتهای فضای موجود منتقل می‌شود.

این تکنیک برای Headerهای حرفه‌ای بسیار کاربردی است.

پروژه عملی اول: منوی سایت

یکی از بهترین کاربردهای Flexbox، ساخت Navigation است.

HTML:

<header class="site-header">

    <a href="#" class="logo">
        بنو سرویس
    </a>

    <nav class="main-nav">

        <a href="#">خانه</a>
        <a href="#">خدمات</a>
        <a href="#">محصولات</a>
        <a href="#">درباره ما</a>
        <a href="#">تماس با ما</a>

    </nav>

    <a href="#" class="login-button">
        ورود
    </a>

</header>

CSS:

.site-header {
    display: flex;
    align-items: center;

    gap: 30px;

    padding: 20px 40px;

    background: #111;
}

.logo {
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-inline-start: auto;
}

.main-nav a {
    color: #fff;
    text-decoration: none;
}

.login-button {
    padding: 10px 18px;

    border-radius: 10px;

    background: #f97316;
    color: #fff;

    text-decoration: none;
}

در این مثال چند مفهوم Flexbox را هم‌زمان استفاده کردیم:

display: flex
align-items
gap
margin-inline-start: auto

پروژه عملی دوم: کارت خدمات

فرض کنید سه سرویس داریم:

<section class="services">

    <article class="service-card">
        <h2>طراحی سایت</h2>
        <p>طراحی سایت‌های مدرن و حرفه‌ای.</p>
        <a href="#">مشاهده بیشتر</a>
    </article>

    <article class="service-card">
        <h2>سئو</h2>
        <p>بهینه‌سازی سایت برای موتورهای جستجو.</p>
        <a href="#">مشاهده بیشتر</a>
    </article>

    <article class="service-card">
        <h2>طراحی اپلیکیشن</h2>
        <p>توسعه اپلیکیشن‌های حرفه‌ای.</p>
        <a href="#">مشاهده بیشتر</a>
    </article>

</section>

CSS:

.services {
    display: flex;

    flex-wrap: wrap;

    gap: 24px;
}

.service-card {
    flex: 1 1 280px;

    padding: 25px;

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);
}

این قسمت بسیار مهم است:

flex: 1 1 280px;

یعنی:

flex-grow   = 1
flex-shrink = 1
flex-basis  = 280px

پس کارت‌ها:

حداقل اندازه پایه مناسبی دارند.
در صورت وجود فضای آزاد رشد می‌کنند.
در صورت کمبود فضا می‌توانند کوچک شوند.
با flex-wrap به خط بعد منتقل می‌شوند.

این یکی از الگوهای کاربردی Flexbox برای ساخت مجموعه کارت‌هاست.

Flexbox برای Footer

Flexbox برای Footer نیز بسیار مناسب است.

<footer class="footer">

    <div>
        <h3>بنو سرویس</h3>
        <p>زیرساخت دیجیتال کسب‌وکار شما</p>
    </div>

    <div>
        <h3>لینک‌ها</h3>
        <a href="#">خانه</a>
        <a href="#">خدمات</a>
    </div>

    <div>
        <h3>ارتباط</h3>
        <a href="#">تماس با ما</a>
    </div>

</footer>

.footer {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

و برای ستون‌ها:

.footer > div {
    flex: 1 1 220px;
}

Flexbox برای گروه دکمه‌ها

فرض کنید:

<div class="actions">
    <button>ذخیره</button>
    <button>انصراف</button>
</div>

می‌توانیم:

.actions {
    display: flex;
    gap: 12px;
}

و اگر بخواهیم دکمه‌ها در مرکز قرار بگیرند:

.actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

Flexbox برای Icon + Text

یکی دیگر از کاربردهای بسیار رایج:

<div class="feature">
    <span class="icon">✓</span>
    <span>پشتیبانی ۲۴ ساعته</span>
</div>

.feature {
    display: flex;
    align-items: center;
    gap: 10px;
}

به همین سادگی می‌توانیم آیکون و متن را کاملاً تراز کنیم.

تفاوت Flexbox و روش‌های قدیمی

قبل از Flexbox ممکن بود برای Layout ساده از تکنیک‌هایی مانند:

float
position
margin
inline-block

استفاده شود.

اما Flexbox برای Layoutهای یک‌بعدی طراحی شده و امکانات مستقیمی برای:

در اختیار ما قرار می‌دهد.

البته این به معنی حذف کامل سایر تکنیک‌ها نیست؛ هر ابزار CSS کاربرد خودش را دارد.

Flexbox یا Grid؟

یک سؤال مهم:

آیا Flexbox جایگزین Grid است؟

خیر.

Flexbox برای Layout یک‌بعدی مناسب است:

ردیف
یا
ستون

در حالی که CSS Grid برای Layout دو‌بعدی، یعنی کنترل هم‌زمان ردیف‌ها و ستون‌ها، طراحی شده است.

به صورت ساده:

Flexbox
    ↓
یک محور
    ↓
Row / Column

در مقابل:

Grid
    ↓
دو محور
    ↓
Rows + Columns

در مقاله بعدی با Grid به شکل کامل آشنا خواهیم شد.

اشتباهات رایج در Flexbox

اشتباه اول: اشتباه گرفتن `justify-content` و `align-items`

این دو را حفظ نکنید؛ مفهوم محور را یاد بگیرید.

مثلاً اگر:

flex-direction: row;

باشد:

justify-content → محور افقی
align-items     → محور عمودی

اما اگر:

flex-direction: column;

باشد:

justify-content → محور عمودی
align-items     → محور افقی

پس این دو ویژگی همیشه به صورت ثابت «افقی» و «عمودی» نیستند.

اشتباه دوم: استفاده از `height` بدون دلیل

گاهی کاربر برای Center کردن یک عنصر چنین چیزی می‌نویسد:

.container {
    height: 500px;
}

در حالی که شاید min-height مناسب‌تر باشد:

.container {
    min-height: 500px;
}

این موضوع به محتوای واقعی Layout بستگی دارد.

اشتباه سوم: فراموش کردن `flex-wrap`

اگر تعداد زیادی کارت داریم:

.container {
    display: flex;
}

ممکن است در عرض‌های کوچک با کمبود فضا مواجه شویم.

در چنین شرایطی:

.container {
    display: flex;
    flex-wrap: wrap;
}

می‌تواند رفتار مناسب‌تری ایجاد کند.

اشتباه چهارم: استفاده نادرست از `order`

order را صرفاً برای زیبایی بصری استفاده نکنید اگر ترتیب منطقی محتوا در HTML مهم است.

ساختار HTML باید تا حد امکان منطقی و قابل دسترس باشد و CSS وظیفه نمایش آن را بر عهده بگیرد. تغییر ترتیب بصری می‌تواند روی تجربه کاربران و فناوری‌های کمکی تأثیر بگذارد.

خلاصه ویژگی‌های مهم Flexbox

ویژگی	کاربرد
`display: flex`	فعال کردن Flexbox
`flex-direction`	تعیین جهت اصلی
`justify-content`	توزیع عناصر در محور اصلی
`align-items`	تراز عناصر در محور متقاطع
`align-self`	تراز یک Item خاص
`flex-wrap`	انتقال Itemها به خط بعد
`flex-flow`	ترکیب direction و wrap
`gap`	ایجاد فاصله بین Itemها
`flex-grow`	رشد Item
`flex-shrink`	کوچک شدن Item
`flex-basis`	اندازه پایه Item
`flex`	Shorthand برای ویژگی‌های Flex
`order`	تغییر ترتیب بصری

تمرین‌های این مقاله

تمرین ۱ — سه Box

سه Box بسازید:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

و آن‌ها را:

در یک ردیف قرار دهید.
وسط‌چین کنید.
بین آن‌ها 20px فاصله ایجاد کنید.

تمرین ۲ — Center کامل

یک Container با ارتفاع 400px بسازید و یک Box را دقیقاً در مرکز آن قرار دهید.

باید از:

justify-content
align-items

استفاده کنید.

تمرین ۳ — Navigation

یک Navigation بسازید که شامل:

خانه
خدمات
محصولات
وبلاگ
تماس با ما

باشد.

موارد زیر را رعایت کنید:

display: flex
gap
align-items
justify-content

تمرین ۴ — کارت Responsive

شش کارت بسازید.

هر کارت:

flex: 1 1 250px;

داشته باشد.

Container نیز:

display: flex;
flex-wrap: wrap;
gap: 20px;

داشته باشد.

حالا اندازه Browser را تغییر دهید و رفتار کارت‌ها را مشاهده کنید.

چالش این مقاله

یک Header حرفه‌ای برای سایت بنو سرویس طراحی کنید.

ساختار پیشنهادی:

┌───────────────────────────────────────────────────┐
│ لوگو | خانه | محصولات | خدمات | آموزش | ورود    
└───────────────────────────────────────────────────┘

شرایط:

Header باید Flex Container باشد.
عناصر عمودی Center شوند.
بین لینک‌ها فاصله مناسب وجود داشته باشد.
دکمه ورود در سمت مناسب قرار بگیرد.
Layout در عرض‌های مختلف تا حد ممکن انعطاف‌پذیر باشد.
از float استفاده نکنید.
از position برای چیدمان اصلی Header استفاده نکنید.

سعی کنید فقط با مفاهیمی که تا اینجا یاد گرفته‌اید این Header را پیاده‌سازی کنید.

جمع‌بندی

Flexbox یکی از مهم‌ترین ابزارهای Layout در CSS است و یادگیری آن برای طراحی سایت‌های مدرن تقریباً ضروری است.

در ساده‌ترین حالت فقط کافی است بنویسیم:

.container {
    display: flex;
}

اما قدرت اصلی Flexbox زمانی مشخص می‌شود که ویژگی‌هایی مانند:

flex-direction
justify-content
align-items
flex-wrap
gap
flex-grow
flex-shrink
flex-basis

را در کنار یکدیگر استفاده کنیم.

برای مثال یک Layout کاربردی:

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

می‌تواند بخش بزرگی از نیازهای Layout یک رابط کاربری را برطرف کند.

نکته کلیدی این مقاله را به خاطر بسپارید:

Flexbox برای مدیریت Layout در یک محور طراحی شده است؛ یا Row یا Column.

در طراحی‌های حرفه‌ای، Flexbox و Grid معمولاً رقیب یکدیگر نیستند؛ بلکه در کنار یکدیگر استفاده می‌شوند.

۲۰

نظرات

هنوز نظری ثبت نشده است.

Flexbox در CSS

Flexbox چیست؟

Flex Container و Flex Item

چرا Flexbox مهم است؟

اولین مثال Flexbox

دو محور اصلی در Flexbox

Main Axis

Cross Axis

ویژگی flex-direction

row

row-reverse

column

column-reverse

Flexbox در صفحات فارسی و RTL

ویژگی justify-content

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

justify-content: space-evenly

ویژگی align-items

Center کردن عمودی

Center کردن افقی و عمودی

مثال واقعی: Center کردن Login Box

ویژگی gap

ویژگی flex-wrap

nowrap

wrap-reverse

ترکیب flex-direction و flex-wrap

ویژگی flex-grow

مثال flex-grow

flex-grow با نسبت‌های مختلف

ویژگی flex-shrink

ویژگی flex-basis

ویژگی flex

مثال کاربردی: سه ستون مساوی

ویژگی align-self

ویژگی order

Margin: auto در Flexbox

پروژه عملی اول: منوی سایت

پروژه عملی دوم: کارت خدمات

Flexbox برای Footer

Flexbox برای گروه دکمه‌ها

Flexbox برای Icon + Text

تفاوت Flexbox و روش‌های قدیمی

Flexbox یا Grid؟

اشتباهات رایج در Flexbox

اشتباه اول: اشتباه گرفتن justify-content و align-items

اشتباه دوم: استفاده از height بدون دلیل

اشتباه سوم: فراموش کردن flex-wrap

اشتباه چهارم: استفاده نادرست از order

خلاصه ویژگی‌های مهم Flexbox

تمرین‌های این مقاله

تمرین ۱ — سه Box

تمرین ۲ — Center کامل

تمرین ۳ — Navigation

تمرین ۴ — کارت Responsive

چالش این مقاله

جمع‌بندی

نظرات

ویژگی `flex-direction`

`row`

`row-reverse`

`column`

`column-reverse`

ویژگی `justify-content`

`justify-content: flex-start`

`justify-content: flex-end`

`justify-content: center`

`justify-content: space-between`

`justify-content: space-around`

`justify-content: space-evenly`

ویژگی `align-items`

ویژگی `gap`

ویژگی `flex-wrap`

`nowrap`

`wrap-reverse`

ترکیب `flex-direction` و `flex-wrap`

ویژگی `flex-grow`

مثال `flex-grow`

`flex-grow` با نسبت‌های مختلف

ویژگی `flex-shrink`

ویژگی `flex-basis`

ویژگی `flex`

ویژگی `align-self`

ویژگی `order`

اشتباه اول: اشتباه گرفتن `justify-content` و `align-items`

اشتباه دوم: استفاده از `height` بدون دلیل

اشتباه سوم: فراموش کردن `flex-wrap`

اشتباه چهارم: استفاده نادرست از `order`