Trong trường hợp nào là flex-shrink áp dụng cho các thành phần flex và nó hoạt động như thế nào?

Question

Tôi đã chơi với điều này đẹp CSS Flexbox demo page và tôi hiểu hầu hết các khái niệm, tuy nhiên tôi đã không thể nhìn thấy flex-shrink trong công việc. Bất kể cài đặt nào tôi áp dụng ở đó, tôi thấy không có sự khác biệt nào trên trang.

Từ spec:

< 'flex-phát triển'>

longhand 'mọc flex' Thành phần này tập hợp và xác định flex phát triển yếu tố, trong đó xác định có bao nhiêu mục flex sẽ phát triển liên quan đến phần còn lại của các mặt hàng flex trong hộp chứa flex khi phân phối không gian trống tích cực . Khi bị bỏ qua, nó được đặt thành ‘1’.

< 'flex co'>

longhand 'co flex' Thành phần này tập hợp và quy định cụ thể các yếu tố flex co, mà quyết định bao nhiêu mục flex sẽ thu nhỏ tương đối so với phần còn lại của mục flex trong hộp chứa flex khi không gian âm được phân phối. Khi bị bỏ qua, nó được đặt thành ‘1’. Hệ số co ngót flex được nhân với cơ sở flex khi phân phối không gian âm.

Trường hợp nào sẽ áp dụng flex-shrink (tức là khi không gian âm được phân phối)? Tôi đã thử trang tùy chỉnh với chiều rộng thiết lập trên phần tử flexbox và (min-) chiều rộng của các phần tử bên trong nó để tạo tràn, nhưng có vẻ như nó không phải là trường hợp được mô tả.

Tất cả đã được hỗ trợ chưa?

Là giải pháp, một tập hợp các tùy chọn trên bản trình diễn được liên kết hoặc bản trình diễn trực tiếp giống như JSFiddle sẽ được đánh giá cao.

Answer 1

Để xem flex-shrink đang hoạt động, bạn cần có thể làm cho vùng chứa nhỏ hơn.

HTML:

<div class="container"> 
    <div class="child one"> 
    Child One 
    </div> 

    <div class="child two"> 
    Child Two 
    </div> 
</div> 

CSS:

div { 
    border: 1px solid; 
} 

.container { 
    display: flex; 
} 

.child.one { 
    flex: 1 1 10em; 
    color: green; 
} 

.child.two { 
    flex: 2 2 10em; 
    color: purple; 
} 

• http://jsfiddle.net/GyXxT/ (không tiền tố - Opera hay Firefox đêm xây dựng)
• http://jsfiddle.net/GyXxT/1/ (webkit)

Trong ví dụ này, cả hai phần tử con lý tưởng muốn được 10em rộng. Nếu phần tử gốc lớn hơn 20 m, con thứ hai sẽ chiếm gấp đôi dung lượng còn lại khi con thứ nhất làm cho nó lớn hơn. Nếu phần tử cha mẹ nhỏ hơn 20 m, thì đứa trẻ thứ 2 sẽ bị cạo hai lần so với phần tử con đầu tiên, làm cho nó trông nhỏ hơn.

Hỗ trợ flexbox hiện tại: Opera (không cố định), Chrome (tiền tố), IE10 (tiền tố, nhưng sử dụng tên/giá trị thuộc tính hơi khác). Firefox hiện đang sử dụng thông số cũ từ năm 2009 (có tiền tố), nhưng thông số kỹ thuật mới được cho là có sẵn trong các bản dựng thử nghiệm ngay bây giờ (không được cố định).