CSS - thuộc tính justify-items

Xin chào các bạn nhà phát triển web 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 có thể làm cho bố cục của bạn trông như được tạo ra bởi một chuyên gia có kinh nghiệm. Tôi đang nói về thuộc tính justify-items. tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ biết cách căn chỉnh các mục như một vị thẩm phán tối cao! ?

justify-items là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu thuộc tính justify-items làm gì. Hãy tưởng tượng bạn có một containner lưới đầy những mục lưới dễ thương. Thuộc tính justify-items giống như một枝 c魔法 giúp bạn kiểm soát cách các mục này được căn chỉnh theo trục in-line (thường là horizonal) trong các khu vực lưới của chúng.

Cú pháp

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

.container {
justify-items: value;
}

Trong đó value có thể là một trong nhiều tùy chọn mà chúng ta sẽ khám phá ngay sau đây. Nhưng trước hết, hãy tạo một lưới đơn giản để chơi:

<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

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

.item {
background-color: #3498db;
color: white;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}

Điều này tạo ra một lưới 2x2 với bốn mục. Bây giờ, hãy khám phá các giá trị khác nhau mà chúng ta có thể sử dụng với justify-items!

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

Dưới đây là bảng các giá trị có thể sử dụng cho justify-items:

Giá trị	Mô tả
normal	Giá trị mặc định, thường hoạt động như stretch
stretch	Mở rộng các mục để.fill khu vực lưới
start	Căn chỉnh các mục vào đầu khu vực lưới
end	Căn chỉnh các mục vào cuối khu vực lưới
center	Căn giữa các mục trong khu vực lưới
flex-start	Căn chỉnh các mục vào đầu (cho các containner flex)
flex-end	Căn chỉnh các mục vào cuối (cho các containner flex)
self-start	Căn chỉnh các mục vào bên đầu của chúng
self-end	Căn chỉnh các mục vào bên cuối của chúng
left	Căn chỉnh các mục vào bên trái
right	Căn chỉnh các mục vào bên phải
baseline	Căn chỉnh các mục theo baseline của chúng
last baseline	Căn chỉnh các mục theo baseline cuối cùng của chúng
safe center	Căn giữa các mục một cách an toàn (ngăn chặn mất dữ liệu)
legacy right	Căn chỉnh bên phải (hỗ trợ cũ)

Bây giờ, hãy phân tích chúng với các ví dụ!

CSS justify-items - giá trị normal

.grid-container {
justify-items: normal;
}

Giá trị normal là mặc định. Trong hầu hết các trường hợp, nó hoạt động như stretch. Nó giống như đang nói với các mục lưới của bạn, "Hãy là chính bạn!"

CSS justify-items - giá trị stretch

.grid-container {
justify-items: stretch;
}

Với stretch, các mục của bạn sẽ lan ra để.fill toàn bộ chiều rộng của khu vực lưới của chúng. Nó giống như đang nói với các mục của bạn để thở sâu và mở rộng!

CSS justify-items - giá trị start

.grid-container {
justify-items: start;
}

Giá trị start căn chỉnh các mục vào đầu khu vực lưới của chúng. Hãy tưởng tượng như đang xếp hàng các mục ở vạch xuất phát của một cuộc đua.

CSS justify-items - giá trị end

.grid-container {
justify-items: end;
}

Ngược lại, end đẩy các mục vào cuối khu vực lưới của chúng. Nó giống như các mục của bạn đang cố gắng chạm vào vạch kết thúc!

CSS justify-items - giá trị center

.grid-container {
justify-items: center;
}

center làm chính xác những gì bạn mong đợi - nó căn giữa các mục trong khu vực lưới của chúng. Nó hoàn hảo cho việc tạo ra một bố cục cân bằng, như một trạng thái thiền.

CSS justify-items - giá trị flex-start và flex-end

.grid-container {
justify-items: flex-start;
}

.grid-container {
justify-items: flex-end;
}

Những giá trị này tương tự như start và end, nhưng chúng được sử dụng đặc biệt cho các containner flex. Chúng giống như những người anh em cool của start và end chỉ xuất hiện ở các bữa tiệc flex.

CSS justify-items - giá trị self-start và self-end

.grid-container {
justify-items: self-start;
}

.grid-container {
justify-items: self-end;
}

Những giá trị này căn chỉnh các mục vào bên đầu hoặc bên cuối của chúng, điều này có thể khác với bên đầu hoặc bên cuối của containner trong một số chế độ viết. Nó giống như để mỗi mục quyết định bên nào của giường họ muốn ngủ!

CSS justify-items - giá trị left và right

.grid-container {
justify-items: left;
}

.grid-container {
justify-items: right;
}

Những giá trị này làm chính xác những gì chúng nói - căn chỉnh các mục vào bên trái hoặc bên phải. Đơn giản và rõ ràng, như một tách cà phê ngon vào buổi sáng.

CSS justify-items - giá trị baseline và last baseline

.grid-container {
justify-items: baseline;
}

.grid-container {
justify-items: last baseline;
}

Những giá trị này căn chỉnh các mục theo baseline hoặc baseline cuối cùng của chúng. Điều này đặc biệt hữu ích khi bạn có văn bản có kích thước khác nhau và muốn chúng hàng hóa đẹp.

CSS justify-items - giá trị safe center

.grid-container {
justify-items: safe center;
}

Giá trị này căn giữa các mục, nhưng đảm bảo rằng không có mất dữ liệu. Nó giống như có một lưới an toàn cho các mục căn giữa của bạn!

CSS justify-items - giá trị legacy right

.grid-container {
justify-items: legacy right;
}

Giá trị này được sử dụng cho tính tương thích ngược. Nó giống như giữ một chiếc điện thoại cũ - bạn có thể không sử dụng nó, nhưng nó ở đó nếu bạn cần!

Và thế là bạn đã có một chuyến tham quan nhanh chóng qua thuộc tính justify-items. Nhớ rằng, chìa khóa để thành thạo CSS là thực hành. Vậy hãy đi thử nghiệm với các giá trị này, và tạo ra một số bố cục được căn chỉnh đẹp mắt. Trước khi bạn biết, bạn sẽ căn chỉnh các mục trong giấc ngủ của mình!

Chúc các bạn may mắn và mong rằng các lưới của bạn luôn được căn chỉnh hoàn hảo! ??‍??‍?

Credits: Image by storyset