Blok elemanları sadece esnek öğeler içinde mi?

Question

Görünüşe göre, bir esnek madde kabının içinde yalnızca blok elemanlar (satır içi, satır içi satır, hiçbir şey yapmaz) olabilir? Bu tamamen garip yapmazsam, garip ve yararlı görünmüyor? Sen FlexBox çalışması için önizleme bölmesi yüksekliği arttırmak gerekebilir 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; 
} 

: Burada

kalemdir.

Açıklık için düzenlenmiş: Flex öğelerin kendisinden değil, esnek öğenin İÇERİĞİ öğelerinden bahsetmiyorum. Yukarıdaki kodonda, h2 ve p kenarlıklarını göreceksiniz, bunlar float bildirgesine sahipler, ancak yüzüyorlar.

Answer 1

display: flex'u section ürününün yanı sıra div'a da ayarladınız.

section bir kapsayıcı olarak davranırsa, display: flex'u section'a verin ve div'u esnek öğeler olarak bırakın. Sonra p s ve h1 s yüzer.

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

esnek dispaly içindeki satır içi elemanlarını displaing için

.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

Esnek öğeler her zaman blok olarak işlenir; çünkü esnek düzen yalnızca blok benzeri bir düzende anlamlıdır. bölümlerde 3 kaplı ve spec 4 olan esnek öğeleri ve blok düzeyinde kutuları arasında bazı farklılıklar bir esnek ürün dış yüzer bu tersine esnek düzenini bozmak (ve çünkü yine ya yüzer, ne can cant olmak vardır esnek bir düzen içine girme).

Sen öğeleri esnetmeye (ve display: none ile onları tamamen gizlemek) için display farklı değerlerini uygulayabilirsiniz, ancak bu sadece çocukların esnek öğelerin değil ürün için çeşitli biçimlendirme bağlamlar kurma etkisi olmaz kendilerini.

Bu, gösterdiğiniz gibi, display: flex içerir; o zaman, esnek nesnelerin kendi çocukları için esnek kaplar haline gelmesi, bu çocukların yuvalanmış esnek biçimlendirme bağlamlarında öğeleri esnek hale getirmesidir. Bundan dolayı, bu çocukların yüzmesi işe yaramaz.

esnek bir düzen kurmak için, sadece değil, esnek konteyner üzerindeki çocuklar display: flex ayarlamanız gerektiğini unutmayın. display: none otomatik esnek öğeleri yapılacaktır verilmeyen esnek kabın Bütün çocuklar.

Answer 3

, işte o yanı şamandırayı desteklemek görünmüyor ancak display: inline-table kullanmak Anter çözümdür ancak sararak bu workarwond edebilirsiniz anter div falan

onay ile aşağıdaki jsfiddle 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; 
}