Hướng dẫn thiết kế cho Flexbox và Grid

Những gì các nhà thiết kế cần biết về các công cụ bố trí biến đổi này.

CSS đã đi được một chặng đường dài kể từ khi được giới thiệu vào năm 1996, nhưng các công cụ chúng tôi có sẵn để bố trí thiên đường Thay đổi nhiều. Bố cục bảng quá cứng nhắc, bố cục dựa trên phao về cơ bản là một hack, bố cục dựa trên định vị không thể thích ứng và không ai có thể xử lý sự phức tạp lớn theo cách hiệu quả. Don Patrick hiểu sai về tôi - những phương pháp này đã đưa chúng ta đi rất xa, nhưng chúng không dành cho mục đích bố trí phức tạp.

Sự kết hợp ngắn của các phương pháp cũ này để bố trí thậm chí còn trở nên rõ ràng hơn với thiết kế web đáp ứng, trong đó nắm lấy tính trôi chảy của Web là nền tảng.

Với flexbox và lưới, cuối cùng chúng ta cũng có các công cụ dành riêng cho bố cục hiệu quả hơn và không có các bản hack cần thiết với các phương thức bố trí trước đó. Họ mở khóa những khả năng mới cho các vấn đề cũ, cho phép những thứ mà người sói có thể có trước đây và giải quyết các vấn đề thực sự mà chúng ta gặp phải với thiết kế web đáp ứng.

Hộp linh hoạt

Flexbox, còn gọi là hộp linh hoạt CSS, là một phương pháp bố cục mới cho phép chúng ta điều khiển căn chỉnh mà không phương pháp CSS nào khác có thể tạo ra. Nó vượt trội ở micro layout Bố trí: khả năng căn chỉnh, sắp xếp và phân phối không gian giữa các vật phẩm trong một thùng chứa, hoặc thay đổi chiều rộng hoặc chiều cao của phần tử để lấp đầy không gian có sẵn.

Cải thiện gói

Trong Thiết kế Web đáp ứng, chiều rộng có sẵn thay đổi khi chiều rộng khung nhìn thay đổi kích thước. Điều này có thể dẫn đến việc gói nội dung ngoài ý muốn, đặc biệt là khi nội dung dài hơn thiết kế hoặc thùng chứa nội dung quá hẹp. Có lẽ tất cả chúng ta đều đã thấy trước đây: thiết kế chiếm độ dài nội dung 'lý tưởng', nhưng ngay khi nó được triển khai và nội dung thực sự được thêm vào, nội dung sẽ chuyển sang dòng tiếp theo vì không có đủ không gian hoặc thoát ra khỏi nó thùng đựng hàng. Cả hai đều không lý tưởng, và có thể khiến bố cục bị phá vỡ.

Vấn đề là không chắc chắn không gian có sẵn sẽ luôn đủ lớn để chứa nội dung có thể thay đổi về chiều dài. Theo truyền thống, chúng tôi đã sử dụng CSS Media Queries để điều chỉnh bố cục tại các điểm dừng cụ thể để giảm thiểu các vấn đề với gói nội dung. Nhưng Media Queries don lồng có tính đến độ dài của nội dung - chúng phản ứng với chiều rộng hoặc chiều cao rõ ràng. Điều này thường dẫn đến một lượng truy vấn phương tiện quá mức để kiểm soát một phần nội dung cụ thể tại các điểm dừng rõ ràng.

Ví dụ về gói cải tiến với Flexbox

Flexbox giải quyết vấn đề này bằng cách cho phép chúng tôi tận dụng không gian có sẵn và sau đó bọc nội dung khi nó không. Hành vi điều chỉnh tự động này không chỉ thuận tiện mà còn cải thiện khả năng bảo trì vì chúng tôi không phải dựa vào điểm dừng để điều chỉnh kiểu dáng thủ công. Ví dụ trên thể hiện hành vi này: hiển thị nhãn vị trí liền kề với tiêu đề nếu có đủ không gian và căn chỉnh nhãn vị trí ở bên trái bên dưới tiêu đề nếu có đủ không gian trống.

