Bài đăng này nêu bật một số dòng CSS mạnh mẽ, giúp 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ỉ với một vài thao tác nhấn phím. Bài nói chuyện trên và bài đăng tiếp theo 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.
Để theo dõi hoặc tự mình phát các bản minh hoạ này, hãy xem phần nội dung nhúng về Glitch ở trên hoặc truy cập vào 1linelayouts.glitch.me.
01. Siêu căn giữa: place-items: center
Đối với bố cục "một dòng" đầu tiên, hãy cùng giải quyết bí ẩn lớn nhất về vùng đất CSS đó: tập trung mọi thứ. Tôi rất muốn bạn biết rằng việc sử dụng place-items: center sẽ 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 chính 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 giá trị này thành center, cả align-items và justify-items đều sẽ đượ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 toàn trong thành phần mẹ, bất kể kích thước nội tại là bao nhiêu.
02. Chiếc bánh kếp: flex: <grow> <shrink> <baseWidth>
Tiếp theo là món bánh kếp nhân tạo! Đây là bố cục phổ biến cho các trang web tiếp thị. Ví dụ: Bố cục này có thể có một hàng gồm 3 mặt hàng, thường là hình ảnh, tiêu đề, tiếp đến là văn bản, mô tả một số đặc điểm của sản phẩm. Trên thiết bị di động, chúng ta muốn các quảng cáo đó được xếp chồng cho đẹp mắt và mở rộng khi chúng ta tăng kích thước màn hình.
Khi sử dụng Flexbox cho hiệu ứng này, bạn không cần truy vấn nội dung nghe nhì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 bằng 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 dãn để lấp đầy bất kỳ không gian nào thừa, hãy viết: flex: 0 1 <flex-basis>. Trong trường hợp này, <flex-basis> của bạn là 150px, vì vậy 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 gói đến dòng tiếp theo, hãy đặt <flex-grow> thành 1, như vậy 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à tăng lê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 đang làm ở đây là đặt 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, để kích thước đó 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 cột này dưới dạng 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 (trong trường hợp này là thanh bên) nhận minmax là 150px tại 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 bản nhạc 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ó cấu trúc (deconstructed PanBán), ví dụ này không gói 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 dùng cho cả trang web và ứng dụng, trên các ứng dụng di động (chân trang thường là thanh công cụ) và các trang web (các ứ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 này sẽ cung cấp cho bạn một lưới cột, tuy nhiên, vùng chính sẽ chỉ cao bằng nội dung có chân trang bên dưới.
Để làm cho chân trang nằm ở phần dưới cùng, hãy thêm:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Thao tác này sẽ thiết lập 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, do đó nội dung đó tăng kích thước, bản thân hàng sẽ mở rộng để điều chỉnh.
05. Bố cục Chìa khoá cổ điển: grid-template: auto 1fr auto / auto 1fr auto
Đối với bố cục bát đĩa cổ điển này, có đầu trang, 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 bây giờ đã có thêm thanh bên!
Để viết toàn bộ lưới này bằng một dòng mã duy nhất, hãy sử dụng thuộc tính grid-template. Thao tác 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à 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 được tự động định kích thước, ở đây, thanh bên trái và phải sẽ được tự động định kích thước dựa trên kích thước nội tại của thành phần 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 khoảng: grid-template-columns: repeat(12, 1fr)
Tiếp theo, chúng ta sẽ có một trò chơi cổ điển khác: lưới gồm 12 khoảng. Bạn có thể nhanh chóng viết các lưới trong CSS bằng hàm repeat(). Khi sử dụng: repeat(12, 1fr); cho các cột mẫu lưới, bạn sẽ có 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ể sắp xếp các 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ẽ trải 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ẽ trải dài trong 4 hiệp đầ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 đặt đường xuất phát và số lượng cột cần trải 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 hoá): 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 mà bạn đã tìm hiểu để tạo một bố cục thích ứng có 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òn nhớ các thuật ngữ này theo tên viết tắt là RAM.
Tất cả cùng nhau, sẽ có dạng như sau:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Bạn đang sử dụng repeat một lần nữa, nhưng lần này, sử dụng từ khóa auto-fit thay vì một giá trị số rõ ràng. Thao tác này bật tính năng tự động định vị các phần tử con này. Các thành phần 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 các màn hình nhỏ hơn, chúng sẽ chiếm toàn bộ chiều rộng của 1fr và khi đạt đến chiều rộng 150px, chúng sẽ bắt đầu tràn 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, thì các biến này sẽ không kéo dài 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. Nhóm kênh nổi tiếng: 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. Cách này sẽ đặ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ổ đồng đều giữa các phần tử. Đối với những thẻ này, chúng được đặt ở chế độ hiển thị Flexbox và 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ẻ chính. Sau đó, việc áp dụng justify-content: space-between sẽ liên kết 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 flexbox và văn bản mô tả ở giữa các phần tử đó đượ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. Kết hợp Kiểu của tôi: clamp(<min>, <actual>, <max>)
Đây là lúc 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ố ý nghĩa 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 dùng kẹp như sau: width: clamp(<min>, <actual>, <max>).
Thao tác này sẽ đặ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ế. Với các giá trị, 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ị 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à độ rộng của ký tự 0). Kích thước "thực tế" là 50%, tức là 50% chiều rộng mẹ của phần tử này.
Chức năng clamp() đang làm ở đây là cho phép phần tử này duy trì chiều rộng 50% cho đến khi 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 tăng đến điểm tối đa bị giới hạn và giảm tới điểm tối thiểu bị gắn. Sau đó, thuộc tính này vẫn nằm ở giữa thành phần mẹ vì chúng tôi đã áp dụng các thuộc tính bổ sung để căn giữa. Thao tác này tạo điều kiện cho 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 được quá hẹp và hẹp (dưới 23ch).
Đây cũng là một cách tuyệt vời để 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 được giới hạn trong khoảng từ 1.5rem đến 3rem nhưng sẽ tăng lên và thu nhỏ dựa trên giá trị thực tế của 20vw cho 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 mức độ dễ đọc với giá trị kích thước tối thiểu và tối đa. Tuy nhiên, hãy lưu ý rằng kỹ thuật này không được hỗ trợ trong một số trình duyệt hiện đại, do đó, hãy đảm bảo bạn có mẫu quảng cáo dự phòng và thử nghiệm.
10. Sự tôn trọng về khung hình: aspect-ratio: <width> / <height>
Cuối cùng, công cụ bố cục cuối cùng này là công cụ mang tính thử nghiệm nhất trong nhóm. Gần đây, Chrome Canary mới ra mắt trong Chromium 84 và Firefox đã có nỗ lực tích cực trong việc triển khai tính năng này. Tuy nhiên, trình duyệt này 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. Và đó chỉ đơn giản là duy trì tỷ lệ khung hình của 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 với 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 tấn công bằng padding-top và cung cấp cho khung hình khoảng đệm 56.25% để thiết lập tỷ lệ giữa kích thước trên cùng và chiều rộng. Chúng tôi sẽ sớm có một thuộc tính cho việc này để tránh tấn công và để tính tỷ lệ phần trăm. Bạn có thể tạo một hình vuông theo tỷ lệ 1 / 1, tỷ lệ 2:1 với 2 / 1 và thực sự bất cứ điều gì bạn cần để hình ảnh này điều chỉnh được 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 sắp ra mắt, nhưng đây là tính năng tốt nên biết vì nó giải quyết được rất nhiều bất đồng của nhà phát triển mà 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 trải nghiệm các bản minh hoạ.