همه موتورهای مرورگر اصلی اکنون از آخرین تراز خط پایه در شبکه CSS و flexbox پشتیبانی می کنند.
پشتیبانی مرورگر
- 108
- 108
- 52
- 16.2
تراز با استفاده از first
و last
کلمات کلیدی اکنون در همه موتورهای اصلی موجود است. این بدان معناست که ما می توانیم از آخرین تراز خط پایه به عنوان گزینه دیگری در هنگام تراز کردن گروه های اقلام انعطاف پذیر یا گرید استفاده کنیم.
اولین تراز خط پایه
اگر مقدار align-items
را روی baseline
تنظیم کنید، نتیجه اولین تراز خط پایه خواهد بود. بنابراین اولین خط پایه موردی که در حال تراز کردن هستید (که به عنوان موضوع تراز توصیف می شود) با اولین خط پایه سایر موارد در گروه همسو می شود. میتوانید این را در مثال زیر ببینید، جایی که دو مورد انعطافپذیر اول با استفاده از align-items: baseline
، بنابراین آنها در امتداد خط پایه ایجاد شده توسط متن بزرگتر تراز میشوند. آیتم نهایی با flex-start
تراز می شود و بنابراین با شروع ظرف فلکس تراز می شود.
آخرین تراز خط پایه
هنگام تراز کردن یک مورد گرید یا انعطافپذیر با مقدار last baseline
، آخرین خط پایه آن مورد با آخرین خط پایه گروه اشتراکگذاری خط پایه که بخشی از آن است، تراز میشود. مثال زیر آخرین تراز خط پایه را نشان می دهد، با اولین مورد انعطاف پذیر با آخرین خط متن در مورد بزرگتر تراز می شود. مورد نهایی در این گروه با flex-end
تراز شده است که انتهای ظرف انعطاف پذیر است.
تراز برگشتی
اگر موضوع تراز یک گروه اشتراک گذاری پایه برای تراز کردن نداشته باشد، از تراز مجدد استفاده می شود. برای baseline
و first baseline
تراز برگشتی start
است و برای last baseline
تراز برگشتی end
است.