Các phương pháp truyền thống như nổi sẽ dẫn đến nhãn vị trí được căn phải trên các khung nhìn nhỏ hơn, ít hơn lý tưởng. Bạn có thể sửa lỗi này bằng cách nổi nhãn sang trái ở một điểm dừng cụ thể. Vấn đề với cách tiếp cận này là bây giờ bạn phụ thuộc vào một điểm dừng để thay đổi kiểu dáng nội dung của bạn, có thể thay đổi độ dài.

Cải thiện khoảng cách và sắp xếp

Khi nói đến khoảng cách và căn chỉnh trong CSS, chúng tôi phải thông minh để thực hiện bất cứ điều gì không phải là hành vi mặc định. Ngay cả các hiệu ứng có vẻ tầm thường cũng có thể khó khăn trong CSS, như căn chỉnh dọc hoặc chia đều không gian giữa các mục, phải dựa vào cách giải quyết hoặc hack. Một số điều hoàn toàn không thể đạt được.

Flexbox giải quyết điều này bằng cách cho phép phân phối không gian giữa một số mục không xác định trong một khu vực có chiều rộng hoặc chiều cao không xác định và căn chỉnh các mục trên trục X hoặc Y. Nó hoạt động giống như cách các công cụ thiết kế như Phác thảo hoặc Illustrator có thể kiểm soát khoảng cách và căn chỉnh, cho phép điều khiển mà chúng tôi mong đợi trên Web.

Ví dụ về phân phối không gian được cải thiện với Flexbox

Một ví dụ tuyệt vời về điều khiển này có thể được nhìn thấy ở trên: các mục điều hướng được phân bổ đều, tập trung theo chiều dọc và mục đầu tiên và cuối cùng được tuôn ra cạnh của thùng chứa điều hướng. Điều này sẽ không thể sử dụng các phương pháp truyền thống như áp dụng khối nội tuyến cho các mục hoặc dựa vào bố cục bảng.

Thứ tự nguồn

Thứ tự nguồn đề cập đến thứ tự các yếu tố được hiển thị trên trang dựa trên vị trí chúng xuất hiện trong HTML. Theo mặc định, các phần tử sẽ hiển thị từ trên xuống dưới và từ trái sang phải theo mặc định - chiều rộng của chúng được xác định bởi thuộc tính hiển thị của chúng.

Thứ tự nguồn tự nhiên của tài liệu sẽ hướng dẫn bạn khi suy nghĩ về cách thiết kế của bạn sẽ thích ứng với các độ rộng khung nhìn khác nhau, nhưng đôi khi nó lại hữu ích để sửa đổi nó để sắp xếp lại các mục. Cách duy nhất để làm điều này trước flexbox là ẩn phần tử và hiển thị phần tử khác, dẫn đến HTML trùng lặp hoặc dựa vào định vị tuyệt đối, không phải lúc nào cũng hoạt động khi nội dung có thể thay đổi kích thước. Với flexbox, bạn chỉ cần sửa đổi thứ tự của các mục flex mà không cần phải sửa đổi cấu trúc HTML cơ bản.

Ví dụ về đặt hàng với Flexbox

Ví dụ trên thể hiện việc đặt hàng trong Flexbox: chúng tôi hiển thị logo ở bên trái của chân trang, phù hợp với tiêu đề. Trên các khung nhìn nhỏ, chúng tôi hiển thị các vị trí trước logo. Sự sắp xếp lại này có ý nghĩa bởi vì các vị trí quan trọng hơn trong bối cảnh này.

Bố cục lưới

Bố cục lưới CSS là một hệ thống bố cục hai chiều được tạo riêng cho Web. Nó cho chúng ta khả năng phân chia trang thành các khu vực mà mỗi khu vực có thể được xác định thêm về kích thước, vị trí và lớp, dẫn đến một khung gốc mạnh mẽ đến khó tin.

Phù hợp với mục đích

