Bất cứ ai có thể vui lòng soi sáng tôi về cách mô hình bố cục Flexbox mới tốt hơn so với cách bảng hiện tại không? (hiển thị: bảng và tất cả những gì được bao gồm trong trường hợp của tôi)?flexbox vs bảng, tại sao chúng ta cần flexbox?
Nó không được hỗ trợ ở tất cả dưới IE10 mà không phải là rất tốt cho tương lai gần, và tôi chỉ không thể thấy bất kỳ lợi ích nào so với bố cục bảng. Nhưng vẫn còn, internet đang bắt đầu để có được đầy đủ của "tín đồ" của phương pháp CSS mới này của bố trí, và tất cả các ví dụ tôi thấy có thể dễ dàng thực hiện với css bình thường mà không có vấn đề.
Cập nhật 25.12.15:
tôi đã được sử dụng flexboxes rất nhiều kể từ khi họ được giới thiệu với các trình duyệt hiện đại và đã ngừng sử dụng display:table và như vậy, bởi vì flexboxes là mạnh hơn và dễ sử dụng.
Tôi chưa bao giờ nghe mô hình trước đây, nhưng nhanh chóng, điều này có vẻ thú vị - cuối cùng dường như cung cấp một cách ngữ nghĩa sạch sẽ để làm tất cả các công cụ bố cục được sử dụng chỉ có thể với các bảng (sắp xếp các phần tử trong một grid top/center/bottom, có một nhóm các phần tử tự động kéo dài) nhưng không có '
'dispay: table' không phải là điên rồ ở tất cả trong quan điểm của tôi và rất thanh lịch. nó mô tả một yếu tố như một bảng và sau đó bạn có thể kiểm soát trẻ em của nó tuy nhiên bạn muốn, và phần ngữ nghĩa là luôn luôn vào bạn, flexbox không phải là HTML, nó chỉ là css. – vsync
'display: table' vẫn được kết nối với khái niệm về các bảng, được cho là không đúng ngữ nghĩa khi bạn xây dựng bố cục. Flexbox dường như cuối cùng cũng phá vỡ điều đó và thêm các cách khác để kiểm soát bố cục. Tôi đã chờ đợi một cái gì đó như thế này (nhưng rõ ràng nó không phải là thị trường đại chúng đã sẵn sàng nhưng được sử dụng một mình ... và nó sẽ không có ý nghĩa để sử dụng nó kết hợp với 'display: table', như được hỗ trợ bởi tất cả các trình duyệt) –
Trả lời
Có ba sự phân biệt tôi có thể nghĩ giữa việc sử dụng flexbox và sử dụng các giá trị hiển thị bảng hoặc nổi để bố trí một page:
order.flex-growvàflex-shrink.Vấn đề (như bạn đã chỉ ra) là hỗ trợ vẫn còn khá tệ; Trên thực tế, Firefox vẫn đang triển khai phiên bản cũ hơn của mô-đun flexbox, vì vậy bạn phải tính đến sự khác biệt nhỏ về cú pháp và hành vi, tùy thuộc vào trình duyệt bạn đang sử dụng. Tuy nhiên, đã có một số ít người cho rằng là tương lai cho bố cục, đặc biệt là cho các ứng dụng web phức tạp xuất hiện thường xuyên hơn. Sẽ rất đáng học nếu bạn không hài lòng với việc đầu tư khôn ngoan - với chi phí không thực sự có thể sử dụng ngay bây giờ.
Tôi cũng đề nghị bạn hãy xem this smashing magazine article cho một giới thiệu thân thiện với flexbox (nó khá thời gian gần đây bằng văn bản)
Nguồn
2013-08-24 14:40:15 Transparent
http://learnlayout.com/flexbox.html Firefox thực sự là khá tốt ngay bây giờ. Thậm chí không có tiền tố. – vsync
Đơn giản chỉ cần đặt, đó là một cái gì đó sẽ có lợi trong một vài năm. Giống như nhiều kỹ thuật css tiên tiến, HTML5, v.v., một vài người sẽ chấp nhận chúng với những nhược điểm đau đớn và shims/shivs trong vài năm tới.
Khi trình duyệt hỗ trợ trong tương lai, chúng tôi sẽ có một bữa tiệc và tất cả sự ghét trên các trình duyệt 'cũ' không hỗ trợ chúng :).
Nguồn
2013-08-24 13:35:03 yochannah
nhưng tôi có thể làm tất cả mọi thứ bạn có thể nghĩ đến với CSS hiện tại, tôi không thể thấy cách thay đổi flexbox bất cứ điều gì – vsync
@ vsync: Bạn có thể nhận được hầu hết các kết quả mà không có flexbox, nhưng trong một số trường hợp chỉ khi bạn điều chỉnh DOM của bạn. –
@ DanielA.R.Werner. vâng tôi đã viết rằng những năm trước đây khi flexbox là xa ổn định và "đóng cửa". kể từ đó tôi đã sử dụng nó rộng rãi – vsync
Mô hình Flexbox là mạnh hơn bảng hiển thị. Flexbox hỗ trợ bố cục cho các ngôn ngữ từ phải sang trái chẳng hạn. Và có thực sự, flexbox là một chút phức tạp và đó là một rào cản nhập cảnh. Float và clearfix bố trí là một (thông minh) hack, bằng cách nào đó trong cùng một cách bố trí bảng là một hack, flexbox có nghĩa là để bố trí.
Hỗ trợ trình duyệt sẽ tốt hơn gần đây, một số cho biết chúng tôi nên use it now.Tuy nhiên, Bootstrap 3 không sử dụng flexbox, nhưng tôi có thể tưởng tượng rằng phiên bản tiếp theo sẽ.
Nguồn
2013-10-20 14:04:28
đó là một "hack" nếu bạn thấy nó theo cách đó, tôi không thấy 'display: table' như là một hack ở tất cả, nhưng như một cách để tổ chức thông tin trên trang. và phao nổi có thể phức tạp như bất cứ điều gì khác, phụ thuộc vào việc thực hiện. Và cá nhân, tôi không Bootstrap này đã được thực hiện bởi một người rất tài năng, chỉ vì Keanu Reeves nổi tiếng không làm cho anh ta một diễn viên tốt. Hãy suy nghĩ về điều đó .. – vsync
xin lỗi, với bố trí bảng tôi đã đề cập đến kỹ thuật bố trí trường học cũ này bằng cách sử dụng thực tế '
bàn cũng tốt cho các bảng, không dành cho bố cục :) – vsync
Các vấn đề liên quan