Share Tạo bố cục flexbox với thư viện Flexgrid

filiallion · 12/25/2018

Thông thường để tạo bố cục giao diện website các bạn thường sử dụng CSS để bố trí với các thuộc tính canh chỉnh phù hợp. Hiện nay với sự phát triển của các trình duyệt web, việc tạo bố cục website trở nên đơn giản, linh động và tương thích tốt hơn rất nhiều, một trong số đó phải kể đến khả năng tạo bố cục flexbox đang được áp dụng rất phổ biến trên các website sau này.

Tuy nhiên, nếu các bạn không có kiến thức tốt về flexbox thì việc thiết kế bố cục sẽ gặp nhiều khó khăn, thậm chí là không đạt được điều mong muốn. Để giải quyết khó khăn cho các bạn chưa có nhiều kinh nghiệm, các bạn có thể sử dụng thư viện Flexgrid, đây là một thư viện CSS đã xây dựng sẵn các CSS class hỗ trợ các bạn xây dựng bố cục flexbox dễ dàng.

Các bạn truy cập địa chỉ https://github.com/afropolymath/flexgrid để tải thư viện Flexgrid và tích hợp vào website với dòng mã lệnh như sau:

HTML:

<link href="path/to/flexgrid.min.css" rel="stylesheet">

Và các bạn xây dựng bố cục như ví dụ sau:

HTML:

<div class="flex row-layout">
    <div>Side element 1</div>
    <div>Side element 2</div>
</div>

Trên đây chỉ là một ví dụ đơn giản với bố cục theo hàng, thư viện Flexgrid còn nhiều thuộc tính khác các bạn có thể tham khảo thêm tại địa chỉ https://github.com/afropolymath/flexgrid.

Các bạn có thể bổ sung thêm kiến thức về CSS flexbox với tài liệu mô tả chi tiết hơn tại địa chỉ https://www.w3schools.com/css/css3_flexbox.asp.

Share Tạo bố cục flexbox với thư viện Flexgrid

filiallion

Administrator