CSS – کانتینر فلکس (Flex Container)

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

ویژگی‌های Flex Container

Flex Container دارای ویژگی‌های زیر است که هر کدام برای تنظیم چینش و نحوه قرارگیری Flex Items استفاده می‌شوند:

  • flex-direction: جهت چینش عناصر فرزند را مشخص می‌کند.
  • flex-wrap: تعیین می‌کند که آیا عناصر باید در چند خط قرار بگیرند یا نه.
  • flex-flow: یک ویژگی ترکیبی برای flex-direction و flex-wrap است.
  • justify-content: نحوه چینش عناصر را در محور اصلی مشخص می‌کند.
  • align-items: نحوه چینش عناصر را در محور عمودی یا متقاطع تنظیم می‌کند.
  • align-content: چینش خطوط flex را در محور عمودی کنترل می‌کند.

ویژگی flex-direction

این ویژگی جهت قرارگیری Flex Items را تعیین می‌کند. مقادیر زیر برای این ویژگی وجود دارد:

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

مثال:

.flex-container {
  display: flex;
  flex-direction: row; /* پیش‌فرض: افقی از چپ به راست */
}

ویژگی flex-wrap

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

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

مثال:

.flex-container {
  display: flex;
  flex-wrap: wrap; /* عناصر به خط بعدی می‌روند */
}

ویژگی flex-flow

این ویژگی ترکیبی از flex-direction و flex-wrap است.

مثال:

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

ویژگی justify-content

این ویژگی عناصر را در محور اصلی (معمولاً محور افقی) تراز می‌کند.

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

مثال:

.flex-container {
  display: flex;
  justify-content: center; /* عناصر در وسط قرار می‌گیرند */
}

ویژگی align-items

این ویژگی نحوه چینش Flex Items را در محور عمودی (محور متقاطع) مشخص می‌کند.

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

مثال:

.flex-container {
  display: flex;
  align-items: center; /* عناصر در وسط محور عمودی قرار می‌گیرند */
}

ویژگی align-content

این ویژگی برای تنظیم نحوه چینش خطوط Flex در ظرف استفاده می‌شود.

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

مثال:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center; /* خطوط در وسط ظرف قرار می‌گیرند */
}

تراز کردن کامل (Perfect Centering)

برای تراز کردن کامل یک عنصر در هر دو محور (افقی و عمودی)، از ترکیب ویژگی‌های justify-content: center; و align-items: center; استفاده می‌شود.

مثال:

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center; /* تراز وسط کامل */
}

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.