Các mẫu Flexbox Thư viện mã Flexbox CSS cuối cùng

Thuộc tính flexbox CSS mới nhất đã thay đổi hoàn toàn cách các nhà phát triển tạo giao diện. Không có nhiều float và CSS hack để sắp xếp bố cục hoàn hảo. Không còn lo lắng về các kỹ thuật đáp ứng tùy chỉnh để xử lý bố cục nhiều cột.

Nhưng mặc dù flexbox giải quyết được nhiều vấn đề, nó cũng phức tạp để tìm hiểu. Để giúp bạn bắt đầu, có một thư viện trực tuyến mới có tên Mẫu Flexbox liệt kê nhiều yếu tố flexbox khác nhau vào một vị trí trung tâm.

Thư viện này hoàn toàn miễn phí để sử dụng và nó được mở nguồn trên GitHub. Tất cả các ví dụ có thể là tải xuống cục bộ thông qua NPM hoặc là thông qua GitHub. Nhưng bạn cũng có thể duyệt các ví dụ thông qua trang web để sao chép và dán mã khi cần thiết.

Mỗi mẫu có trang riêng với một mô tả ngắn gọn và mẫu mã. Bạn hoàn toàn có thể theo nghĩa đen sao chép và dán mã vào dự án web hiện tại của bạn, mặc dù chúng tôi khuyên bạn trước tiên nên tìm hiểu một chút về mã làm gì và tại sao bạn sử dụng nó.

Ví dụ: bản demo thanh tiêu đề trang web sử dụng flexbox để căn chỉnh tất cả các thành phần trong thanh điều hướng bên cạnh nhau.

Thông thường, điều này sẽ yêu cầu các float và một lớp Clearfix để mọi thứ được căn chỉnh chính xác.

Với flexbox, bạn có thể giữ mọi thứ trong một thùng chứa bằng cách sử dụng hiển thị: flex bất động sản. Bằng cách này bạn có thể xác định cách các yếu tố nên tương tác với nhau và cách flexbox nên hoạt động trên màn hình nhỏ hơn.

Các mẫu liên tục được cập nhật và thư viện hiện tại tập trung vào các yếu tố phổ biến nhất như tab, thanh bên và định tâm dọc / ngang.

Nếu bạn là người hoàn toàn mới với flexbox thì chắc chắn hãy kiểm tra các mẫu Flexbox. Trang web sẽ không dạy cho bạn tất cả những điều cơ bản về flexbox nhưng nó sẽ cung cấp các ví dụ thực tế mà bạn có thể sửa đổi cho các dự án web của riêng bạn.