Thay col với d-flex trong Bootstrap 4

Question

Kể từ khi Bootstrap mới 4 được chuyển từ sử dụng 'nổi' yếu tố để thì càng tốt 'flexbox' phương pháp, chỉ cần tự hỏi là nó ok để xây dựng toàn bộ cấu trúc lưới điện sử dụng .d-flex thay vì cách hiện tại .container .row .col?

Vì cả hai đều được xây dựng cơ bản bằng cách sử dụng flexbox, tôi không thấy bất kỳ điểm yếu nào trong việc thay thế cái này bằng cái khác. Trong thực tế, tôi cảm thấy rằng .d-flex yêu cầu ít tên lớp css và làm cho mọi thứ dễ đọc hơn trong html.

Có nhiều lý do khác khiến tôi thích d-flex hơn cái cũ col:

1. ngang và dọc các yếu tố - d-flex hỗ trợ việc tạo ra các yếu tố cả hai chiều ngang (.flex hàng) và theo chiều dọc (.flex -cột). Col chỉ hỗ trợ theo chiều ngang.

2. Phần tử nội tuyến - Chiều rộng của phần tử sẽ kế thừa từ con và có thể căn chỉnh động bằng d-inline-flex. Trong khi đó lưới col được sửa chữa.

3. Tạm ứng tái đặt hàng - d-flex sử dụng .order-x và col sử dụng .push và .pull. Theo quan điểm của tôi, d-flex trực quan hơn, thứ tự của các phần tử được biểu diễn bằng cách đánh số và mặt khác, số trong .col là số lượng lưới đang được đẩy và kéo ra khỏi trạng thái trước đó. Sẽ rất lộn xộn khi bạn xây dựng một trang web phức tạp hơn ....

Hãy sửa tôi nếu tôi sai.

Answer 1

Bootstrap 4 beta vừa mới xuất hiện và toàn bộ hệ thống lưới đang sử dụng flexbox từ bây giờ trở đi.

Bây giờ bạn có thể đạt được toàn bộ lưới chỉ với flex và nó đã giảm số lượng lớp bạn cần. Ưu điểm chính của Hệ thống Lưới Bootstrap là bạn có các miếng đệm xung quanh các cột và các mép tiêu cực của bạn trên bao bì .row. Bằng cách đó, khi các cột được bọc (ví dụ: trên màn hình nhỏ hơn), chúng sẽ được căn chỉnh chính xác.

Để trả lời câu 3 điểm của bạn:

1. yếu tố theo chiều ngang và dọc

   Chỉ cần sử dụng .row lớp thường xuyên để đạt được một mạng lưới flexbox. Bạn thậm chí có thể thêm .flex-column (even with breakpoints, như .flex-{breakpoint}-column). Biết rằng lớp .row có thuộc tính flex-wrap: wrap.

2. Inline yếu tố

   Chiều rộng cột không nhất thiết phải cố định:

   • bạn có thể sử dụng .col-auto thiết width: auto trên cột của bạn
   • bạn có thể sử dụng the unit-less.col lớp để làm cho cột sử dụng không gian có sẵn
   • bạn có thể căn chỉnh chúng với tất cả các tiện ích flex Bootstrap provides
   • bạn có thể mix column sizes (một số cố định và một số động): ví dụ: .col-md-auto Tiếp theo .col.col-lg-2

3. Tạm ứng tái đặt hàng

   • .col-push/pull-{breakpoint}has been replaced by .order-{breakpoint}.
   • bạn có thể sử dụng margin utilities (ví dụ m-{breakpoint}-auto) để thay thế .col-offset-{breakpoint}