CSS - thuộc tính justify-self: Khám phá Đối chiếu phần tử lưới

Xin chào các pháp sư CSS tương lai! Hôm nay, chúng ta sẽ lặn vào thế giới kỳ diệu của thuộc tính justify-self. Là người giáo viên máy tính hàng xóm thân thiện của bạn, tôi ở đây để hướng dẫn bạn qua hành trình thú vị này. Nào, cầm lấy cây phép ảo của bạn (bàn phím), và hãy cùng thực hiện mộtfew CSS phép thuật!

justify-self là gì?

Trước khi chúng ta nhảy vào chi tiết, hãy hiểu thuộc tính justify-self thực sự làm gì. Hãy tưởng tượng bạn có một containner lưới, và bên trong nó, bạn có các phần tử lưới khác nhau. Thuộc tính justify-self cho phép bạn đối chiếu các phần tử lưới cá nhân theo trục inline (ngang). Nó giống như việc tặng mỗi phần tử một nhà tạo mẫu cá nhân để quyết định nó nên đứng ở đâu trong ánh đèn spotlight!

Cú pháp và các giá trị có thể

Cú pháp cơ bản cho justify-self rất đơn giản:

.grid-item {
justify-self: value;
}

Bây giờ, hãy xem xét tất cả các giá trị có thể:

Giá trị	Mô tả
auto	Trình duyệt quyết định việc đối chiếu
normal	Tương tự như auto
stretch	Kéo căng phần tử để lấp đầy ô
start	Đối chiếu vào mép bắt đầu của ô
end	Đối chiếu vào mép kết thúc của ô
center	Đặt phần tử ở giữa ô
flex-start	Đối chiếu vào mép bắt đầu (cho các containner flex)
flex-end	Đối chiếu vào mép kết thúc (cho các containner flex)
self-start	Đối chiếu vào mép bắt đầu dựa trên hướng của phần tử
self-end	Đối chiếu vào mép kết thúc dựa trên hướng của phần tử
left	Đối chiếu vào mép trái của ô
right	Đối chiếu vào mép phải của ô
baseline	Đối chiếu vào baseline của ô
last baseline	Đối chiếu vào baseline cuối cùng của ô

Wow, đó là một danh sách dài! Đừng lo lắng nếu nó có vẻ quá tải; chúng ta sẽ phân tích nó với các ví dụ.

Áp dụng cho

Trước khi chúng ta đi vào các ví dụ, điều quan trọng cần lưu ý là justify-self áp dụng cho:

• Các phần tử lưới
• Các phần tử được đặt vị trí tuyệt đối mà containner của chúng là containner lưới

Bây giờ, hãy khám phá từng giá trị với một số ví dụ thực tế!

CSS justify-self - auto Giá trị

.grid-item {
justify-self: auto;
}

Với auto, trình duyệt sẽ lái xe. Nó giống như nói với phần tử của bạn, "Đi nơi bạn nghĩ là tốt nhất!" Thường thì hành vi này tương tự như stretch.

CSS justify-self - normal Giá trị

.grid-item {
justify-self: normal;
}

normal là giá trị mặc định và thường hành động như stretch đối với các phần tử lưới. Nó là "Tôi cảm thấy may mắn" của các giá trị justify-self!

CSS justify-self - stretch Giá trị

.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
}

.grid-item {
justify-self: stretch;
background-color: lightblue;
}

Giá trị này kéo căng phần tử để lấp đầy toàn bộ chiều rộng của ô lưới. Nó giống như nói với phần tử của bạn, "Đi lớn hoặc về nhà!"

CSS justify-self - start Giá trị

.grid-item {
justify-self: start;
}

Điều này đối chiếu phần tử vào mép bắt đầu của ô lưới. Hãy tưởng tượng phần tử ôm vào tường trái của nó.

CSS justify-self - end Giá trị

.grid-item {
justify-self: end;
}

Ngược lại với start, điều này đẩy phần tử vào mép kết thúc của ô. Nó giống như phần tử đang chơi trốn tìm sau tường phải.

CSS justify-self - center Giá trị

.grid-item {
justify-self: center;
}

Điều này đặt phần tử chính giữa ô. Hoàn hảo cho những phần tử yêu thích được là trung tâm sự chú ý!

CSS justify-self - flex-start và flex-end Giá trị

.grid-item {
justify-self: flex-start; /* hoặc flex-end */
}

Các giá trị này tương tự như start và end nhưng thường được sử dụng trong ngữ cảnh flex. Trong các bố cục lưới, chúng thường hành động như start và end.

CSS justify-self - self-start và self-end Giá trị

.grid-item {
justify-self: self-start; /* hoặc self-end */
}

Những này đối chiếu phần tử dựa trên hướng của nó. Nếu hướng của phần tử là ltr (trái sang phải), self-start sẽ tương tự như start. Nó giống như phần tử có la bàn luôn chỉ về hướng bắc cá nhân của nó!

CSS justify-self - left và right Giá trị

.grid-item {
justify-self: left; /* hoặc right */
}

Những giá trị này đối chiếu phần tử vào mép trái hoặc phải của ô, không quan tâm đến chế độ viết hoặc hướng. Chúng giống như những cousin cứng đầu của start và end luôn biết họ muốn ở đâu.

CSS justify-self - baseline và last baseline Giá trị

.grid-item {
justify-self: baseline; /* hoặc last baseline */
}

Những này đối chiếu phần tử với baseline của ô lưới. Nó đặc biệt hữu ích khi bạn có nội dung văn bản và muốn đối chiếu nó hoàn hảo với văn bản trong các ô liền kề.

Kết hợp tất cả lại

Bây giờ chúng ta đã khám phá tất cả các giá trị, hãy tạo một ví dụ vui nhộn cho thấy nhiều giá trị justify-self cùng hoạt động:

<div class="grid-container">
<div class="grid-item start">Start</div>
<div class="grid-item end">End</div>
<div class="grid-item center">Center</div>
<div class="grid-item stretch">Stretch</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}

.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}

.start { justify-self: start; }
.end { justify-self: end; }
.center { justify-self: center; }
.stretch { justify-self: stretch; }

Trong ví dụ này, chúng ta có một containner lưới với bốn phần tử, mỗi phần tử thể hiện một giá trị justify-self khác nhau. Nó giống như một buổi trình diễn thời trang nhỏ, với mỗi phần tử thể hiện phong cách riêng của mình!

Và thế là xong, các học trò yêu dấu của tôi! Chúng ta đã hành trình qua vùng đất của justify-self, khám phá nhiều khía cạnh và khả năng của nó. Nhớ rằng CSS là tất cả về thử nghiệm và sáng tạo. Đừng sợ kết hợp các giá trị này để tạo ra các bố cục độc đáo của riêng bạn.

Khi chúng ta kết thúc bài học này, tôi nhớ đến một lời khuyên của một nhà thông thái CSS từng nói, "Với quyền lực lớn comes great responsibility... để tạo ra các bố cục tuyệt vời!" Vậy hãy đi forth, thử nghiệm, và chúc may mắn để các lưới của bạn luôn được đối chiếu hoàn hảo!

Credits: Image by storyset