CSS - Thuộc tính place-self: Hướng dẫn cho người mới bắt đầu

Xin chào các nhà vô địch CSS tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của CSS và khám phá một thuộc tính nhỏ gọn nhưng rất hữu ích叫做 place-self. Đừng lo lắng nếu bạn là người mới; tôi sẽ dẫn bạn từng bước, như tôi đã làm với học sinh của mình trong nhiều năm. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể đặt các phần tử như một chuyên gia!

place-self là gì?

Trước khi chúng ta nhảy vào phần sâu hơn, hãy bắt đầu với những điều cơ bản. Thuộc tính place-self là một viết tắt để đặt cả hai thuộc tính align-self và justify-self trong một声明 duy nhất. Nó giống như giết hai con chim bằng một viên đá, nhưng nhân văn hơn và liên quan đến CSS!

Cú pháp

Cú pháp của place-self rất đơn giản:

place-self: <align-self> <justify-self>;

Nếu bạn cung cấp chỉ một giá trị, nó sẽ áp dụng cho cả align-self và justify-self. Đó giống như đặt một combo meal - bạn nhận được hai thứ với giá của một!

Các giá trị có thể sử dụng

Bây giờ, hãy nhìn vào các giá trị khác nhau mà chúng ta có thể sử dụng với place-self. Tôi sẽ trình bày chúng trong một bảng, điều này tôi thấy giúp học sinh dễ tiếp thu thông tin hơn:

Giá trị	Mô tả
auto	Phần tử kế thừa hành vi align-self/justify-self của container cha
normal	Phần tử được đặt theo luồng bình thường của tài liệu
start	Căn chỉnh phần tử vào đầu container
end	Căn chỉnh phần tử vào cuối container
center	Căn giữa phần tử trong container
stretch	Kéo giãn phần tử để phù hợp với container
flex-start	Căn chỉnh phần tử vào đầu container flex
flex-end	Căn chỉnh phần tử vào cuối container flex
self-start	Căn chỉnh phần tử vào đầu trục của nó
self-end	Căn chỉnh phần tử vào cuối trục của nó
baseline	Căn chỉnh phần tử vào baseline của container
first baseline	Căn chỉnh phần tử vào baseline đầu tiên của container
last baseline	Căn chỉnh phần tử vào baseline cuối cùng của container

Áp dụng cho

Thuộc tính place-self áp dụng cho các phần tử lưới và các phần tử flex. Nó giống như một siêu năng lực chỉ có một số siêu anh hùng (hoặc trong trường hợp của chúng ta, các phần tử) sở hữu!

Bây giờ, hãy cùng lặn vào một số ví dụ để xem các giá trị này hoạt động như thế nào trong thực tế.

CSS place-self - normal start Giá trị

.item {
place-self: normal start;
}

Lời khai này đặt phần tử theo luồng bình thường cho căn chỉnh và ở đầu container cho căn chỉnh theo chiều dọc. Nó giống như nói với phần tử của bạn, "Hãy bình thường, nhưng bắt đầu từ đầu!"

CSS place-self - auto center Giá trị

.item {
place-self: auto center;
}

Ở đây, chúng ta đang nói, "Kế thừa căn chỉnh từ cha, nhưng căn giữa theo chiều ngang." Điều này hoàn hảo khi bạn muốn phần tử của bạn theo luồng bình thường theo chiều dọc nhưng nổi bật theo chiều ngang.

CSS place-self - center normal Giá trị

.item {
place-self: center normal;
}

Điều này căn giữa phần tử theo chiều dọc nhưng giữ nó trong luồng bình thường theo chiều ngang. Hãy tưởng tượng phần tử của bạn đang ở một buổi tiệc - nó đang ở giữa phòng nhưng vẫn tuân theo quy tắc thông thường của buổi tiệc!

CSS place-self - end normal Giá trị

.item {
place-self: end normal;
}

Điều này căn chỉnh phần tử vào cuối container theo chiều dọc trong khi giữ nó trong luồng bình thường theo chiều ngang. Nó giống như phần tử của bạn đang đứng trên đầu ngón chân ở phía sau đám đông!

CSS place-self - start auto Giá trị

.item {
place-self: start auto;
}

Điều này đặt phần tử ở đầu container theo chiều dọc và kế thừa căn chỉnh theo chiều ngang. Nó nói, "Tôi sẽ bắt đầu ở trên cùng, nhưng tôi sẽ theo luồng bình thường theo chiều ngang."

CSS place-self - self-start auto Giá trị

.item {
place-self: self-start auto;
}

Điều này căn chỉnh phần tử vào đầu mép của nó theo chiều dọc và kế thừa căn chỉnh theo chiều ngang. Nó giống như phần tử của bạn đang nói, "Tôi sẽ làm điều tôi muốn theo chiều dọc, nhưng tôi sẽ theo đám đông theo chiều ngang."

CSS place-self - self-end normal Giá trị

.item {
place-self: self-end normal;
}

Điều này căn chỉnh phần tử vào cuối mép của nó theo chiều dọc và giữ nó trong luồng bình thường theo chiều ngang. Nó giống như phần tử của bạn đang với tới trời với双脚坚实地站在地上!

CSS place-self - flex-start auto Giá trị

.item {
place-self: flex-start auto;
}

Trong một container flex, điều này căn chỉnh phần tử vào đầu container theo chiều dọc và kế thừa căn chỉnh theo chiều ngang. Điều này hoàn hảo cho các phần tử flex muốn bắt đầu từ trên cùng nhưng theo luồng flex theo chiều ngang.

CSS place-self - flex-end normal Giá trị

.item {
place-self: flex-end normal;
}

Trong một container flex, điều này căn chỉnh phần tử vào cuối container theo chiều dọc và giữ nó trong luồng bình thường theo chiều ngang. Nó giống như phần tử flex của bạn đang làm một handstand!

CSS place-self - baseline normal Giá trị

.item {
place-self: baseline normal;
}

Điều này căn chỉnh baseline của phần tử với baseline của container theo chiều dọc và giữ nó trong luồng bình thường theo chiều ngang. Điều này rất tốt để giữ văn bản được căn chỉnh giữa các phần tử khác nhau.

CSS place-self - last baseline normal Giá trị

.item {
place-self: last baseline normal;
}

Tương tự như baseline, nhưng nó sử dụng baseline cuối cùng nếu có nhiều baseline. Nó giống như đảm bảo phần tử của bạn có lời cuối cùng!

CSS place-self - stretch auto Giá trị

.item {
place-self: stretch auto;
}

Điều này kéo giãn phần tử để phù hợp với container theo chiều dọc và kế thừa căn chỉnh theo chiều ngang. Nó giống như phần tử của bạn đang nói, "Tôi sẽ cao nhất có thể, nhưng tôi sẽ theo luồng bình thường theo chiều ngang."

Và thế là bạn đã có nó, các bạn! Chúng ta đã khám phá thuộc tính place-self và các giá trị khác nhau của nó. Nhớ rằng, chìa khóa để thành thạo CSS là thực hành. Vậy hãy tiếp tục, thử nghiệm với các giá trị này, kết hợp chúng và xem bạn có thể tạo ra những bố cục đẹp mắt nào!

Trong những năm dạy học của tôi, tôi đã thấy rằng học sinh nào thử nghiệm và vui vẻ với CSS thường học nhanh hơn và nhớ lâu hơn. Vậy đừng ngại sáng tạo! Ai biết được? Bạn có thể phát hiện ra một sự kết hợp trở thành phong cách đặc trưng của bạn.

Chúc mừng coding, và hy vọng các phần tử của bạn luôn được đặt chính xác!

Credits: Image by storyset