Flexbox

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
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 در تمامی مرورگرهای مدرن پشتیبانی می‌شود.

Chrome Internet Explorer / Edge Firefox Safari Opera
۲۹٫۰ ۱۱٫۰ ۲۲٫۰ ۱۰ ۴۸

عناصر 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-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 (به فارسی: ترتیب)

ویژگی 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


منابع آموزشی