آموزش کار با flex-grow، flex-shrink و flex-basis در CSS Flexbox: مدیریت اندازه و فضای عناصر

Flexbox یکی از ابزارهای قدرتمند در CSS است که به شما امکان می‌دهد چیدمان‌های انعطاف‌پذیر و واکنش‌گرا ایجاد کنید. سه ویژگی اصلی flex-grow، flex-shrink و flex-basis به شما کنترل کاملی روی اندازه و رفتار Flex Items درون یک Flex Container می‌دهند. این ویژگی‌ها به شما کمک می‌کنند تا نحوه بزرگ یا کوچک شدن و فضای اولیه هر آیتم را مشخص کنید. در این مقاله، به بررسی هر یک از این ویژگی‌ها و نحوه استفاده از آن‌ها می‌پردازیم.

آشنایی با Flexbox و اصول آن

Flexbox یک سیستم چیدمان مدرن در CSS است که به شما امکان می‌دهد عناصر را به صورت افقی و عمودی مرتب کرده و فضای خالی را بین آن‌ها مدیریت کنید. ویژگی‌های flex-grow، flex-shrink و flex-basis برای تنظیم نحوه توزیع و مقیاس‌دهی آیتم‌ها در Flexbox به کار می‌روند.

ویژگی flex-grow: رشد عناصر در فضای خالی

flex-grow تعیین می‌کند که یک Flex Item به چه نسبتی فضای خالی موجود در Flex Container را پر کند. مقدار این ویژگی می‌تواند عددی مثبت مانند 1، 2 یا بیشتر باشد.

• flex-grow: 0 (پیش‌فرض): عنصر رشد نمی‌کند و فضای بیشتری نمی‌گیرد.

• flex-grow: 1: عنصر فضای خالی را به‌طور مساوی با سایر عناصر دارای flex-grow پر می‌کند.

• flex-grow: 2 و بیشتر: عنصر دو برابر یا بیشتر از عنصر دارای flex-grow: 1 فضای خالی را پر می‌کند.

مثال استفاده از flex-grow

.container {
  display: flex;
}

.item1 {
  flex-grow: 1;
  background-color: #3498db;
}

.item2 {
  flex-grow: 2;
  background-color: #e74c3c;
}

در اینجا:

• item1 و item2 هر دو در Flex Container قرار دارند.

• item1 یک واحد از فضای خالی و item2 دو واحد از فضای خالی را می‌گیرند.

ویژگی flex-shrink: کوچک شدن عناصر در کمبود فضا

flex-shrink مشخص می‌کند که یک Flex Item به چه نسبت کوچک شود وقتی که فضای Flex Container کمتر از فضای مورد نیاز آیتم‌ها باشد. مقدار این ویژگی عددی است که مشخص می‌کند عنصر به چه نسبتی کوچک شود.

• flex-shrink: 0: عنصر کوچک نمی‌شود و اندازه آن ثابت می‌ماند.

• flex-shrink: 1 (پیش‌فرض): عنصر به طور طبیعی کوچک می‌شود تا با دیگر عناصر جا بگیرد.

• flex-shrink: 2 و بیشتر: عنصر دو برابر یا بیشتر از عنصر دارای flex-shrink: 1 کوچک می‌شود.

مثال استفاده از flex-shrink

.container {
  display: flex;
  width: 300px;
}

.item1 {
  flex-shrink: 1;
  width: 200px;
  background-color: #3498db;
}

.item2 {
  flex-shrink: 2;
  width: 200px;
  background-color: #2ecc71;
}

در اینجا:

• container عرض 300 پیکسل دارد که برای دو آیتم با عرض 200 پیکسل کافی نیست.

• item1 یک واحد کوچک می‌شود و item2 دو واحد کوچک می‌شود تا در فضای container جا بگیرد.

ویژگی flex-basis: اندازه اولیه عناصر

