Chỉ chặn các phần tử bên trong mục flex?

Question

Rõ ràng, bạn chỉ có thể có các phần tử khối (inline, inline-block, float không có gì hoạt động) bên trong một container flex item? Thats chỉ lạ và không có vẻ hữu ích, trừ khi tôi đang làm nó hoàn toàn sai?

Đây là bút: http://codepen.io/iaezzy/pen/GggVxe

.fill-height-or-more { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
} 
.fill-height-or-more > div { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

Bạn có thể phải tăng chiều cao preview pane cho flexbox để làm việc.

Chỉnh sửa để rõ ràng: Tôi không nói về các mặt hàng flex, nhưng các yếu tố INSIDE mục flex. Trong bảng mã bên trên, bạn sẽ thấy h2 và p giáp với nhau, chúng có tuyên bố float nhưng không nổi.

Answer 1

Bạn đã đặt display: flex trên cả hai section cũng như div.

Nếu section đóng vai trò như một vùng chứa, bạn cung cấp display: flex cho section và để div làm các mục flex. Sau đó, p s và h1 s sẽ nổi.

Fiddle: http://jsfiddle.net/abhitalks/zb12n2dk/

.fill-height-or-more { 
    display: flex; 
    flex-direction: column; 
    ... 
} 
.fill-height-or-more > div { 
    flex: 1; 
    ... 
} 
.some-area > div p { 
    width: 40%; 
    float: left; 
    ... 
} 

Answer 2

Các mục Flex luôn được hiển thị dưới dạng khối vì bố cục flex chỉ có ý nghĩa trong bố cục giống như khối. Có một vài khác biệt giữa các mặt hàng flex và hộp cấp khối được bao phủ trong các phần 3 và 4 của spec, một là các mặt hàng flex không thể nổi, hoặc một lần nữa vì điều này sẽ phá vỡ bố trí flex (và ngược lại, không thể nổi bên ngoài xâm nhập vào bố cục flex).

Bạn thể áp dụng giá trị khác nhau của display để flex mục (và giấu chúng hoàn toàn với display: none), nhưng điều này sẽ chỉ có tác dụng xây dựng bối cảnh định dạng khác nhau cho các trẻ em các mục flex, không phải là mục chính họ.

Điều này bao gồm display: flex, như bạn đang trình diễn; những gì xảy ra sau đó là các mặt hàng flex trở thành container flex cho con cái riêng của họ, mà làm cho những trẻ em flex các mặt hàng trong bối cảnh định dạng flex lồng nhau của bạn. Bởi vì điều này, nổi những đứa trẻ sẽ không làm việc.

Lưu ý rằng để thiết lập bố cục flex, bạn chỉ cần đặt display: flex trên hộp chứa flex chứ không phải con của nó. Tất cả các trẻ em của một container flex không phải là display: none sẽ tự động được thực hiện các mặt hàng flex.

Answer 3

cho displaing yếu tố inline bên dispaly flex, có bao phấn giải pháp để sử dụng display: inline-table tuy nhiên nó không có vẻ nó hỗ trợ phao cũng nhưng bạn có thể workarwond này bằng cách gói nó với anther div hoặc một cái gì đó

kiểm tra các jsfiddle sau đây https://jsfiddle.net/reda84/eesuxLgu/

.row{ 
    width:100%; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
    flex-wrap: wrap; 
} 
.row > .col { 
    display: flex; 
    box-sizing: border-box; 
    width:50%; 
    float:left; 
    flex-direction: column; 
    border:1px solid #333; 
    min-height:100px; 
    padding:15px 
} 
.tag{ 
    background: #1b8fe7; 
    color:#fff; 
    padding:5px 10px; 
    display: inline-table; 
    margin:0px 5px 5px 0; 
}