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; /* تراز وسط کامل */
}

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

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