Xây dựng bố cục phức tạp với postcss-flexbox

Sep 11, 2025

Cách

Flexbox là một công cụ tuyệt vời để giảm CSS Bloat và có một số đường được tích hợp để đối phó với những thứ như trật tự và căn chỉnh nguồn. Nhưng nó không cung cấp bất kỳ trợ giúp để thực hiện các toán học tạo ra các kích cỡ cột và máng xối. Vì nhiều chuyên gia liên tục nêu: Flexbox rất hay, nhưng đó không phải là một hệ thống lưới.

Chúng ta nên sử dụng Flexbox, nhưng chúng ta không nên vứt bỏ các khái niệm cơ bản đằng sau các hệ thống lưới kéo chúng tôi ra khỏi 'thời đại Geocities' của thiết kế:

Làm cho các cột tỷ lệ thuận với một cái gì đó
Sử dụng máng xối phù hợp trong suốt thiết kế của bạn

Chúng ta có thể sử dụng một trong nhiều hệ thống lưới Flexbox ngoài kia, nhưng trong tất cả sự trung thực, các phong cách đằng sau những thứ này chủ yếu giống như các lớp lưới dựa trên float. Các tác giả chỉ cần thêm màn hình: flex vào thùng chứa, cùng với một số lớp trợ giúp mà các thuộc tính flexbox obfuscate (ví dụ: một lớp như .grid-dọc-align-mid là một sự xáo trộn của Căn chỉnh các mặt hàng: Trung tâm ).

Sự khác biệt duy nhất là, bây giờ các cột là 'uốn cong', có nghĩa là chúng ta nhận được đường mà tôi đã đề cập trước đó. Nhưng điều này vẫn không giải quyết được các vấn đề chính mà lưới mặt gặp phải ngày nay: hệ thống lưới vẫn xuất phát một tấn css bloat và lưới vẫn còn nhàm chán.

25 mẫu trang web hàng đầu

Vấn đề với lưới

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — Hệ thống bloat: CSS được tạo của Bootstrap cho lưới riêng là 16.435 ký tự - hầu hết trong số đó bạn sẽ không bao giờ sử dụng

Các tác giả lưới thường phân phối các gói CSS khổng lồ có thể bù đắp, thứ tự nguồn, căn chỉnh và thay đổi kích thước theo một số kích thước thiết bị tùy ý. Họ dựa vào gzip để giảm thiểu một số thiệt hại, nhưng điều này không hiểu được tất cả. Nếu bạn không cần những tính năng bổ sung đó thì sao?

Giả sử khung bạn hiện đang sử dụng cung cấp Mixins lưới, giải pháp tốt nhất có thể là để học các cột và sáng tác các cột của riêng bạn. Điều này tạo ra ít bloat, nhưng giới hạn các lưới của bạn đến phân số và không cung cấp cho bạn rất nhiều khả năng di động giữa các khung khác nhau.

Vào vấn đề thứ hai. Các nhà thiết kế đã bị khóa tinh thần để đưa ra tất cả các quyết định dựa trên sự kết hợp nhất định của các cột có kích thước bằng nhau. Do đó, toàn bộ Internet đang bắt đầu mờ dần thành một 'ngăn xếp trên điện thoại di động; Kết hợp cột 1/12 trên bất cứ thứ gì khác 'dystopia.

Flexbox giới thiệu. Flex-Grow. , giải phóng chúng ta một chút. Bây giờ chúng ta có thể đặt kích thước trông tốt và điền vào chỗ trống còn lại bằng một phần tử kéo dài, nhưng các máng xối sẽ xếp hàng nhất quán trên toàn trang? Các khu vực nội dung được đặt ra với bất kỳ loại tỷ lệ nào trong tâm trí, hoặc chúng ta sẽ quay lại chỉ có cánh?

Vào rồng

Giải pháp cho cả hai vấn đề này được bao bọc trong một hàm gọi là postcss-ant. Các plugin postcss có thể được sử dụng với một loạt các công cụ xây dựng như webpack, gulp hoặc đơn giản là dòng lệnh. Ant trộn liền mạch thành CSS đồng bằng (hoặc bất kỳ bộ tiền xử lý nào) với một API đơn giản lừa đảo mà mặt nạ hàng chục tâm trí-boggling calc. công thức. Nó đòi hỏi hai thông số giống như mixin để lấy rất nhiều kích thước thân thiện với lưới điện.

Một ví dụ có thể làm cho nó rõ ràng hơn: chiều rộng: Kích thước (1/2) Nhận (1) trở về Calc (99,99% * 1/2 - (30px - 30px * 1/2)) . Hãy phá vỡ điều này:

