آموزش برنامه نویسی وب🌐: بخش css قسمت هفتم(آموزش کامل فلکس باکس یا FlexBox)

مقدمه: چرا باید Flexbox را یاد بگیریم؟ 🚀

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

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

قبل از معرفی Flexbox، توسعه‌دهندگان مجبور بودند از روش‌های سنتی مانند فلو‌بندی (float)، استفاده از جدول‌ها (table layouts) یا حتی position: absolute برای چیدمان المان‌ها استفاده کنند. این روش‌ها نه‌تنها پیچیده و زمان‌بر بودند، بلکه مدیریت آن‌ها در طراحی‌های واکنش‌گرا (Responsive) نیز بسیار دشوار بود.

✅ Flexbox این مشکلات را برطرف می‌کند!

Flexbox چیست؟

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

✨ مزایای Flexbox نسبت به روش‌های قدیمی

✔️ چیدمان راحت‌تر: نیازی به استفاده از float یا position ندارید.
✔️ انعطاف‌پذیری بالا: می‌توانید المان‌ها را در هر دو محور افقی و عمودی تراز کنید.
✔️ کنترل بهتر فضای خالی: به‌راحتی می‌توان فاصله بین عناصر را مدیریت کرد.
✔️ ریسپانسیو بودن: به سادگی برای دستگاه‌های مختلف بهینه می‌شود.
🔹 در ادامه، نحوه استفاده از Flexbox و ویژگی‌های قدرتمند آن را بررسی خواهیم کرد. 🚀

📌 فهرست مطالب

1. مقدمه: چرا به Flexbox نیاز داریم؟
بررسی مشکلات چینش عناصر در CSS و مزایای Flexbox.
2. مفهوم Flexbox و نحوه فعال‌سازی آن
تعریف Flexbox و نحوه استفاده از display: flex.
3. محورهای اصلی در Flexbox (Main Axis و Cross Axis)
توضیح مفهوم محور اصلی و محور متقاطع در مدل Flexbox.
4. ویژگی‌های والد (Flex Container)
ویژگی‌های flex container شامل flex-direction، flex-wrap و ...
5. ویژگی‌های فرزند (Flex Items)
ویژگی‌های مربوط به آیتم‌های داخل Flexbox مانند order، flex-grow و ...
6. مثال‌های کاربردی
پیاده‌سازی نمونه‌هایی مانند کارت‌های محصول، گالری تصاویر و هدر ریسپانسیو.
7. تمرین‌های عملی برای Flexbox
تمرین‌های مفید برای تسلط بر Flexbox از جمله طراحی منوی ناوبری و چیدمان چندستونه.
8. جمع‌بندی و نکات تکمیلی
مروری بر نکات مهم و ترفندهای Flexbox برای طراحی حرفه‌ای‌تر.

مفهوم Flexbox و نحوه فعال‌سازی آن

Flexbox به شما این امکان را می‌دهد که المان‌های فرزند (child elements) داخل یک container (والد) را به صورت انعطاف‌پذیر و با توجه به فضای موجود مرتب کنید. Flexbox به شما این قدرت را می‌دهد که ترتیب، اندازه، و فضای اطراف المان‌ها را به راحتی کنترل کنید.

برای فعال‌سازی Flexbox، کافی است به container (عنصری که المان‌های فرزند در آن قرار دارند) خاصیت display: flex را اعمال کنید. این کار به container می‌گوید که باید از Flexbox برای چیدمان المان‌های داخل آن استفاده کند.


.container {
  display: flex;
}


<div class='container'>.
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>



    1
    2
    3

محورهای اصلی در Flexbox (Main Axis و Cross Axis)

در مدل CSS Flexbox، چیدمان عناصر بر اساس دو محور انجام می‌شود: محور اصلی (Main Axis) و محور متقاطع (Cross Axis). درک این دو مفهوم برای کنترل دقیق چینش عناصر و طراحی رابط کاربری واکنش‌گرا ضروری است.

