align-items و align-self دو ویژگی در CSS هستند که برای تنظیم قرارگیری المان‌ها در یک container به کار می‌روند. با استفاده از این ویژگی‌ها می‌توانیم المان‌ها را بر اساس محور عمودی به هم تنظیم کنیم.
ویژگی align-items به container اجازه می‌دهد تا المان‌ها را در یک خط عمودی ترتیب دهد، به گونه‌ای که تمام المان‌ها بر اساس یک محور عمودی قرار بگیرند. این ویژگی به چندین مقدار مانند center، flex-start، flex-end، stretch و baseline پشتیبانی می‌کند.
از طرفی align-self این امکان را به المان‌ها می‌دهد تا خودشان را در container به صورت انعطاف پذیر ایستاده کنند. با استفاده از این ویژگی، می‌توانید مکان قرارگیری هر المان را به صورت جداگانه تنظیم کنید.
برای استفاده از align-items و align-self، ابتدا باید یک container و المان‌ها مربوطه را ایجاد کنید. سپس به container مقدار مورد نظر برای align-items را اعمال کنید. اگر می‌خواهید تنها بر روی یکی از المان‌ها تاثیر بگذارید، می‌توانید به آن المان مقدار align-self را اعمال کنید.
به عنوان مثال، فرض کنید یک container با دو المان داریم و میخواهیم المان اول در وسط قرار گیرد و المان دوم در انتهای container. برای این کار می‌توانیم به container مقدار center برای align-items و به المان دوم مقدار flex-end برای align-self اختصاص دهیم.
به طور کلی، با استفاده از align-items و align-self، می‌توانید تنظیمات مورد نظر خود را برای قرارگیری المان‌ها در یک صفحه وب اعمال کنید و آن‌ها را به صورت دقیق و انعطاف پذیر مدیریت کنید.
با این ویژگی‌ها، می‌توانید طراحی و ساختار صفحات وب خود را بهبود بخشید و آن‌ها را به نحوی قرار دهید که منطبق با نیازهای کاربران و زیبا باشند.با اعمال این نکات و تکنیک‌های مناسب، می‌توانید به صورت بهینه تر و موثرتری المان‌ها را در صفحات وب خود قرار دهید و تجربه کاربری بهتری برای کاربران خود فراهم کنید.
چگونه از align-item/self استفاده کنیم؟
