آیتم های فلکس (Flex Items) در CSS
در فلکس باکس، «آیتم های فلکس (Flex Items)» فرزندان مستقیم کانتینر هستند و پس از فعال سازی فلکس، می توانید ترتیب، رشد، جمع شدن، اندازه اولیه و ترازبندی هر آیتم را دقیق کنترل کنید.
ویژگی های اصلی آیتم های فلکس
هر آیتم می تواند این ویژگی ها را داشته باشد: order، flex-grow، flex-shrink، flex-basis، شورت هند flex و همچنین align-self برای ترازبندی مستقل از سایر آیتم ها.
تنظیم ترتیب نمایش با order
با order می توانید ترتیب نمایش را مستقل از ترتیب کد تغییر دهید. مقدار پیش فرض 0 است؛ بنابراین، مقدار کمتر جلوتر نمایش داده می شود.
.item-1 { order: 3; } .item-2 { order: 2; } .item-3 { order: 4; } .item-4 { order: 1; }رشد نسبی با flex-grow
ویژگی flex-grow نرخ رشد آیتم را نسبت به سایرین تعیین می کند. مقدار باید عدد باشد و پیش فرض 0 است.
.item-1 { flex-grow: 1; } .item-2 { flex-grow: 1; } .item-3 { flex-grow: 4; }کوچک شدن نسبی با flex-shrink
وقتی فضا کم است، flex-shrink مشخص می کند آیتم چه قدر جمع شود. مقدار باید عدد باشد و پیش فرض 1 است.
.item-3 { flex-shrink: 2; }اندازه اولیه با flex-basis
برای تعیین طول اولیه آیتم از flex-basis استفاده کنید؛ سپس، رشد یا جمع شدن روی آن اعمال می شود.
.item-3 { flex-basis: 250px; }شورت هند flex (grow | shrink | basis)
برای نوشتار کوتاه تر، از flex استفاده کنید؛ ترتیب مقادیر به صورت grow، shrink و سپس basis است.
.item-3 { flex: 1 0 150px; }ترازبندی مستقل هر آیتم با align-self
اگر لازم است یک آیتم خلافِ align-items کانتینر تراز شود، از align-self با مقادیری مانند center، flex-start و flex-end بهره ببرید.
.item-2 { align-self: flex-start; } .item-3 { align-self: center; } .item-4 { align-self: flex-end; }نکته: برای درک بهتر محورها و ترازبندی سراسری، ابتدا کانتینر فلکس را مرور کنید؛ سپس، راهنمای فلکس باکس را کامل بخوانید. همچنین برای سهولت دسترسی، پیوند «آیتم های فلکس» را در بوکمارک های آموزشی خود نگه دارید.
منابع پیشنهادی
MDN: flex (شورت هند) و MDN: align-self جزئیات و نکته های بیشتر را ارائه می کنند.