CSS chưa bao giờ phù hợp thực sự với công cụ bố cục mục đích, vì vậy chúng tôi đã phải sáng tạo khá nhiều với cách chúng tôi có thể áp dụng lưới vào công việc của mình. Các khung lưới đã xuất hiện để đáp ứng nhu cầu này, nhưng không phải không đưa ra các vấn đề của riêng họ. Nhiều khung lưới phổ biến nhất yêu cầu định nghĩa bố cục trong đánh dấu, điều này có thể dẫn đến sự phình to mã, các vấn đề bảo trì và làm mờ sự phân tách cấu trúc và trình bày tài liệu.

Với lưới, chúng ta không còn cần một khung lưới nữa. Nó là một khung riêng được đưa vào CSS. Nó cho phép chúng ta xác định bố cục trong CSS một cách trực quan, trong khi vẫn nắm lấy tính lưu loát mặc định của Web. Khả năng của công cụ bố cục mới này là vô tận và nó cho phép chúng tôi hoàn thành các bố cục chỉ có thể có với Javascript trước khi xuất hiện.

Ví dụ về bố trí lưới

Bố cục web thế hệ tiếp theo

Khi nói đến bố cục, chúng tôi đã bị mắc kẹt trong một lối mòn khá lâu. Các mẫu được thiết lập và các hạn chế của các công cụ bố cục trước đây trong CSS đã đưa chúng ta xuống con đường đồng nhất bố cục trong quá khứ. Bạn không cần phải đi xa trên Web để phát hiện ra nó: tiêu đề, nội dung chính, thanh bên, chân trang.

Sự xuất hiện của thiết kế web đáp ứng đã khởi xướng một số ý tưởng mới cho bố cục trang và cùng với đó, một số mẫu tốt đang bắt đầu xuất hiện: bỏ thanh bên, đơn giản hóa thiết kế và tập trung vào nội dung. Nhưng chúng ta cũng đang thấy các mô hình xuất hiện đã trở nên phổ biến đến mức chúng ta nghe thấy tiếng cảm thán rằng tất cả các trang web trông giống nhau.

Bố cục lưới sẽ cho phép chúng tôi thoát khỏi bố cục mà chúng tôi đã tham gia và cung cấp cho chúng tôi các công cụ chúng tôi cần để xây dựng bố cục thế hệ tiếp theo. Cuối cùng chúng ta có thể xây dựng xung quanh nội dung thay vì buộc nó thành các mẫu thiết kế chung có thể tìm thấy trên mọi trang web phản hồi khác.

Lời cảnh báo

Điều quan trọng cần lưu ý là không phải tất cả các trình duyệt đều hỗ trợ tính năng flexbox và lưới. Chúng tôi phải xem xét đối tượng của chúng tôi là ai cho từng dự án và xác định xem phần lớn người dùng sẽ được hưởng lợi từ các tính năng nâng cao hơn này, trong khi cung cấp dự phòng hợp lý cho các trình duyệt không hỗ trợ. Nó hoàn toàn chấp nhận được để cung cấp cho người dùng trong các trình duyệt cũ với phiên bản UI đơn giản hóa của bạn và nâng cao nó cho người dùng trong các trình duyệt mới hơn.

Còn nữa. Hơn rất nhiều.

Chúng tôi chỉ làm trầy xước bề mặt của những gì flexbox và lưới có thể làm. May mắn thay, có rất nhiều tài liệu tuyệt vời có sẵn liên quan đến khả năng của các công cụ bố trí mới này. Ở đây, một số mục yêu thích của tôi:

Hộp linh hoạt

Lưới

Bất cứ ai đang xây dựng cho Web đều nhận thức sâu sắc về những hạn chế khác nhau khi nói đến bố cục trong CSS. Thông thường, điều này đòi hỏi phải thỏa hiệp thiết kế để nó hoạt động như mong đợi trong quá trình phát triển, hoặc tệ hơn, dựa vào Javascript để thực hiện hành vi chúng ta cần.

Sự xuất hiện của flexbox và bố trí lưới báo hiệu một kỷ nguyên bố cục mới trên Web. Chúng ta phải áp dụng một tư duy mới khi bố trí để không bị giới hạn bởi những thói quen, nhược điểm và hack của quá khứ. Chúng ta hãy nắm bắt những công cụ mới này và làm mới lại những khám phá của chúng tôi về những gì có thể với bố cục trên Web.