قلب فلکسباکس: ۳ ویژگی اصلی ظرف (Container)

قلب فلکسباکس: ۳ ویژگی اصلی ظرف (Container)
تنظیمات کانتینر Flex: چیدمان، جهت و پیچش! 🗂️
سلام دوستان عزیز! توی درس قبلی با دنیای جذاب Flexbox آشنا شدیم و اصطلاحات کلیدیش مثل Flex Container و Flex Items رو یاد گرفتیم. حالا وقتشه که عمیقتر بشیم و سه تا از مهمترین خصوصیتهایی که روی خودِ کانتینر فلکس اعمال میشن رو بررسی کنیم: display: flex
، flex-direction
و flex-wrap
. این سه تا، پایهی اصلی شکلدهی چیدمان ما هستن! بزن بریم که یاد بگیریم چطور کانتینرمون رو تنظیم کنیم! 🛠️
1. `display: flex;` یا `inline-flex;`: آغاز جادوی فلکس! ✨
اولین و مهمترین قدم برای استفاده از Flexbox، اینه که کانتینر مورد نظرمون رو به یه “فلکس کانتینر” تبدیل کنیم. این کار با دو مقدار انجام میشه:
- `display: flex;`: این مقدار، کانتینر رو به یه block-level flex container تبدیل میکنه. یعنی خودش مثل یه بلوک عمل میکنه و یه خط جدید ایجاد میکنه.
- `display: inline-flex;`: این مقدار، کانتینر رو به یه inline-level flex container تبدیل میکنه. یعنی خودش مثل یه عنصر inline رفتار میکنه و کنار عناصر دیگه قرار میگیره، اما محتوای داخلش (آیتمهای فلکس) همچنان طبق قوانین فلکسباکس چیده میشن.
وقتی این خصوصیت رو اعمال میکنیم، فرزندان مستقیمش (فقط فرزندان مستقیم!) به Flex Items تبدیل میشن و رفتارشون کاملاً تحت تاثیر قوانین فلکسباکس قرار میگیره.
.my-flex-container-block {
display: flex; /* این کانتینر مثل یک بلوک رفتار میکنه */
background-color: #f3e5f5; /* رنگ پسزمینه برای نمایش */
padding: 15px;
border: 1px solid #ab47bc;
margin-bottom: 20px;
}
.my-flex-container-inline {
display: inline-flex; /* این کانتینر کنار بقیه عناصر قرار میگیره */
background-color: #e1bee7; /* رنگ پسزمینه برای نمایش */
padding: 15px;
border: 1px solid #ba68c8;
}
.flex-item {
background-color: #ce93d8;
padding: 10px;
margin: 5px;
color: white;
font-weight: bold;
}
معمولاً برای چیدمان اصلی صفحه از `display: flex;` استفاده میکنیم و برای عناصری که نیاز دارن کنار هم قرار بگیرن ولی خودشون هم جزئی از جریان عادی صفحه باشن، `display: inline-flex;` مناسبه.
2. `flex-direction`: تعیین جهت محور اصلی! 🧭
این خصوصیت مشخص میکنه که آیتمهای فلکس چطور در Main Axis (محور اصلی) چیده بشن. یعنی محور اصلی افقی باشه یا عمودی؟
- `row` (پیشفرض): آیتمها در یه ردیف و از چپ به راست چیده میشن. Main Axis افقی هست.
- `row-reverse`: آیتمها در یه ردیف ولی از راست به چپ چیده میشن. Main Axis افقی هست.
- `column`: آیتمها در یه ستون و از بالا به پایین چیده میشن. Main Axis عمودی هست.
- `column-reverse`: آیتمها در یه ستون ولی از پایین به بالا چیده میشن. Main Axis عمودی هست.
.container-row {
display: flex;
flex-direction: row; /* چیدمان در ردیف (پیشفرض) */
background-color: #e1bee7;
padding: 10px;
margin-bottom: 15px;
}
.container-column {
display: flex;
flex-direction: column; /* چیدمان در ستون */
height: 200px; /* ارتفاع لازم برای نمایش چیدمان ستونی */
background-color: #ce93d8;
padding: 10px;
margin-bottom: 15px;
}
.container-row-reverse {
display: flex;
flex-direction: row-reverse; /* ردیف، ولی از راست به چپ */
background-color: #f3e5f5;
padding: 10px;
margin-bottom: 15px;
}
.flex-item {
background-color: #ab47bc;
padding: 10px;
margin: 5px;
color: white;
}
`flex-direction` تعیین میکنه که محور اصلی چیه و این روی عملکرد خصوصیتهایی مثل `justify-content` و `align-items` تاثیر مستقیم داره.
3. `flex-wrap`: وقتی آیتمها جا نمیشن! ↩️
گاهی اوقات، آیتمهای فلکس اونقدر زیاد هستن یا عرضشون اونقدر زیاده که توی یه خط (Main Axis) جا نمیشن. اینجا خصوصیت flex-wrap
به کمک ما میاد تا تعیین کنیم چه اتفاقی بیفته.
- `nowrap` (پیشفرض): همه آیتمها سعی میکنن توی یه خط بمونن و اگه جا نباشه، کوچیک میشن (طبق
flex-shrink
) تا توی همون خط جا بشن. - `wrap`: اگه آیتمها توی یه خط جا نشدن، به خط بعدی میرن.
- `wrap-reverse`: آیتمها به خط بعدی میرن، اما خطوط جدید از پایین به بالا چیده میشن (برخلاف `wrap`).
.container-no-wrap {
display: flex;
flex-wrap: nowrap; /* همه در یک خط میمونن و کوچیک میشن */
background-color: #ce93d8;
padding: 10px;
width: 300px; /* عرض محدود برای نمایش */
}
.container-wrap {
display: flex;
flex-wrap: wrap; /* اگه جا نبود، برن خط بعدی */
background-color: #ab47bc;
padding: 10px;
width: 300px; /* عرض محدود */
}
.flex-item-wrap {
width: 100px; /* عرض ثابت برای آیتم */
height: 50px;
background-color: #8e24aa;
margin: 5px;
color: white;
text-align: center;
display: flex; /* برای وسط چین کردن متن داخل خودش */
justify-content: center;
align-items: center;
}
وقتی از `flex-wrap: wrap` استفاده میکنیم، حالا مفهوم “خط” یا “Row” (یا “Column” اگه `flex-direction` ستونی باشه) معنی پیدا میکنه و خصوصیت `align-content` هم فعال میشه تا بتونیم فضای بین این خطوط رو تنظیم کنیم.
4. جمعبندی و مثال ترکیبی! 💯
بیاید یه مثال ترکیبی بزنیم تا این مفاهیم رو بهتر درک کنیم:
.card-container {
display: flex; /* فعال کردن فلکس */
flex-direction: row; /* چیدمان در ردیف */
flex-wrap: wrap; /* اگر جا نبود، بره خط بعد */
justify-content: space-around; /* توزیع فضای خالی بین آیتمها */
align-items: center; /* همه آیتمها رو در محور عمودی وسط چین کن */
padding: 20px;
border: 2px solid #7e57c2;
background-color: #ede7f6;
}
.card {
width: 200px; /* عرض ثابت برای هر کارت */
height: 150px;
margin: 10px; /* فاصله بین کارتها */
background-color: #9575cd;
color: white;
font-size: 1.2em;
display: flex; /* استفاده از فلکس درونی برای وسط چین کردن متن */
justify-content: center;
align-items: center;
border-radius: 8px; /* گوشههای گرد */
box-shadow: 2px 2px 8px rgba(0,0,0,0.2); /* سایه */
}
با همین سه خصوصیت اصلی کانتینر فلکس، یعنی `display`, `flex-direction`, و `flex-wrap`، میتونیم چیدمانهای بسیار منعطفی ایجاد کنیم که به خوبی با اندازههای مختلف صفحه سازگار میشن.
این تنظیمات اولیه کانتینر فلکس، کلید اصلی برای ساخت Layoutهای مدرن و واکنشگرا هستن. با تمرین زیاد، به راحتی میتونین از قدرت Flexbox بهره ببرین! موفق باشید! 🎉
مقالات مرتبط
آخرین مقالات
کدهای تمیز: با متغیرها، CSS را هوشمند کنید! 💡
متغیرهای CSS (Custom Properties): کد تمیزتر، مدیریت راحتتر! 🎨 سلام به همگی! توی پروژههای CSS، خیلی وقتا پیش میاد که یه رنگ، یه فونت، یا یه فاصله رو بارها و بارها توی جاهای مختلف استفاده میکنیم. مثلاً رنگ اصلی سایتمون...
ساخت انیمیشنهای حرفهای با @keyframes (گام به گام)
CSS Animations: خلق انیمیشنهای پیچیده با @keyframes! 🎬 سلام به همگی! تا الان با Transitionها آشنا شدیم که تغییرات بین دو حالت رو نرم میکنن. اما اگه بخوایم انیمیشنهای پیچیدهتر، چند مرحلهای، یا حتی انیمیشنهایی که مدام تکرار میشن رو...
دگرگونی سایت با CSS: چرخش، تغییر اندازه و جابجایی
CSS Transforms: جابجایی، چرخش، تغییر اندازه و کج کردن عناصر! 🤸♀️ سلام دوستان! تا اینجا با انیمیشنهای نرم و پیوسته (Transitions) آشنا شدیم. اما گاهی وقتها نیاز داریم که عناصر HTML رو جابجا کنیم، بچرخونیم، اندازهشون رو عوض کنیم یا...
انتقالهای نرم: عناصر خود را متحرک کنید!
CSS Transitions: جادوی حرکت نرم و روان! ✨ سلام به همه! تا حالا شده یه سایت رو ببینید که با هاور کردن روی یه دکمه، رنگش نرم و قشنگ عوض میشه؟ یا با تغییر اندازه یه عنصر، انیمیشن ظریفی رو...