Menyelaraskan diri - Trik CSS

Anonim

The align-selfproperti adalah sub-properti dari modul Fleksibel Box Layout.

Ini memungkinkan untuk mengganti align-itemsnilai untuk item flex tertentu.

The align-selfproperti menerima 5 nilai sama dengan align-items:

  • flex-start: tepi margin silang item ditempatkan pada garis silang awal
  • flex-end: tepi margin silang item ditempatkan pada garis silang ujung
  • center: item dipusatkan di sumbu silang
  • baseline: item diratakan seperti garis dasarnya disejajarkan
  • stretch (default): regangkan untuk mengisi wadah (tetap menghormati min-width / max-width)

Sintaksis

align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )

Demo

Demo berikut menunjukkan bagaimana sebuah item dapat menyelaraskan dirinya dalam wadah flex tergantung pada align-selfnilainya:

  • Item pertama disetel ke flex-start
  • Item ke-2 disetel ke flex-end
  • Item ke-3 disetel ke center
  • Item ke-4 disetel ke baseline
  • Item ke-5 disetel ke stretch

Lihat demo Pen align-self oleh CSS-Tricks (@ css-trick) di CodePen.

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
21 * 28 11 12 6.1 *

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7.0-7.1 *

Untuk informasi lebih lanjut tentang cara mencampur sintaks untuk mendapatkan dukungan browser terbaik, silakan lihat artikel ini (Trik CSS) atau artikel ini (DevOpera).