10 bố cục hiện đại trong một dòng CSS

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ễ 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à viết tắt để đặt cả align-itemsjustify-items cùng một lúc. Bằng cách đặt thành center, cả align-itemsjustify-items đều được đặt 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 phân tích: 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 muốn các thành phần đó xếp chồng lên nhau một cách gọn gàng và mở rộng khi chúng ta tăng kích thước màn hình.

Bằng cách sử dụng Flexbox cho hiệu ứng này, bạn sẽ không cần truy vấn nội dung đ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.

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, vì vậy, mã 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 flex 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. Việc chúng ta làm ở đây là đặt kích thước tối thiểu của thanh bên là 150px, nhưng trên màn hình lớn hơn, hãy kéo giãn kích thước đó thành 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 được minmax của 150px tại 25% và mục thứ hai (phần main ở đây) chiếm phần không gian còn lại dưới dạng một kênh 1fr duy nhất.

.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 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à 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 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 nằm ở 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 đặt 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 lưới 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(). 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 cột là 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 để thực hiện 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ẽ trải dài trên 4 phần đầ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 / 13grid-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)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 đặt 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. Line Up: 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 phối đề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, đồng thời 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. Kẹp Phong cách của tôi: clamp(<min>, <actual>, <max>)

Đây là nơi chúng ta tìm hiểu một số kỹ thuật có ít hỗ trợ trình duyệt hơn, nhưng có một số tác độ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ẹ.

Hàm clamp() đang thực hiện ở đây là cho phép phần tử này giữ lại chiều rộng 50% cho đến khi 50% lớn hơn 46ch (trên các khung nhìn rộng hơn) hoặc nhỏ hơn 23ch (trên các 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 hay để 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>

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 số các công cụ. 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. Và đó chỉ là việc 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 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 để tránh bị hack và không cần tính phần trăm. Bạn có thể tạo hình vuông với tỷ lệ 1 / 1, tỷ lệ 2 trên 1 với 2 / 1 và thực sự là bất kỳ tỷ lệ nào bạn cần để hình ảnh này có thể điều chỉnh theo tỷ lệ kích thước đã đặt.

.square {
  aspect-ratio: 1 / 1;
}

Mặc dù tính năng này vẫn đang trong quá trình phát triển, nhưng bạn nên tìm hiểu vì tính năng này giải quyết được nhiều vấ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 đã 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ạ.