Menyelaraskan diri - Trik CSS

Anonim

Properti align-selfini adalah sub-hak milik modul Flexible Box Layout.

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

Tempat align-selfpenginapan ini menerima 5 nilai yang sama seperti align-items:

  • flex-start: tepi margin permulaan item diletakkan di garisan permulaan silang
  • flex-end: tepi sisi hujung item diletakkan di garisan hujung silang
  • center: item berpusat pada paksi silang
  • baseline: item diselaraskan seperti garis dasar mereka diselaraskan
  • stretch (lalai): meregangkan untuk mengisi bekas (masih menghormati lebar minimum / lebar maksimum)

Sintaks

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

Demo

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

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

Lihat demo penunjuk diri Pen oleh CSS-Tricks (@ css-tricks) di CodePen.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
21 * 28 11 12 6.1 *

Mudah Alih / Tablet

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

Untuk maklumat lebih lanjut mengenai cara mencampurkan sintaks untuk mendapatkan sokongan penyemak imbas terbaik, sila rujuk artikel ini (Trik CSS) atau artikel ini (DevOpera).