CSS Flexbox là một mô hình bố cục cho phép sắp xếp các phần tử hiệu quả và năng động. Bố cục này là một chiều và cho phép sắp xếp các phần tử bên trong một vùng chứa với không gian được phân bổ đều Show Bố cục này làm cho các phần tử phản hồi nhanh, nghĩa là các phần tử thay đổi hành vi của chúng theo loại thiết bị hiển thị chúng. Nó làm cho các yếu tố linh hoạt và cung cấp cho chúng vị trí thích hợp và tính đối xứng Flexbox đã được giới thiệu trong CSS phiên bản 3 để sắp xếp các mục trong một thùng chứa hiệu quả và linh hoạt hơn. Trước flexbox, ban đầu có bốn phương thức bố cục mà chúng tôi đã liệt kê bên dưới
Bây giờ chúng ta sẽ thảo luận về các thành phần khác nhau của một flexbox Thành phần FlexboxMột flexbox bao gồm hai thành phần mà chúng tôi đã giải thích bên dưới
Đây là một đại diện trực quan của một flexbox  Trục FlexboxKhi xử lý bố cục flexbox, có hai trục cần được quan tâm. Những trục này đã được liệt kê dưới đây
Cả hai trục được giải thích chi tiết bên dưới trục chínhTrục chính (từ trái sang phải) được đặt theo thuộc tính flex-direction. Trục này có thể hiển thị bốn giá trị; Trong trường hợp hai giá trị đầu tiên là hàng và đảo ngược hàng, hộp linh hoạt thể hiện hướng nội tuyến, có nghĩa là, thùng chứa linh hoạt và các mục sẽ được căn chỉnh theo chiều ngang. Trong khi đó, đối với các giá trị cột và đảo ngược cột, hướng của hộp linh hoạt sẽ là khối hoặc nói một cách đơn giản hơn, vùng chứa và các mục sẽ được sắp xếp theo chiều dọc Trục chéoPhương của trục này vuông góc với trục chính. Nếu hướng của trục chính được điều chỉnh thành hàng hoặc đảo ngược hàng thì trục chéo sẽ di chuyển dọc theo các cột xuống dưới, trong khi đó, trong trường hợp của cột và đảo ngược cột, trục sẽ di chuyển dọc theo các hàng Cả hai trục đều có điểm bắt đầu, điểm kết thúc và độ dài nhất định giữa các điểm này Thuộc tính FlexboxCác thuộc tính của một flexbox đã được cung cấp dưới đây 1. trưng bày 2. hướng uốn 3. biện minh cho nội dung 4. sắp xếp các mục 5. uốn dẻo 6. căn chỉnh nội dung 7. dòng chảy linh hoạt 8. gọi món 9. tự sắp xếp 10. uốn cong Hãy xem một ví dụ Thí dụ HTML < div class="flexbox"> Ở đây, chúng tôi đã tạo một bộ chứa div có lớp “flexbox” và lồng thêm bốn bộ chứa div bên trong nó CSS .flexbox { Trước hết, chúng ta chỉ định cho bộ chứa div chính một màn hình flex để biến nó thành một hộp linh hoạt, sau đó chúng ta sẽ tạo cho nó một số màu nền CSS .flexbox div { Cuối cùng, chúng tôi đang tạo kiểu cho các mục flex có trong flexbox bằng các thuộc tính CSS khác nhau đầu ra Một flexbox đã được tạo thành công Phần kết luậnFlexbox là một mô hình bố cục sắp xếp các thành phần một cách hiệu quả và năng động đồng thời tạo cho chúng các không gian được phân bổ bằng nhau bên trong một thùng chứa. Bố cục này làm cho các phần tử phản hồi nhanh, nghĩa là các phần tử thay đổi hành vi của chúng theo loại thiết bị hiển thị chúng. Nó bao gồm một thùng chứa linh hoạt và các mục được coi là thành phần của nó. Hơn nữa, nó có các trục là chính và chéo và nó thể hiện nhiều thuộc tính. Bài viết này bao gồm tất cả các chi tiết cần thiết về một flexbox cùng với một ví dụ phù hợp Mục đích của flexbox trong CSS là gì?Tại sao chọn flexbox? . Khi bạn bố trí các mặt hàng của mình, bạn muốn kiểm soát kích thước của các mặt hàng trong một mặt hàng đó hoặc kiểm soát khoảng cách giữa các mặt hàng. you want to lay a collection of items out in one direction or another. As you lay out your items you want to control the dimensions of the items in that one dimension, or control the spacing between items.
Flexbox là gì và nó được sử dụng như thế nào?Flexbox là mô hình bố cục cho phép các phần tử căn chỉnh và phân bổ không gian bên trong vùng chứa . Sử dụng chiều rộng và chiều cao linh hoạt, các phần tử có thể được căn chỉnh để lấp đầy khoảng trống hoặc phân phối không gian giữa các phần tử, điều này làm cho nó trở thành một công cụ tuyệt vời để sử dụng cho các hệ thống thiết kế đáp ứng.
CSS grid hay flexbox cái nào tốt hơn?Nếu bạn đang sử dụng flexbox và thấy mình đang vô hiệu hóa một số tính linh hoạt, có thể bạn cần sử dụng CSS Grid Layout. Một ví dụ sẽ là nếu bạn đang đặt chiều rộng phần trăm trên một mục linh hoạt để làm cho nó thẳng hàng với các mục khác trong một hàng phía trên. Trong trường hợp đó, lưới có thể là lựa chọn tốt hơn .
Tôi nên sử dụng flexbox hay Bootstrap?Bố cục Flexbox phù hợp nhất với các thành phần của ứng dụng và bố cục quy mô nhỏ, trong khi Bootstrap dành cho bố cục quy mô nhỏ hơn hoặc lớn hơn . |
