Flexbox

Main Page Tutorial
موارد آموزشی
CSS پیشرفته
۱	گوشه‌های گرد
۲	کادر تصاویر
۳	پس‌زمینه‌ها
۴	رنگ‌ها
۵	Gradientها
۶	سایه‌ها
۷	افکت‌های متن
۸	قلم‌های وب
۹	2D Transforms
۱۰	3D Transforms
۱۱	Transitions
۱۲	انیمیشن‌ها
۱۳	Tooltip
۱۴	استایل‌دهی تصاویر
۱۵	ویژگی object-fit
۱۶	دکمه‌ها
۱۷	مثال‌های صفحه‌بندی (Pagination)
۱۸	ستون‌های متعدد
۱۹	رابط کاربری
۲۰	متغیرها
۲۱	Box Sizing
۲۲	Flexbox
۲۳	Media Queries
۲۴	مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

مشاهدهٔ نتیجه»

ماژول چیدمان Flextbox در CSS

قبل از ماژول چیدمان Flexbox، چهار حالت چیدمان وجود داشت:

• Block، برای قسمت های موجود در صفحه
• Inline، برای متن
• Table، برای داده‌های دو بعدی جدول
• Positioned، برای موقعیت صریح یک عنصر

ماژول چیدمان Flexbox طراحی ساختار چیدمان واکنش گرا و منعطف را بدون استفاده از Float یا positioning (به فارسی: موقعیت‌دهی) ساده تر می‌کند.

پشتیبانی مرورگرها

ویژگی‌های flexbox در تمامی مرورگرهای مدرن پشتیبانی می‌شود.

۲۹٫۰	۱۱٫۰	۲۲٫۰	۱۰	۴۸

عناصر Flexbox

برای شروع استفاده از مدل flexbox، ابتدا می‌بایست یک نگه دارندهٔ flex تعریف کنید.

عنصر بالا یک نگه دارنده flex (ناحیه آبی رنگ) با سه آیتم flex را نشان می‌دهد:

مثال

یک نگه دارنده flex با سه آیتم flex:

1 <div class="flex-container">
2   <div>1</div>
3   <div>2</div>
4   <div>3</div>
5 </div>

مشاهدهٔ نتیجه

عنصر والد (نگه دارنده (به انگلیسی: Container))

نگه‌دارنده flex با تنظیم ویژگی display برابر با flex، انعطاف پذیر می‌شود:

مثال

.flex-container {
  display: flex;
}

ویژگی‌های نگه دارنده flex به صورت زیر هستند:

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

ویژگی flex-direction

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

مثال

مقدار column آیتم‌های flex را به صورت عمودی (از بالا به پایین) می‌چیند:

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

مشاهدهٔ نتیجه

مثال

مقدار column-reverse آیتم‌های flex را به صورت عمودی بالعکس (از پایین به بالا) می‌چیند:

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

مشاهدهٔ نتیجه

مثال

مقدار row آیتم‌های flex را به صورت افقی (از چپ به راست) می‌چیند:

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

مشاهدهٔ نتیجه

مثال

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

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

مشاهدهٔ نتیجه

ویژگی flex-wrap

ویژگی flex-wrap مشخص می‌کند که آیتم‌های flex می‌بایست به خط بعدی بروند یا خیر.

برای درک بهتر ویژگی flex-wrap مثال زیر 12 آیتم flex دارد.

مثال

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

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

مشاهدهٔ نتیجه

مثال

مقدار nowrap مشخص می‌کند که آیتم‌های flext به خط بعدی نخواهند رفت (این مقدار پیش‌فرض است):

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

مشاهدهٔ نتیجه

مثال

مقدار wrap-reverse مشخص می‌کند که آیتم‌های flexible در صورت لزوم به ترتیب برعکس به خط بعدی خواهند رفت:

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

مشاهدهٔ نتیجه

ویژگی flex-flow

ویژگی flex-flow یک ویژگی مختصر برای تنظیم همزمان دو ویژگی flex-direction و flex-wrap است.

مثال

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

مشاهدهٔ نتیجه

ویژگی justify-content

ویژگی justify-content برای تراز کردن آیتم‌های flex استفاده می‌شود:

مثال

