Bài đăng này nêu bật một số dòng CSS mạnh mẽ giúp bạn thực hiện một số công việc nặng nề 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 tạo kiểu thực sự có ý nghĩa và mạnh mẽ chỉ bằng vài thao tác nhấn phím. Bài nói chuyện ở trên và bài đăng tiếp theo này sẽ kiểm tra 10 dòng CSS mạnh mẽ có thể thực hiện một số thao tác nặng.
Để tự làm theo hoặc tự chơi với các bản minh hoạ này, hãy xem mã nhúng Glitch ở trên hoặc truy cập vào 1linelayouts.glitch.me.
01. Super Centered (Ở 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ộ thế giới CSS: căn giữa các thành phần. Tôi muốn bạn biết rằng việc này dễ dàng hơn bạn nghĩ với place-items: center.
Trước tiên, hãy chỉ định grid làm phương thức display, sau đó ghi 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. Bánh kếp được khử: flex: <grow> <shrink> <baseWidth>
Tiếp theo là món bánh pancake được phân tích! Ví dụ: đây là bố cục phổ biến cho các trang web tiếp thị, có thể có một hàng gồm 3 mục, thường là hình ảnh, tiêu đề, sau đó là một số văn bản 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 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.
flex viết tắt là: flex: <flex-grow> <flex-shrink> <flex-basis>.
Do đó, nếu bạn muốn các hộp lấp đầy kích thước <flex-basis>, thu nhỏ trên các kích thước nhỏ hơn nhưng không kéo giãn để lấp đầy bất kỳ không gian nào khác, 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 kéo giãn và lấp đầy không gian khi chúng chuyển sang dòng tiếp theo, hãy đặt <flex-grow> thành 1, 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 theo chiều 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 giá trị của grid-template-columns 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 Pancake: grid-template-rows: auto 1fr auto
Không giống như Pancake được phân tích, ví dụ này không gói các thành phần 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).
Việc thêm display: grid vào thành phần 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 nội dung có chân trang bên dưới.
Để chân trang 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 tiêu đề 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 các phần tử con, vì vậy khi nội dung đó tăng kích thước, chính hàng đó sẽ tăng lên để điều chỉnh.
05. Bố cục Holy Grail cổ điển: grid-template: auto 1fr auto / auto 1fr auto
Đối với bố cục 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 hiện 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 thiết lập cả hàng và cột cùng một 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 thứ hai được phân tách bằng dấu cách 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, trong đó tiêu đề và chân trang có nội dung tự động định cỡ, ở đây, thanh bên trái và phải được tự động định cỡ dựa trên kích thước nội tại của các thành phần con. Tuy nhiên, lần này là kích thước theo chiều ngang (chiều rộng) thay vì theo 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;
}
Bây giờ, bạn có một lưới theo dõi gồm 12 cột, chúng ta có thể đặt các thành phần con trên lưới. Một cách để làm việc này là đặt các thành phần bằng cách sử dụng các đường lưới. Ví dụ: grid-column: 1 / 13 sẽ trải dài từ dòng đầu tiên đến dòng cuối cùng (dòng 13) và trải dài trên 12 cột. grid-column: 1 / 5; sẽ kéo dài 4 vòng đầu tiên.
Bạn cũng có thể viết mã này bằng cách sử dụng từ khoá span. Với span, bạn đặt dòng bắt đầu rồi đặt số cột cần mở rộng từ điểm bắt đầu đó. 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, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Đối với ví dụ thứ bảy này, hãy kết hợp một số khái niệm 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 linh hoạt và được đặt tự động. 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 có thể nhớ bằng từ viết tắt RAM.
Tổng hợp lại, mã sẽ có dạng như sau:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Bạn đang sử dụng lại lệnh lặp lại, nhưng lần này, hã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, nghĩa là trên 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 và khi đạt đến chiều rộng 150px, các phần tử con này sẽ bắt đầu chảy vào cùng một dòng.
Với auto-fit, các hộp sẽ kéo giãn 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, các thành phần hiển thị sẽ không giãn khi kích thước cơ sở của chúng trong hàm minmax bị vượt quá:
.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 cần minh hoạ ở đây là justify-content: space-between. Phương thức này đặt 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ổ đều giữa các phần tử. Đối với các thẻ này, chúng được đặt ở chế độ hiển thị Flexbox, 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 vào một cột dọc bên trong thẻ mẹ. Sau đó, việc áp dụng justify-content: space-between sẽ 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 flex, 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 đang đặt chiều rộng bằng cách sử dụng hàm kẹp như sau: width: clamp(<min>, <actual>, <max>).
Thao tác này sẽ thiết lập 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ế. Với các giá trị, mã 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ị chiều 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%, tương đương với 50% chiều rộng của phần tử mẹ.
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 mẹ, 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 điểm tối thiểu được kẹp. Sau đó, phần tử này sẽ nằm ở giữa phần tử mẹ vì chúng ta đã áp dụng các thuộc tính bổ sung để căn giữa phần tử này. Đ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) hoặc quá hẹp và bị bóp méo (dưới 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à giảm 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 tuyệt vời để đảm bảo khả năng đọc được bằng 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ợ trên tất 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à kiểm thử.
10. 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, tính năng 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ó trong bất kỳ 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 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 Tuân thủ 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ần thuộc tính này, bạn cần sử dụng mã gian lận padding-top và đặt khoảng đệm là 56.25% để đặt tỷ lệ chiều cao 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 đã cùng chúng tôi tìm hiểu 10 dòng CSS mạnh mẽ. Để tìm hiểu thêm, hãy xem video đầy đủ và tự thử các bản minh hoạ.