Bài đăng này nêu bật một số dòng CSS mạnh mẽ thực hiện một số công việc nặng nhọc và giúp bạn tạo bố cục hiện đại, mạnh mẽ.
Bố cục CSS hiện đại cho phép nhà phát triển viết các quy tắc định kiểu thực sự có ý nghĩa và mạnh mẽ chỉ bằng một vài thao tác nhấn phím. Bài nói trên và bài đăng tiếp theo này xem xét 10 dòng CSS mạnh mẽ thực hiện một số công việc nặng nhọc.
Để tự mình theo dõi hoặc chơi các bản minh hoạ này, hãy xem phần nhúng Nhiễu ở trên hoặc truy cập 1linelayouts.glitch.me.
01. Căn giữa: place-items: center
Đối với bố cục "một dòng" đầu tiên, hãy giải quyết bí ẩn lớn nhất trong toàn bộ vùng đất CSS: tập trung vào mọi thứ. Tôi muốn bạn biết rằng việc sử dụng place-items: center dễ dàng hơn bạn nghĩ.
Trước tiên, hãy chỉ định grid làm phương thức display, sau đó viết place-items: center trên cùng một phần tử. place-items là cách viết tắt để đặt cả align-items và justify-items cùng lúc. Khi bạn đặt chính sách này thành center, cả align-items và justify-items đều được thiết lập thành center.
.parent {
display: grid;
place-items: center;
}
Điều này cho phép nội dung được căn giữa hoàn hảo trong thành phần mẹ, bất kể kích thước nội tại.
02. Chiếc bánh kếp được phân tách: flex: <grow> <shrink> <baseWidth>
Tiếp theo là chiếc bánh kếp đã tách rời! Đây là một bố cục phổ biến cho các trang web tiếp thị, ví dụ: có thể có một hàng gồm 3 mục, thường là hình ảnh, tiêu đề và sau đó là một số văn bản, nhằm mô tả một số tính năng của sản phẩm. Trên thiết bị di động, chúng ta sẽ muốn các thành phần đó được xếp chồng gọn gàng và mở rộng khi chúng ta tăng kích thước màn hình.
Khi sử dụng Flexbox để tạo hiệu ứng này, bạn sẽ không cần truy vấn đa phương tiện để điều chỉnh vị trí của các phần tử này khi màn hình đổi kích thước.
Viết tắt của flex là viết tắt của: flex: <flex-grow> <flex-shrink> <flex-basis>.
Do đó, nếu bạn muốn các ô lấp đầy kích thước <flex-basis>, hãy thu nhỏ trên các kích thước nhỏ hơn, nhưng không căng để lấp đầy thêm bất kỳ khoảng trống nào, hãy viết: flex: 0 1 <flex-basis>. Trong trường hợp này, <flex-basis> của bạn là 150px nên sẽ có dạng như sau:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Nếu bạn muốn các hộp này kéo dài và lấp đầy khoảng trống khi chúng gói sang dòng tiếp theo, hãy đặt <flex-grow> thành 1, như vậy thành phần sẽ có dạng như sau:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Giờ đây, khi bạn tăng hoặc giảm kích thước màn hình, các mục linh hoạt này sẽ thu nhỏ và phát triển.
03. Thanh bên cho biết: grid-template-columns: minmax(<min>, <max>) …)
Bản minh hoạ này tận dụng hàm minmax cho bố cục lưới. Những gì chúng ta sẽ làm ở đây là thiết lập kích thước thanh bên tối thiểu là 150px, nhưng trên các màn hình lớn hơn, cho phép kéo dài đến 25%. Thanh bên sẽ luôn chiếm 25% không gian ngang của thành phần mẹ cho đến khi 25% đó nhỏ hơn 150px.
Thêm giá trị này dưới dạng một giá trị của cột mẫu lưới với giá trị sau: minmax(150px, 25%) 1fr. Mục trong cột đầu tiên (thanh bên trong trường hợp này) nhận minmax 150px ở 25% và mục thứ hai (phần main ở đây) chiếm phần còn lại của không gian dưới dạng một kênh 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Ngăn xếp bánh kếp: grid-template-rows: auto 1fr auto
Không giống như bánh kếp được gỡ bỏ, ví dụ này không gói các phần tử con khi kích thước màn hình thay đổi. Thường được gọi là chân trang cố định, bố cục này thường được sử dụng cho cả trang web và ứng dụng, trên các ứng dụng dành cho thiết bị di động (chân trang thường là thanh công cụ) và các trang web (ứng dụng trang đơn thường sử dụng bố cục chung này).
Thêm display: grid vào thành phần này sẽ cung cấp cho bạn một lưới cột duy nhất. Tuy nhiên, khu vực chính sẽ chỉ cao bằng phần nội dung có chân trang bên dưới.
Để chân trang nằm cố định ở dưới cùng, hãy thêm:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Thao tác này sẽ đặt nội dung ở đầu trang và chân trang tự động lấy kích thước của các phần tử con và áp dụng không gian còn lại (1fr) cho khu vực chính, trong khi hàng có kích thước auto sẽ lấy kích thước của nội dung tối thiểu của phần tử con, để nội dung đó tăng kích thước, chính hàng đó sẽ tự điều chỉnh.
05. Bố cục Chảo Thánh Cổ điển: grid-template: auto 1fr auto / auto 1fr auto
Đối với bố cục sứ mệnh cổ điển này, có tiêu đề, chân trang, thanh bên trái, thanh bên phải và nội dung chính. Bố cục này tương tự như bố cục trước, nhưng giờ đây đã có thanh bên!
Để viết toàn bộ lưới này bằng một dòng mã, hãy sử dụng thuộc tính grid-template. Điều này cho phép bạn đặt cả hàng và cột cùng lúc.
Cặp thuộc tính và giá trị là: grid-template: auto 1fr auto / auto 1fr auto. Dấu gạch chéo giữa danh sách đầu tiên và danh sách được phân tách bằng dấu cách thứ hai là dấu ngắt giữa các hàng và cột.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Như trong ví dụ cuối cùng, tiêu đề và chân trang có nội dung được định kích thước tự động, ở đây, thanh bên trái và phải được tự động định kích thước dựa trên kích thước bên trong của phần tử con. Tuy nhiên, lần này kích thước theo chiều ngang (chiều rộng) thay vì chiều dọc (chiều cao).
06. Lưới 12-Span: grid-template-columns: repeat(12, 1fr)
Tiếp theo, chúng ta có một kiểu cổ điển khác: lưới 12 span. Bạn có thể nhanh chóng viết lưới trong CSS bằng hàm repeat(). Sử dụng: repeat(12, 1fr); cho các cột mẫu lưới sẽ cung cấp cho bạn 12 cột mỗi 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Giờ đây, bạn đã có một lưới gồm 12 cột, chúng ta có thể đặt các thành phần con vào lưới. Một cách để thực hiện việc này là đặt chúng bằng các đường lưới. Ví dụ: grid-column: 1 / 13 sẽ kéo dài từ dòng đầu tiên đến dòng cuối cùng (thứ 13) và kéo dài 12 cột. grid-column: 1 / 5; sẽ kéo dài 4 vòng đầu tiên.
Một cách khác để viết mã này là sử dụng từ khoá span. Với span, bạn sẽ đặt đường bắt đầu và sau đó chọn số lượng cột sẽ kéo dài từ điểm xuất phát đó. Trong trường hợp này, grid-column: 1 / span 12 sẽ tương đương với grid-column: 1 / 13 và grid-column: 2 / span 6 sẽ tương đương với grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Lặp lại, Tự động, Tối đa tối thiểu): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Đối với ví dụ thứ 7 này, hãy kết hợp một số khái niệm bạn đã tìm hiểu để tạo một bố cục thích ứng với các thành phần con được đặt tự động và linh hoạt. Khá gọn gàng. Các thuật ngữ chính cần nhớ ở đây là repeat, auto-(fit|fill) và minmax()' (bạn nhớ các thuật ngữ này bằng từ viết tắt RAM).
Tất cả kết hợp với nhau sẽ như:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Bạn đang dùng hàm lặp lại một lần nữa, nhưng lần này sử dụng từ khoá auto-fit thay vì một giá trị số rõ ràng. Thao tác này cho phép tự động thay đổi vị trí của các phần tử con này. Các phần tử con này cũng có giá trị tối thiểu cơ sở là 150px với giá trị tối đa là 1fr. Điều này nghĩa là trên các màn hình nhỏ hơn, các phần tử con này sẽ chiếm toàn bộ chiều rộng 1fr. Khi đạt đến 150px chiều rộng, các phần tử con này sẽ bắt đầu tràn vào cùng một dòng.
Khi dùng auto-fit, các hộp sẽ kéo dài khi kích thước theo chiều ngang vượt quá 150px để lấp đầy toàn bộ không gian còn lại. Tuy nhiên, nếu bạn thay đổi giá trị này thành auto-fill, thì các hàm này sẽ không kéo giãn khi vượt quá kích thước cơ sở trong hàm minmax:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Đội hình: justify-content: space-between
Đối với bố cục tiếp theo, điểm chính để minh hoạ ở đây là justify-content: space-between. Hàm này đặt các phần tử con đầu tiên và cuối cùng ở các cạnh của hộp giới hạn, với không gian còn lại được phân bổ đồng đều giữa các phần tử. Đối với các thẻ này, chúng được đặt ở chế độ hiển thị Hộp linh hoạt, với hướng được đặt thành cột bằng flex-direction: column.
Thao tác này sẽ đặt tiêu đề, nội dung mô tả và khối hình ảnh trong một cột dọc bên trong thẻ mẹ. Sau đó, áp dụng justify-content: space-between neo các phần tử đầu tiên (tiêu đề) và cuối cùng (khối hình ảnh) vào các cạnh của hộp linh hoạt và văn bản mô tả ở giữa các phần tử đó sẽ được đặt với khoảng cách bằng nhau cho mỗi điểm cuối.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Chọn phong cách của tôi: clamp(<min>, <actual>, <max>)
Sau đây là phần chúng ta tìm hiểu một số kỹ thuật ít hỗ trợ trình duyệt hơn, nhưng có một số ảnh hưởng thực sự thú vị đối với bố cục và thiết kế giao diện người dùng thích ứng. Trong bản minh hoạ này, bạn sẽ đặt chiều rộng bằng cách sử dụng kẹp như sau: width: clamp(<min>, <actual>, <max>).
Công cụ này đặt kích thước tối thiểu và tối đa tuyệt đối cũng như kích thước thực tế. Các giá trị có thể có dạng như sau:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Kích thước tối thiểu ở đây là 23ch hoặc 23 đơn vị ký tự và kích thước tối đa là 46ch (46 ký tự). Đơn vị độ rộng ký tự dựa trên kích thước phông chữ của phần tử (cụ thể là chiều rộng của ký tự 0). Kích thước "thực tế" là 50%, chiếm 50% chiều rộng mẹ của phần tử này.
Việc hàm clamp() đang làm ở đây là cho phép phần tử này duy trì 50% chiều rộng cho đến 50% lớn hơn 46ch (trên khung nhìn rộng hơn) hoặc nhỏ hơn 23ch (trên khung nhìn nhỏ hơn). Bạn có thể thấy rằng khi tôi kéo giãn và thu nhỏ kích thước gốc, chiều rộng của thẻ này sẽ tăng lên điểm tối đa được kẹp và giảm xuống mức tối thiểu được kẹp. Sau đó, lớp này vẫn ở giữa trong thành phần mẹ vì chúng ta đã áp dụng các thuộc tính bổ sung để căn giữa nó. Điều này giúp bố cục dễ đọc hơn vì văn bản sẽ không quá rộng (trên 46ch) cũng như không quá bị méo và hẹp (nhỏ hơn 23ch).
Đây cũng là một cách hiệu quả để triển khai kiểu chữ thích ứng. Ví dụ: bạn có thể viết: font-size: clamp(1.5rem, 20vw, 3rem). Trong trường hợp này, kích thước phông chữ của dòng tiêu đề sẽ luôn nằm trong khoảng từ 1.5rem đến 3rem nhưng sẽ tăng và thu nhỏ dựa trên giá trị thực tế 20vw để vừa với chiều rộng của khung nhìn.
Đây là một kỹ thuật hay để đảm bảo mức độ dễ đọc với giá trị kích thước tối thiểu và tối đa, nhưng hãy nhớ rằng kỹ thuật này không được hỗ trợ trong tất cả các trình duyệt hiện đại, vì vậy hãy đảm bảo bạn có phương án dự phòng và tiến hành kiểm thử.
10. Tôn trọng Tỷ lệ khung hình: aspect-ratio: <width> / <height>
Và cuối cùng, công cụ bố cục cuối cùng này là công cụ thử nghiệm nhất trong nhóm. Gần đây, tiện ích này đã được giới thiệu cho Chrome Canary trong Chromium 84 và Firefox đang nỗ lực triển khai tính năng này nhưng hiện chưa có phiên bản trình duyệt ổn định nào.
Tuy nhiên, tôi muốn đề cập đến vấn đề này, vì đây là vấn đề thường xuyên gặp. Việc đó đơn giản chỉ là duy trì tỷ lệ khung hình của một hình ảnh.
Với thuộc tính aspect-ratio, khi tôi đổi kích thước thẻ, khối hình ảnh màu xanh lục sẽ duy trì tỷ lệ khung hình 16 x 9 này. Chúng ta đang tôn trọng tỷ lệ khung hình bằng aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Để duy trì tỷ lệ khung hình 16 x 9 mà không có thuộc tính này, bạn cần sử dụng kỹ thuật tấn công padding-top và cung cấp khoảng đệm 56.25% để đặt tỷ lệ trên cùng trên chiều rộng. Chúng tôi sẽ sớm có một thuộc tính cho trường hợp này để tránh bị tấn công và không phải tính toán tỷ lệ phần trăm. Bạn có thể tạo một hình vuông có tỷ lệ 1 / 1, tỷ lệ 2:1 bằng 2 / 1 và thực sự chỉ cần mọi thứ mình cần để hình ảnh này có thể điều chỉnh tỷ lệ theo tỷ lệ kích thước đã thiết lập.
.square {
aspect-ratio: 1 / 1;
}
Mặc dù tính năng này vẫn đang phát triển và sắp ra mắt, nhưng bạn nên biết vì nó giúp giải quyết nhiều tranh cãi của nhà phát triển mà bản thân tôi đã gặp phải nhiều lần, đặc biệt là khi nói đến video và iframe.
Kết luận
Cảm ơn bạn đã theo dõi hành trình này thông qua 10 dòng CSS mạnh mẽ. Để tìm hiểu thêm, hãy xem toàn bộ video và tự mình dùng thử các bản minh hoạ.