مقدار center آیتم‌های flex را در وسط نگه دارنده تراز می‌کند.

1 .flex-container {
2   display: flex;
3   justify-content: center;
4 }

مشاهدهٔ نتیجه

مثال

مقدار flex-start آیتم‌های flex را در ابتدای نگه دارنده (این مقدار پیش‌فرض است) تراز می‌کند:

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

مشاهدهٔ نتیجه

مثال

مقدار flex-end آیتم‌های flex را در انتهای نگه دارنده تراز می‌کند.

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

مشاهدهٔ نتیجه

مثال

مقدار space-around آیتم‌های flex را با فضایی خالی در قبل، بین، و بعد از خطوط نمایش می‌دهد:

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

مشاهدهٔ نتیجه

مثال

مقدار space-between آیتم‌های flex را با فاصله بین خطوط نمایش می‌دهد:

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

مشاهدهٔ نتیجه

ویژگی align-items

ویژگی align-items برای تراز کردن عمودی آیتم‌های flex استفاده می‌شود.

در این مثال‌ها ما از یک نگه دارنده ۲۰۰ پیکسلی بلند، برای درک بهتر ویژگی align-items استفاده می‌کنیم.

مثال

مقدار center آیتم‌های flex را در وسط نگه دارنده تراز می‌کند:

1 .flex-container {
2   display: flex;
3   height: 200px;
4   align-items: center;
5 }

مشاهدهٔ نتیجه

مثال

مقدا flex-start آیتم‌های flex را در بالای نگه دارنده تراز می‌کند:

1 .flex-container {
2   display: flex;
3   height: 200px;
4   align-items: flex-start;
5 }

مشاهدهٔ نتیجه

مثال

مقدار flex-end آیتم‌های flex را در پایین نگه دارنده تراز می‌کند:

1 .flex-container {
2   display: flex;
3   height: 200px;
4   align-items: flex-end;
5 }

مشاهدهٔ نتیجه

مثال

مقدار stretch آیتم‌های flex را می‌کِشد تا نگه دارنده را پر کنند (این گزینه پیش‌فرض است):

1 .flex-container {
2   display: flex;
3   height: 200px;
4   align-items: stretch;
5 }

مشاهدهٔ نتیجه

مثال

مقدار baseline آیتم‌های flex را همانند تراز baseline آنها تراز می‌کند:

1 .flex-container {
2   display: flex;
3   height: 200px;
4   align-items: baseline;
5 }

نکته: این مثال از font-sizeهای متفاوت برای نشان دادن اینکه آیتم‌ها توسط baseline متن خود تراز می‌شوند استفاده کرده‌است.

مشاهدهٔ نتیجه»

ویژگی align-content

ویژگی align-content برای تراز خطوط flex استفاده می‌شود.

در این مثال‌ها از یک نگه‌دارنده ۶۰۰ پیکسلی بلند، با ویژگی flex-wrap با مقدار wrap، برای بهتر نشان دادن ویژگی align-content استفاده می‌کنیم.

مثال

مقدار space-between خطوط flex را با فاصله ای یکسان بین آنها نمایش می‌دهد:

1 .flex-container {
2   display: flex;
3   height: 600px;
4   flex-wrap: wrap;
5   align-content: space-between;
6 }

مشاهدهٔ نتیجه

مثال

مقدار space-around خطوط flex را با فاصله قبل، بین، و بعد از آنها نشان می‌دهد:

1 .flex-container {
2   display: flex;
3   height: 600px;
4   flex-wrap: wrap;
5   align-content: space-around;
6 }

مشاهدهٔ نتیجه

مثال

مقدار stretch خطوط flex را می‌کشد تا فضای خالی باقی مانده را پر کنند (این مقدار پیش‌فرض است):

1 .flex-container {
2   display: flex;
3   height: 600px;
4   flex-wrap: wrap;
5   align-content: stretch;
6 }

مشاهدهٔ نتیجه

مثال

مقدار center خطوط flex را در وسط نگه دارنده نمایش می‌دهد:

1 .flex-container {
2   display: flex;
3   height: 600px;
4   flex-wrap: wrap;
5   align-content: center;
6 }

مشاهدهٔ نتیجه

