CSS - place-content: Hướng dẫn thân thiện cho người mới bắt đầu

Xin chào bạn, ngôi sao thiết kế web tương lai! ? Sẵn sàng lặn vào thế giới kỳ diệu của CSS chưa? Hôm nay, chúng ta sẽ khám phá một tính năng nhỏ gọn nhưng rất hữu ích叫做 place-content. tin tôi đi, nó sẽ làm cho cuộc sống của bạn dễ dàng hơn rất nhiều khi bạn cố gắng căn chỉnh các yếu tố trong bố cục web của mình. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và cùng bắt đầu nào!

place-content 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 thật đẹp, nhưng việc di chuyển từng món đồ riêng lẻ rất麻烦. Đó là lúc place-content phát huy tác dụng - nó như một枝魔法杖 giúp bạn sắp xếp các yếu tố trên trang web của mình một cách dễ dàng!

Tính năng place-content là một cách viết tắt để đặt cả align-content và justify-content một lượt. Nó như giết hai con chim bằng một viên đá (nhưng đừng lo, không có chim nào bị hại trong quá trình tạo ra tính năng CSS này ?).

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

Ồ, chúng ta có rất nhiều tùy chọn ở đây! Hãy cùng phân tích chúng trong một bảng dễ đọc:

Giá trị	Mô tả
center	Căn giữa nội dung cả theo chiều dọc và chiều ngang
start	Căn chỉnh nội dung theo đầu của容器
end	Căn chỉnh nội dung theo cuối của容器
flex-start	Tương tự như start, nhưng cho các容器 flex
flex-end	Tương tự như end, nhưng cho các容器 flex
baseline	Căn chỉnh nội dung theo baseline
space-between	Phân phối các mục đều với khoảng cách giữa chúng
space-around	Phân phối các mục đều với khoảng cách xung quanh chúng
space-evenly	Phân phối các mục với khoảng cách bằng nhau giữa và xung quanh chúng

Đừng lo lắng nếu những điều này có vẻ quá tải - chúng ta sẽ qua từng mục với các ví dụ!

Áp dụng cho

Trước khi chúng ta đi vào chi tiết, điều quan trọng là phải biết nơi chúng ta có thể sử dụng place-content. Tính năng này áp dụng cho:

• Các容器 Grid
• Các容器 Flex

Vậy, nếu bạn đang làm việc với các lưới hoặc flexbox (đừng tin tôi, bạn sẽ làm), place-content sẽ là người bạn mới của bạn!

Cú pháp

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

.container {
place-content: <align-content> <justify-content>;
}

Bạn có thể sử dụng một hoặc hai giá trị. Nếu bạn sử dụng một, nó áp dụng cho cả hai hướng căn chỉnh. Nếu bạn sử dụng hai, giá trị đầu tiên là cho align-content (căn chỉnh theo chiều dọc) và giá trị thứ hai là cho justify-content (căn chỉnh theo chiều ngang).

Bây giờ, hãy cùng xem một số ví dụ cụ thể!

CSS place-content - center start Giá trị

.container {
display: grid;
place-content: center start;
height: 200px;
border: 2px solid #333;
}

Trong ví dụ này, nội dung sẽ được căn giữa theo chiều dọc nhưng căn chỉnh theo đầu (bên trái trong các ngôn ngữ từ trái sang phải) theo chiều ngang. Nó giống như đẩy tất cả nội thất vào một bên của phòng nhưng giữ nó ở giữa theo chiều dọc.

CSS place-content - start center Giá trị

.container {
display: flex;
place-content: start center;
height: 200px;
border: 2px solid #333;
}

Ở đây, chúng ta đang làm ngược lại - căn chỉnh nội dung theo đỉnh nhưng căn giữa theo chiều ngang. Hãy tưởng tượng như排列所有的家具沿着顶墙但均匀地从左到右分布。

CSS place-content - end right Giá trị

.container {
display: grid;
place-content: end right;
height: 200px;
border: 2px solid #333;
}

Điều này sẽ đẩy tất cả nội dung vào góc dưới bên phải của容器. Nó giống như đẩy tất cả nội thất vào một góc của phòng (mặc dù tôi không khuyến khích bạn làm điều đó trong cuộc sống thực tế ?).

CSS place-content - flex-start center Giá trị

.container {
display: flex;
place-content: flex-start center;
height: 200px;
border: 2px solid #333;
}

Tương tự như start center, nhưng cụ thể cho các容器 flex. Nội dung của bạn sẽ ở đỉnh (hoặc bên trái trong hướng cột) và căn giữa theo chiều ngang.

CSS place-content - flex-end center Giá trị

.container {
display: flex;
place-content: flex-end center;
height: 200px;
border: 2px solid #333;
}

Điều này tương tự như flex-start center, nhưng căn chỉnh vào cuối của容器 flex thay vì đầu.

CSS place-content - last baseline Giá trị

.container {
display: grid;
place-content: last baseline;
height: 200px;
border: 2px solid #333;
}

Điều này có phần phức tạp hơn một chút. Nó căn chỉnh nội dung theo baseline của dòng văn bản cuối cùng. Nó giống như đảm bảo tất cả văn bản của bạn nằm gọn trên một đường vô hình.

CSS place-content - space-between Giá trị

.container {
display: flex;
place-content: space-between;
height: 200px;
border: 2px solid #333;
}

Điều này phân phối các mục đều, với mục đầu tiên ở đầu và mục cuối cùng ở cuối. Hãy tưởng tượng như đặt nội thất trong một phòng với khoảng cách bằng nhau giữa mỗi món đồ, nhưng đẩy chúng vào các cạnh.

CSS place-content - space-around Giá trị

.container {
display: grid;
place-content: space-around;
height: 200px;
border: 2px solid #333;
}

Tương tự như space-between, nhưng nó cũng thêm khoảng cách trước mục đầu tiên và sau mục cuối cùng. Nó giống như dành cho mỗi món nội thất một không gian nhỏ riêng trong phòng.

CSS place-content - space-evenly Giá trị

.container {
display: flex;
place-content: space-evenly;
height: 200px;
border: 2px solid #333;
}

Điều này phân phối các mục với khoảng cách bằng nhau giữa và xung quanh chúng. Nó là cách tiếp cận cân bằng nhất, như cách bạn phân phối nội thất hoàn hảo trong phòng.

Và thế là bạn đã học về tính năng place-content và các giá trị khác nhau của nó. Nhớ rằng, thực hành là cách tốt nhất để thành thạo, vì vậy đừng ngần ngại thử nghiệm chúng trong các dự án của riêng bạn. Trước khi bạn biết điều gì, bạn sẽ căn chỉnh nội dung như một chuyên gia!

Tiếp tục mã hóa, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ với nó! ??‍??‍?

Credits: Image by storyset