柔性的項目裏面inline-block的原因總結

我有一個柔性容器有兩個彎曲的物品：柔性的項目裏面inline-block的原因總結

<div class="container"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>

的項目浮動，直到該容器的可用空間，如果小於100像素

.container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    outline: 1px solid black; 
} 

.left { 
    min-width: 40px; 
    flex-grow: 1; 
} 

.right { 
    min-width: 60px; 
    flex-grow: 1; 
}

現在，我的一些元素添加到左邊的項目與顯示：inline-block的：

<div class="floater"></div> 
<div class="floater"></div> 
<div class="floater"></div> 
<div class="floater"></div> 

.floater { 
    width: 15px; 
    height: 10px; 
    display: inline-block; 
}

但現在，浮動元素導致Flex項目包裝。

編輯：我儘量做到：

.container寬度< 100像素=>.right進入下.left
.container寬度> = 100像素=>.right和.left並排
內容端.left不影響左側的寬度

所以，我想.left和.right包裝在小.containers（即如果窗口/瀏覽器很小）。

我創建了一個fiddle，並帶有一個100px的容器來演示這個問題。

謝謝。

來源

2016-03-02 Peter Clause

其實我並沒有理解預期的輸出。即使寬度增加父母元素，你想左右並排嗎？ – ketan

我希望浮動項目在影響彈性項目之前進行包裝。對於小提琴來說，這意味着flex項目保持一行40px和60px，並且內部浮動項目較早包裝。 –

類似。 https://jsfiddle.net/vf9utps1/1/？ – ketan

使用媒體查詢。

@media (max-width: 100px) { 
    .container { 
     flex-direction: column; 
    } 
}

上述規則告訴柔性容器從flex-direction: row（默認設置）切換到一個垂直取向時.container寬度爲100像素或更小。

Revised Demo（我在演示中使用了max-width: 500px來進行說明）。

根據您的總體目標，柔性容器上的flex-wrap: wrap和width: 100px規則可能不是必需的。

來源

2016-03-02 14:41:52

啊，謝謝！我應該想到媒體查詢。 –

刪除flex-wrap: wrap;從.container將根據您的預期。

.container { 
    display: flex; 
    justify-content: space-between; 
    width: 100px; 
    outline: 1px solid black; 
}

Fiddle Link

來源

2016-03-02 09:18:40 ketan

但我希望他們包裝，如果容器寬度小於100px。在我的項目中，容器寬度取決於瀏覽器窗口的寬度。 –

柔性的項目裏面inline-block的原因總結

回答

相關問題