Một trong những điều chúng tôi phải làm với tư cách là nhà phát triển là tìm ra cách tiếp cận một vấn đề khi được giao một dự án mới. Khi làm việc với các trang web đáp ứng, chúng tôi thường chọn giữa CSS Grid và CSS Flexbox để bố trí trang web của mình. Bài viết này sẽ cố gắng phân biệt sự khác biệt giữa Grid và Flexbox và khi nào tốt nhất nên chọn cái này hơn cái kia.
Flexbox - Tổng quan ngắn gọn
CSS Flexbox về cơ bản là một mô hình hộp đáp ứng. Nó cho phép định vị tốt hơn trong một vùng chứa và khá dễ thực hiện miễn là bạn nhận thức được khả năng của nó.
Mô hình hộp linh hoạt vẫn sử dụng tất cả các thuộc tính của mô hình hộp để kiểm soát lề, phần đệm, đường viền và nội dung. Khi chúng tôi đặt display: flex trên vùng chứa mẹ, nó sẽ mở ra tất cả các thuộc tính flex sẽ được sử dụng trên vùng chứa mẹ đó.
Lựa chọn thuộc tính Flexbox:
- hướng linh hoạt :cột | hàng * | ngược cột | đảo ngược hàng
- flex-wrap :bọc | ngay bây giờ * | quấn ngược
- flex-flow :phím tắt cho hai thuộc tính đầu tiên được liệt kê - nó sẽ tuân theo định dạng
flex-flow: <flex-direction> <flex-wrap>; - justify-content: không gian các hạng mục dọc theo trục chính. Khi hướng uốn được đặt thành hàng, trục chính là trục ngang. Khi được đặt thành cột, quyền truy cập chính là trục tung.
- justify-content: flex-start * | flex-end | trung tâm | không gian-đồng đều | không gian xung quanh | không gian giữa
- căn chỉnh các mục: không gian các mục dọc theo trục đối diện với lối vào chính. Khi hướng uốn được đặt thành cột, đó sẽ là trục tung. Khi được đặt thành hàng, đó sẽ là trục hoành.
- căn chỉnh-các mục: kéo dài * | center | flex-start | flex-end | baseline
- căn chỉnh: điều này được phép sử dụng trên các mặt hàng linh hoạt mà cha mẹ của họ đã khai báo thuộc tính hiển thị của họ là 'linh hoạt'. Nó kiểm soát sự liên kết trong vùng chứa linh hoạt.
- align-self: auto * | căng ra | trung tâm | flex-start | flex-end | đường cơ sở
* - cài đặt mặc định của thuộc tính
CSS Grid - Tổng quan ngắn gọn
CSS Grid là một mô hình bố cục khác có sẵn để sử dụng. Nó mới hơn một chút so với Mô hình CSS Flexbox, do đó, hỗ trợ trình duyệt không được cung cấp rộng rãi cho CSS Grid như dành cho Flexbox. Chúng tôi có khả năng tạo bố cục 2D trong các cột và hàng với vị trí được đặt tỉ mỉ. Khi chúng tôi đặt display: grid trên phần tử mẹ của chúng tôi, nó cho phép chúng tôi sử dụng các thuộc tính lưới chung có sẵn cho chúng tôi.
Lựa chọn thuộc tính lưới CSS
- khoảng cách lưới, khoảng cách giữa cột-lưới, khoảng cách giữa hàng và hàng: Điều này được sử dụng để thiết lập khoảng cách về cơ bản. Khoảng cách lưới là một phím tắt để kiểm soát cả khoảng cách cột và hàng.
- lưới-mẫu-cột, lưới-mẫu-hàng: Điều này cho phép định dạng cơ bản của các vùng chứa trong lưới của bạn - chiều rộng của các cột, chiều cao của các hàng sẽ như thế nào, số lượng vùng chứa sẽ có trong mỗi hàng, v.v.
- justify-content :Căn chỉnh toàn bộ lưới theo chiều ngang.
- căn chỉnh nội dung :Căn chỉnh toàn bộ lưới theo chiều dọc.
- lưới-cột, lưới-hàng: Cho phép chúng tôi khai báo độ rộng hoặc độ cao mà chúng tôi muốn các mục lưới của mình.
Tôi Nên Chọn Cái Nào?
Các thuộc tính trong CSS Flexbox cho phép thiết kế là bố cục một chiều:bạn có thể thiết lập bố cục của mình để được tạo bằng cách sử dụng hàng hoặc cột. Điều này rất tốt cho các trang web tập trung ít hơn vào vị trí nội dung và nhiều hơn vào tính linh hoạt trong thiết kế đáp ứng.
Ngược lại, CSS Grid cho phép bạn tạo bố cục trong không gian hai chiều:với hàng và cột. Có các thuộc tính kiểm soát bố cục và chiều rộng và chiều cao của mỗi vùng chứa trong lưới. Vì vậy, bạn có thể kết thúc với các lưới trông rất giống với cửa sổ kính màu được đăng ở đầu blog này.
Nếu bạn tập trung vào vị trí nội dung và muốn kiểm soát các vùng chứa con của mình trong không gian, thì Grid là định dạng bố cục dành cho bạn. Flexbox tập trung nhiều hơn vào luồng nội dung hơn là vị trí.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Hỗ trợ trình duyệt cho Grid không phổ biến như Flexbox - đơn giản vì tôi nghĩ rằng Flexbox cũ hơn Grid một chút. Đó có thể là một cân nhắc khi chọn mô hình bố trí nào để sử dụng trong dự án của bạn.
Kết luận
Cho dù bạn chọn mô hình bố cục nào, chúng đều là những lựa chọn hợp lệ để giải quyết vấn đề. Vấn đề chỉ là mục đích của dự án thực sự quyết định xem bạn chọn bố cục CSS Flex hay CSS Grid.