Các align-selfbất động sản là một tiểu tài sản của các mô-đun linh hoạt Box Layout.
Nó có thể ghi đè align-itemsgiá trị cho các mục linh hoạt cụ thể.
Các align-selfbất động sản chấp nhận 5 giá trị tương tự như align-items:
flex-start: cạnh lề bắt đầu chéo của mục được đặt trên đường bắt đầu chéoflex-end: cạnh lề chéo cuối của mục được đặt trên dòng chéo cuốicenter: mục được căn giữa trong trục chéobaseline: các mục được căn chỉnh chẳng hạn như đường cơ sở của chúng được căn chỉnhstretch(mặc định): kéo dài để lấp đầy vùng chứa (vẫn tuân theo chiều rộng tối thiểu / chiều rộng tối đa)
Cú pháp
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Bản giới thiệu
Bản trình diễn sau đây cho thấy cách một mục có thể tự căn chỉnh trong vùng chứa linh hoạt tùy thuộc vào align-selfgiá trị:
- Mục đầu tiên được đặt thành
flex-start - Mục thứ 2 được đặt thành
flex-end - Mục thứ 3 được đặt thành
center - Mục thứ 4 được đặt thành
baseline - Mục thứ 5 được đặt thành
stretch
Xem bản trình diễn Pen align-self bằng CSS-Tricks (@ css-trick) trên CodePen.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6.1 * |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
Để biết thêm thông tin về cách kết hợp các cú pháp để nhận được hỗ trợ trình duyệt tốt nhất, vui lòng tham khảo bài viết này (CSS-Tricks) hoặc bài viết này (DevOpera).