مثال

مقدار flex-start خطوط flex را در ابتدای نگه‌دارنده نمایش می‌دهد:

1 .flex-container {
2   display: flex;
3   height: 600px;
4   flex-wrap: wrap;
5   align-content: flex-start;
6 }

مشاهدهٔ نتیجه

مثال

مقدار flex-end خطوط flex را در انتهای نگه‌دارنده نمایش می‌دهد:

1 .flex-container {
2   display: flex;
3   height: 600px;
4   flex-wrap: wrap;
5   align-content: flex-end;
6 }

مشاهدهٔ نتیجه

وسط چین کردن کامل

در مثال بعدی، مشکل رایج استایل را حل خواهیم کرد: وسط چین کردن کامل

راه حل: هر دو ویژگی justify-content و align-items را با مقدار center مقدار دهی کنید، و آیتم‌های flex بدون نقص وسط چین خواهند شد.

مثال

1 .flex-container {
2   display: flex;
3   height: 300px;
4   justify-content: center;
5   align-items: center;
6 }

مشاهدهٔ نتیجه

عناصر فرزند (آیتم‌ها)

عناصر فرزند مستقیم یک نگه دارنده flex به صورت خودکار به آیتم‌های flexible (flex) تبدیل می‌شوند.

عنصر بالا نشان دهنده چهار آیتم آبی flex درون یک نگه دارنده flex خاکستری است.

مثال

1 <div class="flex-container">
2   <div>1</div>
3   <div>2</div>
4   <div>3</div>
5   <div>4</div>
6 </div>

مشاهدهٔ نتیجه

ویژگی‌های آیتم flex عبارتند از:

• order

• flex-grow

• flex-shrink

• flex-basis

• flex

• align-self

ویژگی order (به فارسی: ترتیب)

ویژگی order مشخص کننده ترتیب عناصر flex است.

لزومی ندارد که اولین آیتم flex در کد، در چیدمان نیز به عنوان اولین آیتم نمایش داده شود.

مقدار order باید یک عدد باشد، مقدار پیش‌فرض صفر است.

مثال

ویژگی order می‌تواند ترتیب قرارگیری آیتم‌های flex را تغییر دهد:

1 <div class="flex-container">
2   <div style="order: 3">1</div>
3   <div style="order: 2">2</div>
4   <div style="order: 4">3</div>
5   <div style="order: 1">4</div>
6 </div>

مشاهدهٔ نتیجه

ویژگی flex-grow

ویژگی flex-grow مشخص می‌کند که یک آیتم flex نسبت به سایر آیتم‌های flex چقدر بزرگتر خواهد شد.

مقدار می‌بایست یک عدد باشد، مقدار پیش‌فرض عدد صفر است.

مثال

بزرگ‌شدن سومین آیتم flex هشت برابر سریع‌تر از سایر آیتم‌های flex:

1 <div class="flex-container">
2   <div style="flex-grow: 1">1</div>
3   <div style="flex-grow: 1">2</div>
4   <div style="flex-grow: 8">3</div>
5 </div>

مشاهدهٔ نتیجه

ویژگی flex-shrink

ویژگی flex-shrink مشخص می‌کند که یک آیتم flex نسبت به سایر آیتم‌های flex چقدر کوچکتر خواهد شد.

مقدار این ویژگی نیز می‌بایست یک عدد باشد، مقدار پیش‌فرض 1 است.

مثال

آیتم flex سوم اجازه کوچک شدن به اندازه سایر آیتم‌های flex را نمی دهد:

 1 <div class="flex-container">
 2   <div>1</div>
 3   <div>2</div>
 4   <div style="flex-shrink: 0">3</div>
 5   <div>4</div>
 6   <div>5</div>
 7   <div>6</div>
 8   <div>7</div>
 9   <div>8</div>
10   <div>9</div>
11   <div>10</div>
12 </div>

مشاهدهٔ نتیجه

ویژگی flex-basis

ویژگی flex-basis اندازه ابتدایی یک آیتم flex را مشخص می‌کند.

مثال

تنظیم طول ابتدایی سومین آیتم flex روی ۲۰۰ پیکسل:

