Flexbox CSS

1
2
3
4
5
6
7
8

آزمایش کنید

مدول قالب‌بندی Flexbox CSS

قبل از معرفی مدول قالب‌بندی Flexbox، مدل‌های قالب‌بندی موجود شامل چهار مدل زیر است:

  • بلاک (Block)، برای بخش‌های وب (قسمت‌ها)
  • درونی (Inline)، برای متن
  • جدول، برای داده‌های جدول دو بعدی
  • موقعیت‌دهی، برای موقعیت دقیق عناصر

مدول布局 Flexbox، که می‌توانید به راحتی ساختارهای قالب‌بندی پاسخگو را طراحی کنید، بدون نیاز به استفاده از شناور یا موقعیت‌دهی.

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

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

29.0 11.0 22.0 10 48

عناصر Flexbox

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

1
2
3

عناصر بالا نشان‌دهنده یک قالب انعطاف‌پذیر با سه پروژه flex (منطقه آبی) هستند.

مثال

قالب انعطاف‌پذیر شامل سه پروژه flex است:

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

آزمایش کنید

عنصر والد (قالب)

از طریق تنظیم: display ویژگی تنظیم شده به صورت: flexقالب انعطاف‌پذیر قابل تنظیم خواهد بود:

1
2
3

مثال

.flex-container {
  display: flex;
}

آزمایش کنید

در زیر ویژگی‌های قالب انعطاف‌پذیر آورده شده است:

خصوصیت flex-direction

flex-direction ویژگی تعیین می‌کند که پروژه‌های flex در کدام جهت قرار می‌گیرند.

1
2
3

مثال

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 وجود دارد تا ویژگی flex-wrap بهتر نمایش داده شود.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

مثال

wrap مقدار نشان‌دهنده این است که پروژه‌های flex در صورت نیاز سطر می‌شوند:

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

آزمایش کنید

مثال

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

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

آزمایش کنید

مثال

wrap-reverse مقدار نشان‌دهنده این است که اگر نیاز باشد، پروژه‌های انعطاف‌پذیر به ترتیب معکوس سطر می‌شوند:

.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 پروژه‌ها استفاده می‌شود:

1
2
3

مثال

center مقدار، flex پروژه‌ها را در مرکز قالب تراز می‌کند:

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

آزمایش کنید

مثال

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 پروژه استفاده می‌شود.

1
2
3

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

مثال

center مقدار باعث هماهنگی پروژه‌های انعطاف‌پذیر در وسط پنجره می‌شود:

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

آزمایش کنید

مثال

flex-start مقدار باعث هماهنگی پروژه‌های انعطاف‌پذیر در بالا پنجره می‌شود:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

آزمایش کنید

مثال

flex-end مقدار باعث هماهنگی پروژه‌های انعطاف‌پذیر در پایین پنجره می‌شود:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

آزمایش کنید

مثال

stretch مقدار باعث کشیدن پروژه‌های انعطاف‌پذیر برای پر کردن پنجره می‌شود (پیش‌فرض):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

آزمایش کنید

مثال

baseline مقدار باعث هماهنگی خط پایه پروژه‌های انعطاف‌پذیر می‌شود:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

آزمایش کنید

توجه داشته باشید:در این مثال، ما از font-size‌های مختلف برای نمایش اینکه پروژه‌ها به خط پایه متن هماهنگ شده‌اند استفاده می‌کنیم:

1
2
3
4

خصوصیت align-content

align-content ویژگی برای هماهنگی خطوط انعطاف‌پذیر استفاده می‌شود.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

مثال

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

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

آزمایش کنید

مثال

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

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

آزمایش کنید

مثال

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

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

آزمایش کنید

مثال

center مقدار در وسط پنجره به خطوط انعطاف‌پذیر نمایش داده می‌شود:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

آزمایش کنید

مثال

flex-start مقدار در ابتدای پنجره به خطوط انعطاف‌پذیر نمایش داده می‌شود:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

