تراز کردن عناصر در لیست شبکه‌های Angular Material

تراز کردن عناصر در یک لیست شبکه‌ای Angular Material می‌تواند در ابتدا چالش‌برانگیز باشد، اما با استفاده از ابزارها و ویژگی‌های مناسب، آسان می‌شود. Angular Material به عنوان یکی از محبوب‌ترین کتابخانه‌های رابط کاربری انگولار، امکانات فراوانی برای ایجاد رابط‌های کاربری زیبا و کاربردی فراهم می‌آورد. در این مطلب، نحوه تراز کردن عناصر در یک شبکه Angular Material را بررسی کرده و بهترین روش‌ها را معرفی می‌کنیم.

ابتدا برای اینکه بتوانیم از امکانات Angular Material استفاده کنیم، باید آن را در پروژه خود نصب کنیم. سپس به تعریف یک لیست شبکه‌ای بپردازیم و ببینیم چگونه می‌توانیم عناصر داخل آن را به صورت افقی و عمودی تراز کنیم.

برای این کار، از ویژگی‌های flexbox و ویژگی‌های CSS استفاده می‌کنیم که یکی از روش‌های نوین و قدرتمند برای تراز کردن عناصر در وب می‌باشد. با استفاده از flexbox می‌توانیم کنترل کاملی روی جهت، تراز و توزیع فضای خالی بین عناصر داشته باشیم.

در ادامه، یک نمونه ساده از نحوه تراز کردن عناصر در یک شبکه Angular Material با استفاده از CSS و Angular Flex Layout را بررسی خواهیم کرد. Angular Flex Layout یکی از ابزارهای قدرتمند برای مدیریت و چینش عناصر در پروژه‌های انگولاری است که به کمک آن می‌توانیم به راحتی و با استفاده از کلاس‌ها و دایرکتیوهای انگولار، رفتار شبکه‌ای دلخواه‌مان را پیاده‌سازی کنیم.

این روش به ما کمک می‌کند تا با نوشتن کمترین کد CSS و استفاده از قابلیت‌های بومی انگولار، به نتایج مورد نظر خود در طراحی واکنش‌گرا دست یابیم. در این مقاله، ابتدا کد‌های مورد نظر را معرفی کرده و سپس توضیحات خط به خط هر بخش از کد را ارائه خواهیم کرد تا به خوبی آن را درک کنید.

<mat-grid-list cols="3" rowHeight="2:1">
  <mat-grid-tile>
    <div class="center-content">
      First Tile
    </div>
  </mat-grid-tile>
  <mat-grid-tile>
    <div class="center-content">
      Second Tile
    </div>
  </mat-grid-tile>
  <mat-grid-tile>
    <div class="center-content">
      Third Tile
    </div>
  </mat-grid-tile>
</mat-grid-list>

<style>
.center-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>

توضیحات خط به خط کد