Làm thế nào để ngăn chặn nội dung thay đổi kích thước một mục flex?

Question

Tôi đang sử dụng CSS flexbox để xây dựng lưới có khả năng mở rộng, đáp ứng. Khi áp dụng biểu đồ Google cho một trong các mục flexbox, mục này thay đổi kích thước bao giờ hết. Đủ để ném lưới ra khỏi căn chỉnh. Tôi tập hợp các hình ảnh sau đây để giúp minh họa vấn đề.

Flexbox lưới trước khi áp dụng biểu đồ Google để mục 6:

Flexbox lưới sau khi áp dụng biểu đồ Google để mục 6:

Các tải lưới Flexbox nhanh hơn so với Google biểu đồ, do đó, lưới ban đầu tải chính xác. Tuy nhiên khi biểu đồ tải, mục 6 mở rộng một chút, khiến hình ảnh 2 ở trên.

Giữa cột chứa flex và mục 6 div được thiết lập trong css như sau:

#middlecolumn { 
    width: 75%; 
    height: 100%; 
    display: flex; 
    flex-flow: column; 
    margin: 0.25%; 
} 

#item6_div { 
    flex: 3; 
    margin-top: 0.8vh; 
} 

Lưu ý rằng mục 5 và 7 được thiết lập cùng một cách trong css, với flex giá trị của 1. I E. mục 6 gấp 3 lần chiều cao của các mục 5 và 7. Như vậy, khi mục 6 thay đổi kích thước, tỷ lệ 3: 1 được duy trì.

Có điều gì tôi thiếu trong css để ngăn không cho biểu đồ Google thay đổi kích thước mục chứa flexbox của nó không?

Answer 1

Khi bạn nói với một mục flex để flex: 3 (khoản 6) hoặc flex: 1 (mục 5 & 7), dưới đây là cách mà tài sản viết tắt bị phá vỡ:

flex: ? = <flex-grow>, <flex-shrink>, <flex-basis> 

flex: 3 = flex-grow: 3, flex-shrink: 1, flex-basis: 0 

flex: 1 = flex-grow: 1, flex-shrink: 1, flex-basis: 0 

Trong cả hai trường hợp, yếu tố flex-shrink là 1, có nghĩa là mặt hàng flex được phép co lại theo tỷ lệ.

Để ngăn chặn các mục flex từ thu hẹp lại, mà có thể gây ra lệch chi tiết, tôi sẽ thay đổi flex-shrink để 0.

Thay vì flex: 3 và flex: 1 thử:

flex: 3 0 0; 
flex: 1 0 0; 

Xem thêm chi tiết trong flexbox spec: 7.1.1. Basic Values of flex

---

Nhưng bạn có thể có một vấn đề khác. Bạn đã viết:

Lưu ý rằng các mục 5 và 7 được thiết lập giống như trong css, với giá trị flex là 1. I E. mục 6 gấp 3 lần chiều cao của các mục 5 và 7. Như vậy, khi mục 6 thay đổi kích thước, tỷ lệ 3: 1 được duy trì.

Đây không phải là cách hoạt động của thuộc tính flex-grow.

Bằng cách áp dụng flex-grow: 3 cho mặt hàng linh hoạt, bạn đang yêu cầu tiêu thụ không gian nhiều hơn gấp 3 lần so với các mặt hàng có độ cong flex-grow: 1. Điều này không nhất thiết có nghĩa là Mục 6 sẽ gấp ba lần kích thước của Mục 5 và 7.

Tìm hiểu thêm về cách làm việc ở đây flex-grow: flex-grow not sizing flex items as expected

Là một phương pháp thay thế kích thước, bạn có thể muốn sử dụng flex-basis tài sản. Hãy thử flex: 0 0 60% trên Mục 6 và flex: 0 0 20% trên Mục 5 và 7.