1 <div class="flex-container">
2   <div>1</div>
3   <div>2</div>
4   <div style="flex-basis: 200px">3</div>
5   <div>4</div>
6 </div>

مشاهدهٔ نتیجه

ویژگی flex

ویژگی flex یک ویژگی مختصر برای ویژگی‌های flex-grow، flex-shrink و flex-basis است.

مثال

تبدیل سومین آیتم flex غیرقابل بزرگ شدن (۰)، غیرقابل کوچک شدن (۰)، و با طول ابتدایی ۲۰۰ پیکسل:

1 <div class="flex-container">
2   <div>1</div>
3   <div>2</div>
4   <div style="flex: 0 0 200px">3</div>
5   <div>4</div>
6 </div>

مشاهدهٔ نتیجه

ویژگی align-self

ویژگی align-self ترازبندی را برای آیتم انتخاب شده درون نگه دارنده flexible مشخص می‌کند.

ویژگی align-self ترازبندی پیش‌فرض را که توسط ویژگی align-items نگه‌دارنده تنظیم شده‌، بازنویسی می‌کند.

در این مثال‌ها از یک نگه‌دارنده با بلندی ۲۰۰ پیکسل، برای نمایش بهتر ویژگی align-self استفاده می‌کنیم:

مثال

تراز کردن آیتم سوم flex در وسط نگه دارنده:

1 <div class="flex-container">
2   <div>1</div>
3   <div>2</div>
4   <div style="align-self: center">3</div>
5   <div>4</div>
6 </div>

مشاهدهٔ نتیجه

مثال

تراز کردن دومین آیتم Flex در بالای نگه دارنده، و سومین آیتم flex در پایین نگه دارنده:

1 <div class="flex-container">
2   <div>1</div>
3   <div style="align-self: flex-start">2</div>
4   <div style="align-self: flex-end">3</div>
5   <div>4</div>
6 </div>

مشاهدهٔ نتیجه

گالری تصاویر واکنش گرا با Flexbox

از flexbox برای ساخت گالری تصاویر واکنش گرایی استفاده می کند که براساس اندازه صفحه نمایش، بین چهار، دو، یا تصاویر تمام صفحه متغیر است:

مشاهدهٔ نتیجه»

وب‌سایت واکنش گرا با Flexbox

از flexbox برای ساخت یک وب‌سایت واکنش گرا، شامل یک navigation bar منعطف (به انگلیسی: flexible) و محتوای منعطف استفاده می کند:

مشاهدهٔ نتیجه»

ویژگی‌های Flexbox در CSS

جدول زیر تمامی ویژگی‌های CSS که با flexboxاستفاده می‌شوند را لیست کرده‌است:

ویژگی	توضیحات
display	نوع جعبه مورد استفاده برای یک عنصر HTML را مشخص می‌کند
flex-direction	جهت آیتم‌های flexible درون یک نگه دارنده flex را مشخص می‌کند
justify-content	آیتم‌های flex را زمانی که آیتم‌ها تمام فضای در دسترس موجود در محور اصلی را استفاده نمی‌کنند به صورت افقی تراز می‌کند
align-items	آیتم‌های flex را زمانی که آیتم‌ها تمام فضای در دسترس موجود در محور اصلی را استفاده نمی‌کنند به صورت عمودی تراز می‌کند
flex-wrap	مشخص می‌کند که آیا آیتم‌های flex در صورت نبود فضای کافی در خط flex، می‌بایست به خط بعدی بروند یا نه
align-content	رفتار ویژگی flex-wrap را ویرایش می‌کند. این ویژگی شبیه به align-items است، اما به جای تراز بندی آیتم‌های flex، خطوط flex را تراز می‌کند
flex-flow	یک ویژگی مختصر برای ویژگی‌های flex-direction و Flex-wrap
order	ترتیب یک آیتم flexible را نسبت به سایر آیتم‌های flex درون نگه دارنده یکسان، مشخص می‌کند
align-self	برای آیتم‌های flex استفاده می‌شود. ویژگی align-items نگه دارنده را بازنویسی می‌کند
flex	یک ویژگی مختصر برای ویژگی‌های flex-grow ,flex-shirnk و flex-basis

صفحهٔ بعد»

«صفحهٔ قبل