آزمایش کنید

مثال

flex-end مقدار در انتها پنجره به خطوط انعطاف‌پذیر نمایش داده می‌شود:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

آزمایش کنید

وسط‌زدایی کامل

در مثال زیر، ما یک مشکل بسیار رایج در زمینه استایل را حل می‌کنیم: وسط‌زدایی کامل.

راه‌حل: قرار دادن justify-content و align-items تنظیمات ویژگی به وسط، سپس پروژه‌های انعطاف‌پذیر به طور کامل وسط قرار می‌گیرند:

مثال

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

آزمایش کنید

عناصر فرزند (پروژه‌ها)

عناصر مستقیم فرزند یک پنجره انعطاف‌پذیر به طور خودکار به پروژه‌های انعطاف‌پذیر تبدیل می‌شوند.

1
2
3
4

عناصر بالا چهار عنصر انعطاف‌پذیر آبی را در یک جعبه انعطاف‌پذیر خاکستری نشان می‌دهند.

مثال

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

آزمایش کنید

مشخصه‌هایی که برای عناصر انعطاف‌پذیر استفاده می‌شوند عبارتند از:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

مشخصه order

order این مشخصه ترتیب عناصر flex را تعیین می‌کند.

1
2
3
4

اولین عنصر flex در کد نباید در ترتیب نمایشی به عنوان اولین عنصر نمایش داده شود.

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

مثال

order این مشخصه می‌تواند ترتیب عناصر flex را تغییر دهد:

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

آزمایش کنید

مشخصه flex-grow

flex-grow این مشخصه مقدار افزایش یک عنصر flex را در مقایسه با سایر عناصر flex تعیین می‌کند.

1
2
3

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

مثال

سرعت افزایش سومین عنصر انعطاف‌پذیر را هشت برابر سایر عناصر انعطاف‌پذیر تنظیم کنید:

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

آزمایش کنید

مشخصه flex-shrink

flex-shrink این مشخصه مقدار کاهش یک عنصر flex را در مقایسه با سایر عناصر flex تعیین می‌کند.

1
2
3
4
5
6
7
8
9

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

مثال

اجازه ندهید سومین عنصر انعطاف‌پذیر به اندازه سایر عناصر انعطاف‌پذیر کاهش یابد:

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

آزمایش کنید

مشخصه flex-basis

flex-basis این مشخصه طول اولیه عنصرهای flex را تعیین می‌کند.

1
2
3
4

مثال

طول اولیه سومین عنصر انعطاف‌پذیر را به 200 پیکسل تنظیم کنید:

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

آزمایش کنید

مشخصه flex

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

مثال

سومین عنصر انعطاف‌پذیر را غیرقابل افزایش (0)، غیرقابل کاهش (0) و طول اولیه 200 پیکسل قرار دهید:

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

آزمایش کنید

مشخصه align-self

align-self مشخصه‌ای است که روش ترازبندی عناصر انتخاب شده در یک جعبه انعطاف‌پذیر را تعیین می‌کند.

align-self ویژگی‌ها جایگزین روش پیش‌فرض جایگزینی align-items محفظه خواهد شد.

1
2
3
4

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

مثال

سومین پروژه انعطاف‌پذیر را به وسط محفظه جابجا کنید:

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

آزمایش کنید

مثال

دومین پروژه انعطاف‌پذیر را در بالای محفظه قرار دهید، سومین پروژه انعطاف‌پذیر را در پایین محفظه قرار دهید:

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

آزمایش کنید

کتابخانه تصاویر انعطاف‌پذیر با استفاده از Flexbox

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

آزمایش کنید

وب‌سایت‌های پاسخگو با استفاده از Flexbox

با استفاده از flexbox وب‌سایت‌های پاسخگو ایجاد کنید که شامل ناوبری انعطاف‌پذیر و محتوای انعطاف‌پذیر هستند:

آزمایش کنید

ویژگی‌های CSS Flexbox

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

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