kích thước () là một danh sách kích thước tách rời không gian. Đây có thể là bất kỳ sự kết hợp nào của nhiều kích cỡ: số cố định dưới dạng độ dài CSS hợp lệ ( px. Cái gì em. Cái gì % ); Phân số hoặc số float (trả về bất cứ thứ gì còn sót lại, sans số cố định); và Tự động Từ khóa (trả về bất kỳ kích thước nào còn sót lại, phân số sans và số cố định)
nhổ lông() là một chỉ mục dựa trên 1 tìm nạp một kích thước thân thiện với lưới từ danh sách của bạn. Vì thế Kích thước (1px 2px 3px) Nhận (2) sẽ trở lại 2px.
Các calc. Công thức là một kích thước thân thiện với lưới

Chúng tôi nhận được chiều rộng cho mỗi cột trong lưới hai cột với một máng xối 30px duy nhất giữa chúng:

.grid {
  Hiển thị: Flex;
  Flex-Wrap: Wrap;
Không thể

.một nửa {
  Chiều rộng: Kích cỡ (1/2) nhận (1); / * Trả về Calc (99,99% * 1/2 - (30px - 30px * 1/2)) * /
  lề-phải: 30px; / * đặt một máng xối ở phía bên phải của mỗi cột * /
Không thể

.half: nth-con (2n + 2) {/ * bắt đầu ở phần tử thứ 2 và bắt đầu đếm bởi 2s * /
  lề-phải: 0; / * Xóa máng xối cuối cùng khỏi mỗi hàng * /
}

Điều này đã cung cấp cho các nhà thiết kế sức mạnh để sử dụng các kích thước này bất cứ nơi nào họ thấy phù hợp, nhưng hãy đi sâu hơn.

Kích thước (100px 1/2) Nhận (1) trở về 100px. . Đủ đơn giản, nhưng tại sao chúng ta sẽ cần sử dụng kiến để trở về 100px. ? Chúng ta sẽ đến đó trong một giây.

Kích thước (100px 1/2) Nhận (2) trở về Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) . Holy Crap. kiến đang tìm ra tổng kích thước của số cố định, sau đó trả về 1/2 của bất cứ điều gì còn sót lại - trong một cách thân thiện với lưới thứ N.

Chúng ta có thể sử dụng những thứ này calc. công thức để tạo một lưới với một 100px. cột và hai. 1/2 các cột như vậy (tôi sẽ bỏ qua .grid. Kiểu để cứu cây, nhưng hãy chắc chắn bao gồm chúng trong mã của bạn):

 .fixed-size {
  Chiều rộng: Kích thước (100px 1/2) Nhận (1); / * Trả về 100px (Tôi biết nó có vẻ ngớ ngẩn nhưng chịu đựng tôi lâu hơn một chút) * /
  lề-phải: 30px;
Không thể

.một nửa {
  Chiều rộng: Kích thước (100px 1/2) nhận được (2); / * Trả về Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * /
  lề-phải: 30px;
Không thể

.half: thứ n-con (3n + 3) {
  lề-phải: 0;
}

Bây giờ chúng ta có thể nhận được một số kích thước không thể xử lý trước đây, nhưng nó không linh hoạt và có thể yêu cầu nhiều văn bản khi xử lý nhiều kích cỡ.

Looping tiền xử lý

Minimal markup: A minimal markup, two-column, nth grid using postcss-ant. Notice how there is no margin-right on the last element in the row — Đánh dấu tối thiểu: Đánh dấu tối thiểu, Lưới hai cột, NTH sử dụng Postcss-Ant. Lưu ý cách không có lề trên phần tử cuối cùng trong hàng

Bộ tiền xử lý và các postcss không phải lúc nào cũng hòa đồng - đặc biệt là khi cú pháp tùy chỉnh có liên quan. May mắn thay, API của ANT là thân thiện với bộ tiền xử lý. Chúng ta có thể sử dụng trình phân tích cú pháp postcss như postcss-scss với plugin trước, nhưng cách tiếp cận này sử dụng rất nhiều plugin postcss chưa hoàn thành / không hoàn hảo mà chức năng Sass 'kém hoàn hảo. Tôi đã tìm thấy quy trình làm việc tốt nhất là:

Sử dụng bộ tiền xử lý nhanh như Node-Sass để xem in.scss. đến out.css.
Sử dụng postcss để xem out.css. đến cuối cùng.css.
& lt; link & gt; đến cuối cùng.css. Trong đánh dấu của bạn

Điều này cung cấp cho bạn cú pháp tiền xử lý tốt nhất với tất cả các postcss plugin mà trái tim bạn mong muốn.

Bây giờ cho những thứ mát mẻ. Bộ tiền xử lý thường có cách để lặp một số lần xác định trong khi cung cấp iterator:

 @for $ i từ 1 đến 3 {
  Nội dung: $ i; // Trả về nội dung: 1; Nội dung: 2; Nội dung: 3;
}

Với một chút kiến thức về bộ tiền xử lý, bạn có thể bắt đầu sử dụng kiến trong những cách thực sự thú vị ...

 $ Kích thước: 100px 1/2 1/2;
$ máng xối: 30px;
$ Độ dài: chiều dài (kích thước $);

.cột {
  lề-phải: $ máng xối;

  @for $ i từ 1 đến $ Độ dài {
    & amp;: thứ n-con (# {$ chiều dài} n + # {$ i}) {
      Chiều rộng: kích thước (kích thước $) Get ($ i) máng xối ($ máng xối);
    Không thể
  Không thể

  & amp;: thứ n-con (# {$ chiều dài} n + # {$ dài}) {
    lề-phải: 0;
  Không thể
}

Bây giờ các cột có kích thước bất thường của chúng tôi bao bọc cho các hàng mới mà không cần đánh dấu bổ sung. Đi trước và tinker xung quanh với mã này. Hãy thử các kích cỡ khác nhau, máng xối và thêm kích thước mới (như 100px Auto 100px).

Đây là một mô hình khá phổ biến với ANT, vì vậy tôi cũng đã gói nó thành một thuộc tính hoạt động với Vanilla CSS:

 .grid {
  tạo-lưới: kích thước (100px 1/2 1/2); / * Bạn có thể chuyển các tùy chọn bổ sung, nhưng Pluck () không còn cần thiết. * /
}

Rất nhiều lựa chọn

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible — Vòng lặp tiền xử lý: Ant thực sự bắt đầu thể hiện sức mạnh của nó khi chúng tôi kết hợp nó với các vòng lặp tiền xử lý để tạo bố cục từng là không thể

Lưới thứ n rất tuyệt khi bạn biết kích thước và số lượng phần tử được thông qua, nhưng đôi khi bạn muốn tạo một thùng chứa và chỉ cần kết xuất một số yếu tố có kích thước ngẫu nhiên trong đó. Trong những trường hợp này, ký quỹ tiêu cực Lưới là đặt cược tốt nhất của bạn. Đơn giản là vượt qua ký quỹ tiêu cực Để kiến như vậy:

.grid {
  Biên độ: 0 -15px;
Không thể

.cột {
  Chiều rộng: kích thước (1/3) nhận (1) lưới (ký quỹ âm);
  Biên độ: 0 15px;
}

Phần kết luận

Những ví dụ này chỉ là một cái nhìn nhỏ xíu tất cả những điều thú vị postcss-ant có thể làm. Nó có một vài tham số tùy chọn và nhiều cách xử lý lỗi mô tả, nhưng sức mạnh thực sự của kiến là bạn.

Các công cụ 'câm' chỉ cần trả về một chút dữ liệu luôn là những công cụ tốt nhất, khi họ đặt sức mạnh trở lại vào tay của nhà phát triển. Đó là những gì postcss-ant được thiết kế để làm. Nếu bạn hấp dẫn, hãy đến corysimmons.github.io/postcss-ant. Đối với một số bản demo nóng bỏng và tài liệu ngọt ngào.

Bài viết này ban đầu được xuất bản trong số 286 của Tạp chí Net, Mua nó ở đây.

Những bài viết liên quan:

Tại sao thiết kế web cần các chuyên gia UX
10 cuốn sách thiết kế web hàng đầu cho Giáng sinh 2016
3 công cụ hàng đầu để thử nghiệm hiệu suất Web

Xây dựng bố cục phức tạp với postcss-flexbox

Vấn đề với lưới

Vào rồng

Looping tiền xử lý

Rất nhiều lựa chọn

Phần kết luận

Cách - Các bài báo phổ biến nhất

10 điều bạn không biết bạn có thể làm với Photoshop

Master The Mixer Brush trong Photoshop

Tạo một thành phần băng chuyền linh hoạt

Cách tạo nhân vật hoạt hình Furry

Cách làm tan chảy một đối tượng 3D với ba.js

Tạo một thiết kế logo hình học hoàn hảo trong Illustrator

Tạo mực trộn với InDesign

Phát triển các kỹ năng biếm họa của bạn

Thể loại