CSS - Đặt các mục: Hướng dẫn cơ bản về việc căn chỉnh hoàn hảo
Xin chào các bạn nhà phát triển web! 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 mạnh mẽ sẽ giúp cuộc sống của bạn trở nên dễ dàng hơn khi việc căn chỉnh nội dung: thuộc tính place-items. tin tôi đi, một khi bạn thành thạo điều này, bạn sẽ cảm thấy như một siêu anh hùng CSS!
place-items là gì?
Trước khi chúng ta nhảy vào chi tiết, hãy hiểu về place-items là gì. Hãy tưởng tượng bạn đang sắp xếp nội thất trong một căn phòng. Bạn muốn mọi thứ trông hoàn hảo, căn chỉnh và khoảng cách chính xác. Đó chính xác là điều place-items làm cho các yếu tố web của bạn!
Thuộc tính place-items là một viết tắt để đặt cả hai thuộc tính align-items và justify-items trong một lần. Nó giống như giết hai con chim với một viên đá, nhưng trong một cách tốt hơn, bằng CSS!
Cú pháp và các giá trị có thể
Hãy phân tích cú pháp và các giá trị có thể cho place-items. Nó đơn giản hơn bạn nghĩ!
.container {
place-items: <align-items> <justify-items>;
}Dưới đây là bảng các giá trị có thể bạn có thể sử dụng:
| Giá trị | Mô tả |
|---|---|
| stretch | Mở rộng các mục để đầy container |
| start | Căn chỉnh các mục vào đầu container |
| end | Căn chỉnh các mục vào cuối container |
| center | Căn giữa các mục trong container |
| baseline | Căn chỉnh các mục theo baseline |
Bạn có thể kết hợp các giá trị này. Nếu bạn chỉ xác định một giá trị, nó sẽ được sử dụng cho cả align-items và justify-items. Tuyệt vời phải không?
在哪里可以使用 place-items?
Thuộc tính place-items áp dụng cho các container lưới và các container flex. Nó giống như một cây kéo đa năng cho việc căn chỉnh! Hãy xem chúng ta có thể sử dụng nó trong cả hai trường hợp.
CSS place-items - Đặt các mục trong một container lưới
Bố cục lưới tuyệt vời cho việc tạo ra các thiết kế phức tạp, linh hoạt. Hãy xem place-items có thể làm cho các mục lưới của chúng ta hành xử chính xác như mong muốn.
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-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;
place-items: center;
}
.grid-item {
background-color: #3498db;
color: white;
font-size: 24px;
padding: 20px;
}Trong ví dụ này, chúng ta đã tạo một lưới 2x2 với bốn mục. Bằng cách đặt place-items: center;, tất cả các mục lưới của chúng ta được căn chỉnh chính xác cả theo chiều ngang và dọc trong các ô lưới của chúng. Đó giống như phép thuật, nhưng đó chỉ là CSS!
CSS place-items - Đặt các mục trong một container flex
Flexbox là một công cụ bố cục mạnh mẽ khác, và place-items cũng hoạt động rất tốt ở đây. Hãy xem nó trong hành động:
<div class="flex-container">
<div class="flex-item">Flex</div>
<div class="flex-item">Is</div>
<div class="flex-item">Awesome</div>
</div>.flex-container {
display: flex;
height: 200px;
background-color: #f0f0f0;
place-items: start center;
}
.flex-item {
background-color: #e74c3c;
color: white;
padding: 20px;
margin: 10px;
}Trong ví dụ flex này, chúng ta đã sử dụng place-items: start center;. Điều này căn chỉnh các mục flex vào đầu (trên) theo chiều dọc và căn giữa theo chiều ngang. Nó giống như nói với các mục flex của bạn, "Hey, đi lên trên, nhưng ở giữa theo chiều ngang!"
Các ví dụ thực tế và trường hợp sử dụng
Bây giờ chúng ta đã bao gồm các основы, hãy xem xét một số tình huống thực tế nơi place-items có thể cứu nguy.
Tạo một form đăng nhập căn giữa
Hãy tưởng tượng bạn đang tạo một form đăng nhập cần được căn giữa hoàn hảo trên trang. Dưới đây là cách bạn có thể làm điều đó với place-items:
<div class="login-container">
<form class="login-form">
<h2>Đăng nhập</h2>
<input type="text" placeholder="Tên đăng nhập">
<input type="password" placeholder="Mật khẩu">
<button type="submit">Đăng nhập</button>
</form>
</div>.login-container {
display: grid;
height: 100vh;
place-items: center;
}
.login-form {
background-color: #ffffff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}Bằng cách sử dụng place-items: center; trên container, form đăng nhập của chúng ta được căn giữa hoàn hảo cả theo chiều dọc và chiều ngang trên trang. Không cần phải chỉnh sửa margin hoặc transform nữa!
Tạo một bố cục thẻ
Giả sử bạn đang xây dựng một bố cục thẻ cho một blog hoặc triển lãm sản phẩm. place-items có thể giúp bạn căn chỉnh nội dung trong mỗi thẻ:
<div class="card-container">
<div class="card">
<img src="product1.jpg" alt="Product 1">
<h3>Tên sản phẩm</h3>
<p>Mô tả sản phẩm ở đây.</p>
<button>Mua ngay</button>
</div>
<!-- More cards... -->
</div>.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.card {
display: grid;
place-items: center;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card img {
width: 100%;
max-width: 200px;
height: auto;
}Ở đây, chúng ta sử dụng place-items: center; trên mỗi thẻ để đảm bảo rằng tất cả nội dung bên trong (hình ảnh, văn bản, nút) được căn giữa một cách đẹp mắt.
Kết luận
Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau đi qua vùng đất của place-items, từ cú pháp cơ bản đến các ứng dụng thực tế. Nhớ rằng, CSS là tất cả về việc thực hành. Càng sử dụng các thuộc tính như place-items, chúng sẽ càng trở nên trực quan hơn.
Hãy nghĩ về place-items như một trợ lý CSS cá nhân của bạn, luôn sẵn sàng giúp bạn căn chỉnh mọi thứ hoàn hảo. Dù bạn đang làm việc với lưới hay flexbox, nó luôn có bạn.
Vậy, hãy đi và căn chỉnh! Thử nghiệm với các giá trị khác nhau, kết hợp chúng theo cách sáng tạo, và xem như bố cục của bạn trở nên tinh tế và chuyên nghiệp hơn. Và nhớ rằng, trong thế giới của CSS, luôn có nhiều điều để học và khám phá. Chúc các bạn may mắn!
Credits: Image by storyset