۱. محور اصلی (Main Axis)

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

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

ویژگی‌های مرتبط با محور اصلی:

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

۲. محور متقاطع (Cross Axis)

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

ویژگی‌های مرتبط با محور متقاطع:

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

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

ویژگی‌های والد (Flex Container) در Flexbox

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

۱. display: تعریف Flex Container

برای تبدیل یک عنصر به Flex Container، کافی است ویژگی display را روی flex یا inline-flex تنظیم کنید:

display: flex; /* عنصر به یک Flex Container تبدیل می‌شود */
display: inline-flex; /* مانند flex عمل می‌کند، اما به‌صورت inline */

۲. flex-direction: تعیین جهت محور اصلی

ویژگی flex-direction مشخص می‌کند که آیتم‌های فرزند در چه جهتی در محور اصلی مرتب شوند:

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

۳. flex-wrap: کنترل رفتار آیتم‌ها هنگام کمبود فضا

این ویژگی مشخص می‌کند که آیا آیتم‌های فرزند باید در یک خط باقی بمانند یا در صورت کمبود فضا به خط بعدی منتقل شوند:

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

۴. justify-content: تنظیم چینش در محور اصلی

این ویژگی نحوه توزیع آیتم‌ها را در محور اصلی مشخص می‌کند:

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

۵. align-items: تنظیم تراز عمودی در محور متقاطع

این ویژگی کنترل می‌کند که آیتم‌های فرزند در محور متقاطع چگونه تراز شوند:

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

۶. align-content: تنظیم فاصله خطوط در محور متقاطع

اگر آیتم‌های فرزند در چندین خط قرار بگیرند (flex-wrap: wrap)، این ویژگی نحوه توزیع فضای اضافی بین خطوط را مشخص می‌کند:

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

۷. gap: تعیین فاصله بین آیتم‌ها

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

row-gap: فاصله عمودی بین ردیف‌ها
column-gap: فاصله افقی بین ستون‌ها

همچنین می‌توان از مقدار gap به‌صورت ترکیبی استفاده کرد:

gap: 10px 20px; /* فاصله 10 پیکسل بین ردیف‌ها و 20 پیکسل بین ستون‌ها */

۸. place-content: ترکیب align-content و justify-content

این ویژگی ترکیبی از align-content و justify-content است و می‌توان با یک مقدار، هر دو ویژگی را تنظیم کرد:

place-content: center space-between; /* تراز عمودی مرکز، فاصله مساوی بین آیتم‌ها در محور اصلی */

Flexbox یک سیستم قدرتمند برای طراحی رابط‌های واکنش‌گرا و انعطاف‌پذیر است. ویژگی‌های Flex Container به شما این امکان را می‌دهند که کنترل کاملی بر نحوه چیدمان آیتم‌های فرزند داشته باشید و بدون نیاز به float یا position، طرح‌های مدرن و بهینه ایجاد کنید.

ویژگی‌های فرزند (Flex Items) در Flexbox

آیتم‌های فرزند (Flex Items) عناصری هستند که مستقیماً درون یک Flex Container قرار دارند. این آیتم‌ها از قوانین Flexbox پیروی کرده و رفتار آن‌ها را می‌توان با ویژگی‌های مختلفی کنترل کرد.

۱. flex-grow: تنظیم میزان رشد آیتم

این ویژگی مشخص می‌کند که یک آیتم در صورت وجود فضای اضافی، چقدر از این فضا را اشغال کند.

flex-grow: 0 (پیش‌فرض): آیتم رشد نمی‌کند و فقط به اندازه محتوای خود باقی می‌ماند.
flex-grow: 1: آیتم تمام فضای خالی را به‌صورت مساوی با سایر آیتم‌ها اشغال می‌کند.
flex-grow: 2: آیتم دو برابر سایر آیتم‌های دارای مقدار 1 رشد می‌کند.

۲. flex-shrink: تنظیم میزان کوچک شدن آیتم

