CSS：縮放浮動div寬度100％，直到2個浮動div的最小寬度可以適合寬度

Question

我有一些CSS的麻煩，因爲我不經常使用它。問題如下：我有多個相同大小的浮動對象。爲了保持設計的響應，智能手機可能會垂直顯示這些浮動對象。但是，在更大的屏幕上，浮動對象可能會彼此相鄰顯示。

爲了最大限度地提高智能手機的可見度，浮動對象應該佔據全部寬度（100％）。我添加了最小寬度和最大寬度。最大寬度是最小寬度的2倍。我們首先讓浮動對象垂直對齊。當水平屏幕尺寸增加時，對象的寬度將填充屏幕，但一旦對象達到最大寬度，它應該以最小寬度顯示其中另一個浮動對象的另一個，等等。有關如何完全做到這一點的任何想法？

非常感謝！

Answer 1

由於沒有代碼的使用，這裏使用Flex和最小寬度一個簡單的例子：

與min-width:300px 3個孩子，在這裏我們有一個破發點，在900px，然後在600px的，那麼身體就會顯示滾動條寬度小於300px。 媒體查詢在這裏是不必要的。

body /* or whatever container you use */{ 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 
div { 
 
    flex:1; 
 
    min-width:300px;/* first break point at 300px x number of divs */ 
 
    background:turquoise; 
 
} 
 
div + div { 
 
    background:tomato; 
 
} 
 
div:last-of-type { 
 
    background:gold; 
 
}

<div>one</div> 
 
<div>two</div> 
 
<div>three</div>

codepen to play with