flex-basis تعیین می‌کند که فضای اولیه‌ای که یک عنصر در Flex Container اشغال می‌کند چقدر باشد. این ویژگی می‌تواند مقدار ثابت (مثل پیکسل یا درصد) یا auto باشد.

• flex-basis: auto (پیش‌فرض): عنصر فضای خود را بر اساس محتوا یا مقدار width اشغال می‌کند.

• flex-basis: Xpx/%: عنصر فضایی معادل با مقدار مشخص‌شده را اشغال می‌کند.

مثال استفاده از flex-basis

.container {
  display: flex;
}

.item1 {
  flex-basis: 100px;
  background-color: #3498db;
}

.item2 {
  flex-basis: 200px;
  background-color: #e74c3c;
}

در اینجا:

• item1 با flex-basis: 100px 100 پیکسل از فضا را اشغال می‌کند.

• item2 با flex-basis: 200px 200 پیکسل از فضا را می‌گیرد.

ترکیب flex-grow، flex-shrink و flex-basis برای کنترل کامل چیدمان

با ترکیب این سه ویژگی می‌توانید کنترل کاملی بر روی رشد، کوچک شدن و فضای اولیه آیتم‌ها داشته باشید. این ترکیب به شما این امکان را می‌دهد که چیدمان‌های پیچیده و انعطاف‌پذیری را ایجاد کنید.

مثال ترکیب flex-grow، flex-shrink و flex-basis

.container {
  display: flex;
  width: 500px;
}

.item1 {
  flex: 1 1 100px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 100px */
  background-color: #3498db;
}

.item2 {
  flex: 2 1 200px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 200px */
  background-color: #e74c3c;
}

در اینجا:

• item1 و item2 هر دو در Flex Container قرار دارند.

• item1 دارای flex-grow: 1 و item2 دارای flex-grow: 2 است، به این معنی که item2 دو برابر بیشتر از item1 رشد می‌کند.

• flex-basis فضای اولیه را برای هر آیتم مشخص می‌کند: item1 با 100 پیکسل و item2 با 200 پیکسل شروع می‌شوند.

نحوه استفاده از مقدار shorthand برای flex

برای ساده‌سازی نوشتن، می‌توانید از ویژگی shorthand flex استفاده کنید که ترتیب flex-grow flex-shrink flex-basis را دنبال می‌کند.

.item1 {
  flex: 1 1 100px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 100px */
}

.item2 {
  flex: 2 1 200px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 200px */
}

در اینجا، با استفاده از مقدار shorthand، می‌توانید سه ویژگی را به صورت ترکیبی و با یک خط کد تعریف کنید.

نکات و بهترین شیوه‌ها برای استفاده از flex-grow، flex-shrink و flex-basis

• آزمایش و تنظیم دقیق مقادیر: برای دستیابی به چیدمان مورد نظر، مقادیر این ویژگی‌ها را با دقت تنظیم و تست کنید.

• استفاده از flex-basis برای تعیین فضای اولیه: از flex-basis برای تنظیم اندازه اولیه عناصر استفاده کنید و سپس با flex-grow و flex-shrink فضای اضافی را کنترل کنید.

• توجه به ترکیب flex: ترکیب flex-grow، flex-shrink و flex-basis در شورت‌هند flex به شما امکان می‌دهد چیدمان‌های انعطاف‌پذیر و پیچیده‌تری ایجاد کنید.

نتیجه‌گیری

ویژگی‌های flex-grow، flex-shrink و flex-basis در CSS ابزارهای قدرتمندی برای کنترل نحوه چیدمان و اندازه Flex Items درون یک Flex Container هستند. با درک و استفاده مناسب از این ویژگی‌ها می‌توانید چیدمان‌های انعطاف‌پذیر و واکنش‌گرا ایجاد کنید و تجربه کاربری بهتری برای کاربران فراهم کنید. Flexbox به شما این امکان را می‌دهد که به سادگی و با کدهای کمتر، چیدمان‌های پیچیده و حرفه‌ای طراحی کنید.