این ویژگی تعیین می‌کند که آیتم در صورت کمبود فضا، تا چه اندازه کوچک شود.

flex-shrink: 1 (پیش‌فرض): آیتم در صورت نیاز کوچک می‌شود.
flex-shrink: 0: آیتم از اندازه اصلی خود کوچکتر نمی‌شود.
flex-shrink: 2: آیتم دو برابر سایر آیتم‌ها کوچک می‌شود.

۳. flex-basis: تنظیم اندازه اولیه آیتم

این ویژگی اندازه اولیه آیتم را مشخص می‌کند (قبل از اعمال flex-grow و flex-shrink).

flex-basis: 100px; /* آیتم به‌طور پیش‌فرض 100 پیکسل خواهد بود */

۴. flex: مقدار کوتاه‌شده flex-grow، flex-shrink و flex-basis

این ویژگی ترکیبی از سه ویژگی قبلی است و معمولاً به این صورت نوشته می‌شود:

flex: 1 1 200px; /* grow: 1, shrink: 1, basis: 200px */

۵. align-self: تغییر تراز آیتم در محور متقاطع

این ویژگی تراز یک آیتم خاص را نسبت به سایر آیتم‌ها در محور متقاطع تغییر می‌دهد.

auto (پیش‌فرض): از مقدار align-items والد پیروی می‌کند.
flex-start: آیتم در ابتدای محور متقاطع قرار می‌گیرد.
flex-end: آیتم در انتهای محور متقاطع قرار می‌گیرد.
center: آیتم در مرکز محور متقاطع قرار می‌گیرد.
stretch: آیتم کل ارتفاع موجود را اشغال می‌کند.
baseline: آیتم بر اساس خط پایه متن تراز می‌شود.

مثال‌های کاربردی Flexbox

در این بخش چند مثال عملی از نحوه استفاده از Flexbox ارائه می‌شود.

۱. ایجاد یک منوی ناوبری افقی

.navbar {
  display: flex;
  justify-content: space-between;
  background-color: #333;
  padding: 10px;
}

.nav-item {
  color: white;
  text-decoration: none;
  padding: 10px;
}

۲. چیدمان کارت‌های واکنش‌گرا

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px;
  background: lightgray;
  padding: 20px;
}

کارت ۱

کارت ۲

کارت ۳

کارت ۴

۳. ساخت یک صفحه با دو ستون

.container {
  display: flex;
}

.sidebar {
  flex: 1;
  background: #ddd;
  padding: 20px;
}

.main-content {
  flex: 3;
  background: #eee;
  padding: 20px;
}

تمرین‌های عملی برای Flexbox

برای تسلط بیشتر بر Flexbox، تمرین‌های زیر را انجام دهید:

یک هدر بسازید که شامل لوگو در سمت چپ و منوی ناوبری در سمت راست باشد.
یک گالری تصاویر واکنش‌گرا ایجاد کنید که هنگام کمبود فضا، تصاویر به خط بعدی منتقل شوند.
یک صفحه با دو ستون طراحی کنید که ستون کناری (sidebar) همیشه کوچکتر از بخش اصلی باشد.
یک دکمه Call to action بسازید که همیشه در مرکز صفحه قرار بگیرد.

جمع‌بندی و نکات تکمیلی

Flexbox یک ابزار قدرتمند برای طراحی صفحات واکنش‌گرا است که به شما امکان می‌دهد چیدمان عناصر را بدون نیاز به ویژگی‌های قدیمی مانند float یا position به‌راحتی کنترل کنید.

نکات کلیدی:

Flex Container ویژگی‌هایی مانند display: flex، flex-direction و justify-content را کنترل می‌کند.
Flex Items می‌توانند با ویژگی‌های flex-grow، flex-shrink و align-self رفتارشان را تغییر دهند.
با استفاده از flex-wrap می‌توان آیتم‌ها را در چندین خط نمایش داد.
ویژگی gap برای تنظیم فاصله بین آیتم‌ها کاربرد دارد.

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

قسمت بعدی