در حال بارگذاری...

آیتم‌های Flex در CSS

درس Flex Container پدر را هدایت کرد. آیتم‌های flex سؤال دیگری می‌پرسند: هر فرزند داخل آن ردیف یا ستون چطور رشد کند، جمع شود و اندازهٔ شروع بگیرد؟ قبل از الگوهای واکنش‌گرای flex، basis و grow و shrink را مسلط شوید.

جعبهٔ ابزار آیتم‌های flex

📊 آیتم‌های flex یک‌نگاهه

ویژگی کار روزمره
flex-basis اندازهٔ اصلی شروع قبل از پخش فضای آزاد
flex-grow چقدر از فضای باقی‌مانده این آیتم برمی‌دارد (ضریب بدون واحد)
flex-shrink چقدر حاضر است وقتی جا تنگ است جمع شود
flex خلاصه برای grow و shrink و basis
align-self align-items کانتینر را برای یک آیتم لغو می‌کند
order ترتیب دیداری را عوض می‌کند (کم استفاده کنید — DOM و دسترسی‌پذیری را سالم نگه دارید)

basis را طول شروع ترجیحی آیتم روی محور اصلی بدانید. بعد grow و shrink روی فضای آزاد یا کمبود مانده مذاکره می‌کنند.

flex-grow — فضای باقی را بردار

ضریب 1 اجازه می‌دهد آیتم در فضای آزاد بزرگ شود. ضریب خواهرها رقابت می‌کنند: دو آیتم با flex-grow: 1 باقی را نصف می‌کنند.

ستون اصلی رشدکننده

css 
.layout {
display: flex;
gap: 1rem;
}

.layout__main {
flex-grow: 1;
}

.layout__aside {
flex-grow: 0;
width: 14rem;
}

flex-basis — از یک اندازه شروع کن

flex-basis اندازهٔ اصلی شروع را قبل از حساب grow/shrink می‌گذارد. برای الگوریتم flex، basis را ترجیح دهید؛ width/height هنوز مهم‌اند، ولی نقطهٔ شروع بومی flex همان basis است.

سایدبار با basis

css 
.layout__aside {
flex-basis: 14rem;
flex-grow: 0;
flex-shrink: 0;
}

flex-shrink — فضا را برگردان

وقتی ردیف تنگ است، ضریب shrink مشخص می‌کند چه کسی فشرده شود. flex-shrink: 0 آیکن یا ریل ثابت را از له شدن حفظ می‌کند.

محافظت از له شدن

css 
.icon-rail {
flex-shrink: 0;
flex-basis: 3rem;
}

خلاصهٔ flex

flex: grow shrink basis این سه را جمع می‌کند. پیش‌فرض آرام رایج: flex: 1 برای فرزند پرکننده؛ flex: 0 0 auto برای چیپ سفت.

خلاصهٔ flex

css 
.card__body {
flex: 1 1 auto;
}

.card__badge {
flex: 0 0 auto;
}

align-self — یک آیتم، تراز متقاطع جدا

align-items کانتینر را برای یک فرزند لغو کنید. وقتی یک نشان باید به شروع بچسبد و خواهرها وسط بمانند مفید است.

لغو با align-self

css 
.row {
display: flex;
align-items: center;
gap: 0.75rem;
}

.row .note {
align-self: flex-start;
}

عادت آرام آیتم flex

اول basis برای اندازهٔ عمدی، بعد ضریب grow/shrink، بعد خلاصه برای مرتب‌کردن. align-self را کم به کار ببرید. از ترفند order که جریان صفحه‌کلید و صفحه‌خوان را به هم می‌زند دوری کنید — الگوهای media-query را برای Flex Responsive بگذارید.

نقش‌های نام‌دار آیتم

css 
.cluster__main {
flex: 1 1 auto;
}

.cluster__meta {
flex: 0 0 auto;
align-self: center;
}

خودتان امتحان کنید

  1. ردیف main + aside بسازید؛ به main مقدار flex-grow: 1 بدهید.
  2. aside را با flex-basis: 14rem و flex-shrink: 0 تنظیم کنید.
  3. یک آیکن را با flex-shrink: 0 محافظت کنید.
  4. grow/shrink/basis را با خلاصهٔ flex بازنویسی کنید.
  5. تراز متقاطع یک فرزند را با align-self لغو کنید.

اشتباه‌های رایج

  • گذاشتن flex-grow روی کانتینر به‌جای آیتم
  • قاطی کردن width با flex-basis و تعجب از اختلاف حساب flex
  • جابه‌جایی با order و خراب کردن ترتیب tab/منبع
  • له شدن لوگو چون shrink روی پیش‌فرض ماند
  • دیدن این درس مثل ماژول Flex Responsive

جمع‌بندی

  • آیتم‌های flex رشد، جمع‌شدن و basis شروع را کنترل می‌کنند
  • flex-grow فضای آزاد را تقسیم می‌کند؛ flex-shrink فشار تنگی را
  • flex-basis اندازهٔ شروع flex روی محور اصلی است
  • خلاصهٔ flex و align-self فرزندان را ریز می‌کنند
  • الگوی واکنش‌گرای flex بعدی است؛ order را با احتیاط به کار ببرید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
7
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 47 از 51
Css آموزش