Làm thế nào tôi có thể làm cho một màn hình: flex container mở rộng theo chiều ngang với các nội dung được bao bọc của nó?

Question

Khi sử dụng css flexbox ba trình duyệt chính xuất hiện để hoạt động hoàn toàn khác nhau ở các khu vực nhất định.

Trong trường hợp này tôi đang cố gắng để tạo ra một mạng lưới các hình ảnh:

<div class="container"> 
    <div class="photo"></div> 
    <div class="photo"></div> 
    <div class="photo"></div> 
    <div class="photo"></div> 
    <div class="photo"></div> 
    <div class="photo"></div> 
</div> 


.container { 
    display:inline-flex; 
    flex-flow : column wrap; 
    align-content : flex-start; 
    height : 100%; 
} 

Trong ví dụ này tôi cần một container, nó chứa nhiều div yếu tố thiết lập để chảy từ trên xuống dưới và gói khi chúng đạt đến đáy. Cuối cùng cung cấp cho tôi các cột ảnh.

Tuy nhiên tôi cần các container để mở rộng theo chiều ngang để thích ứng với các yếu tố bao bọc:

Đây là một cách nhanh chóng jsFiddle để chứng minh.

Hành vi này là như sau:

• IE 11 - Đúng, container trải dài theo chiều ngang để quấn mỗi cột của các yếu tố bao bọc
• Firefox - Bình chứa chỉ kết thúc tốt đẹp cột đầu tiên của các yếu tố , với phần còn lại tràn ra ngoài.
• Chrome - Thùng chứa luôn luôn trải dài để lấp đầy chiều rộng của bố mẹ, bất kể thứ gì có thể.

Trong trường hợp này, tôi muốn đạt được hành vi của IE11 trong hai trình duyệt khác. Vì vậy, câu hỏi của tôi là, làm cách nào để tạo vùng chứa flexbox mở rộng theo chiều ngang để khớp với nội dung column wrap của nó.

Xin cảm ơn trước.

Answer 1

Có vẻ như vấn đề này không thể được giải quyết chỉ với CSS, vì vậy tôi đề nghị bạn một giải pháp JQuery

rộng container = vị trí của đứa trẻ cuối cùng - vị trí của container + chiều rộng của con cuối cùng (kể cả lề)

Code:

$(document).ready(function() { 
$('.container').each(function(index) { 
    var lastChild = $(this).children().last(); 
    var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true); 
    $(this).width(newWidth); 
    }) 
}); 

Demo:

http://jsfiddle.net/qzea320L/

Answer 2

Bạn có phân bố bố cục cột với vùng chứa chiều cao cố định.

Khi bạn đặt flex-direction thành cột, bạn xác định trục dọc làm trục chính.

Trong flexbox có nghĩa là nó sẽ lấp đầy chiều cao có sẵn và sau đó tạo cột mới.

Trong số JSBIN Tôi sử dụng javascript để thay đổi chiều cao của vùng chứa và, do đó, bạn sẽ thấy các mục con di chuyển.

PS: bạn không nên dựa vào hành vi của IE vì hỗ trợ flex của họ gần đây.

Answer 3

Các spec nói rằng những gì bạn đang làm nên làm việc, nhưng nó thực hiện không đúng trong mọi trình duyệt lớn ngoài Internet Explorer/Edge, làm cho nhiều dòng inline-flexcolumn bố trí vô dụng hiện nay đối với hầu hết các nhà phát triển tại. Dưới đây là một số Chromium bug report cung cấp ví dụ có hiệu quả giống với của bạn và lưu ý rằng nó hiển thị không chính xác trong Chrome, Safari và Firefox.

Đối số từ spec là phức tạp hơn tôi có thể hiểu, nhưng điểm mấu chốt là Flexible Box Layout Module Level 1 đặc tả định nghĩa nội chéo kích thước của một container flex (có nghĩa là, chiều cao nội tại của một flex-direction: row flex thùng chứa hoặc chiều rộng nội tại của hộp chứa flex-direction: column flex) trong phần Flex Container Intrinsic Cross Size. Ở đó, nó được phát biểu:

Đối với một multi-lineflex container, các min-content/max-contentcross size là tổng của dòng chéo flex kích thước

Đó là, chiều rộng nội tại của một container flex flex-direction: column nên tổng chiều rộng của các cột của nó, như bạn mong đợi. (Có nhiều phức tạp hơn điều này, và tôi không hiểu tất cả, nhưng tôi tin rằng ở trên là rộng rãi đúng.) Tuy nhiên, Chrome, Firefox và Safari tất cả tính toán chiều rộng này không chính xác; đặt width: min-content hoặc width: max-content trên một hộp column wrapflex trong Chrome, bạn có thể thấy rõ rằng chiều rộng được đặt thành chiều rộng của phần tử đơn rộng nhất.

A silly Chrome-specific workaround tồn tại, nhưng có lẽ là tốt nhất nên tránh. Cho đến khi lỗi được sửa, phần này của mô hình Flexbox đơn giản là không hoạt động như thiết kế và không có giải pháp sạch nào.

Answer 4

Thật kỳ lạ khi hầu hết các trình duyệt chưa triển khai đúng các thùng chứa cột, nhưng hỗ trợ cho các chế độ viết là hợp lý.

Vì vậy, bạn có thể sử dụng vùng chứa hàng flex với chế độ viết dọc. Điều này sẽ trao đổi hướng khối với hướng nội tuyến, và do đó các mặt hàng flex sẽ chảy theo chiều dọc. Sau đó, bạn chỉ cần khôi phục chế độ viết ngang bên trong các mục flex.

.container { 
 
    display: inline-flex; 
 
    writing-mode: vertical-lr; 
 
    flex-wrap: wrap; 
 
    align-content: flex-start; 
 
    height: 350px; 
 
    background: blue; 
 
} 
 
.photo { 
 
    writing-mode: horizontal-tb; 
 
    width: 150px; 
 
    height: 100px; 
 
    background: red; 
 
    margin: 2px; 
 
}

<div class="container"> 
 
    <div class="photo">1</div> 
 
    <div class="photo">2</div> 
 
    <div class="photo">3</div> 
 
    <div class="photo">4</div> 
 
    <div class="photo">5</div> 
 
    <div class="photo">6</div> 
 
    <div class="photo">7</div> 
 
    <div class="photo">8</div> 
 
    <div class="photo">9</div> 
 
</div>

Cách tiếp cận này có thể có lỗi riêng của mình trong trường hợp cạnh, đặc biệt là nếu bạn kết hợp các kỹ thuật tiên tiến như bố trí phao nổi và flexboxs lồng nhau. Nhưng đối với hầu hết các trường hợp, nó có vẻ hoạt động tốt.