در 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; /* تراز وسط کامل */
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام