Flexbox vs Twitter Bootstrap (hoặc khung tương tự) [đã đóng]

Gần đây tôi đã phát hiện ra Flexboxkhi tôi đang tìm kiếm một giải pháp để làm cho các div có cùng độ cao, tùy thuộc vào mức cao nhất.

Tôi đã đọc trang sau trên CSS-tricks.com và nó đã thuyết phục tôi rằng đó flexboxlà một mô-đun rất mạnh để học và sử dụng. Tuy nhiên, nó cũng khiến tôi suy nghĩ về thực tế rằng Twitter Bootstrap (và các khung tương tự) cung cấp loại chức năng tương tự (tất nhiên là rất nhiều) với hệ thống lưới của họ.

Bây giờ, các câu hỏi là: những ưu và nhược điểm của là flexboxgì? Có điều gì người ta không thể làm với Flexbox mà người ta có thể làm với một khung như Bootstrap (tất nhiên là hoàn toàn nói về hệ thống lưới)? Cái nào nhanh hơn khi được thực hiện trên một trang web?

Tôi đoán khi chỉ dành cho hệ thống lưới, sẽ hoàn toàn thông minh hơn khi sử dụng flexbox, nhưng nếu bạn đang sử dụng một khung công tác, thì có gì flexboxcó thể thêm vào không?

Có bất kỳ lý do để chọn flexbox"hệ thống lưới" trên khung không?

Vì một vài lý do, flexbox tốt hơn nhiều so với bootstrap:

• Bootstrap sử dụng phao để tạo ra hệ thống lưới, mà nhiều người sẽ nói là không có ý nghĩa đối với web, trong đó flex-box làm ngược lại bằng cách linh hoạt với kích thước và nội dung của vật phẩm; sự khác biệt tương tự như sử dụng pixel so với em / rem hoặc như chỉ kiểm soát div của bạn bằng cách sử dụng lề và phần đệm và không bao giờ đặt kích thước được xác định trước.

• Bootstrap, bởi vì nó sử dụng float, cần Clearfix sau mỗi hàng hoặc bạn sẽ nhận được các div sai lệch có chiều cao khác nhau. Flex-box không làm điều đó và thay vào đó kiểm tra div cao nhất trong container và bám vào chiều cao của nó.

Lý do duy nhất tôi đi với bootstrap trên flex-box là thiếu hỗ trợ trình duyệt (chủ yếu là IE) (đã chết). Và đôi khi bạn nhận được các hành vi khác nhau từ Chrome và Safari mặc dù cả hai đều sử dụng cùng một công cụ webkit.

Biên tập:

BTW nếu vấn đề duy nhất bạn gặp phải là các cột có chiều cao bằng nhau, có khá nhiều giải pháp cho điều đó:

• Bạn có thể sử dụng display: tabletrên cha mẹ, một display: table-cell;trên con. Xem Cách lấy cùng chiều cao trong màn hình: ô bảng

• Bạn có thể sử dụng định vị tuyệt đối trên mỗi div:
  position: absolute; top: 0; bottom: 0;

• Ngoài ra còn có giải pháp jquery / JS và một giải pháp khác mà tôi không thể nhớ vào lúc này mà tôi sẽ cố gắng thêm sau này.

Chỉnh sửa 2:

Đồng thời kiểm tra http://chriswrightdesign.com/experiment/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properations về cách thức hoạt động của hộp flex.

Chỉnh sửa 3: https://kyusuf.com/post/alest-complete-guide-to-flexbox-without-flexbox

Chỉnh sửa 4: https://caniuse.com/#feat=flexbox

Tôi chưa sử dụng Flexbox (tôi đã đọc về nó và có vẻ rất tuyệt) nhưng tôi là một nhà phát triển Bootstrap. Tôi khuyên bạn nên kiểm tra các trang in Flexbox trước khi đưa ra quyết định cuối cùng. Bạn biết đấy ... Đôi khi các kiểu in là một vấn đề đau đầu khủng khiếp và Bootstrap giúp tôi rất nhiều khi tôi phải thiết kế các định dạng in.

Tôi sợ bạn đã bỏ lỡ một bài viết khác về thủ thuật CSS :

Lưu ý: 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 bố trí Lưới được dành cho bố cục tỷ lệ lớn hơn.

Không có nghĩa, bạn có thể không thử, nhưng chỉ cần suy nghĩ hai lần. Và tất cả phụ thuộc vào hỗ trợ trình duyệt mong muốn cuối cùng.