CSS：Overflow-x，顯示：flex問題

-2

我已經完成了2個與我遇到的問題相關的問題。但在這裏我創造了一個更好的例子。請看下面。這些框由Angular ng-bind加載。CSS：Overflow-x，顯示：flex問題

請參見下面的代碼筆： http://codepen.io/anon/pen/LRPwZP

同時，我包括在同一片段注入計算器，但要知道，這是不可能的，以調整分辨率，因此，例如可能不是有用。

注意到所期望的行爲是非常重要的：

每個盒子都有（在真實情況下700像素）的寬度相同
盒＃1希望是在左上角。
僅當有足夠的空間時，方框＃2才能位於方框＃1的右側。
方框＃3如果仍有屏幕有空間，則在方框＃2的右邊。
現在，假設沒有空間在右邊，方框＃3
方框＃4落在方框＃1的底部。
方框＃5直接在方框＃2的底部。
方框＃6直接在方框＃3的底部。
依此類推...
盒子使用角度ng-bind加載，並且是動態的。

我不能使用下列選項：

（1）

:nth-child(odd) { float: left; } 
:nth-child(even) { float: right; }

原因：無用的，當你需要超過2列失敗。

（2）我知道AngularJS Masonry，我不想增加加載時間，我只想用CSS完成這個任務。

爲引用：

沒有CSS框架正在使用。
純「Vainilla」JS被偶爾使用。
AngularJS重度使用。

以前的問題，同樣的問題：

親切的問候，克里斯，

來源

2016-09-01 Chris Russo

另一個更好的雙目標 - http://stackoverflow.com/q/8470070/2930477 – misterManSam

所以，幾天測試砌體，同位素，和幾個不同的角度和JQuery模塊後......他們大多需要大量的解決方法只是正常工作...和在嘗試使用不同的ng-directives和模塊後，用戶可以製作類似磚石的角度，而不使用它。我找到了解決方案：AngularMaterial。 https://material.angularjs.org/latest/layout/options可能很明顯，但需要時間來理解你有時要找的東西。

來源

2016-09-04 23:59:08

爲什麼不使用flex？

ul{ 
 
    background-color: #ffeb00; 
 
    list-style: none; 
 
    padding: 20px; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-content: space-around; 
 
} 
 
li{ 
 
    padding: 35px; 
 
    margin: 5px; 
 
    background-color: #8056ff; 
 
    color: white; 
 
    text-align: center; 
 
    flex-basis: 40px; 
 
}

<ul> 
 
    <li>Box 1</li> 
 
    <li>Box 2</li> 
 
    <li>Box 3</li> 
 
    <li>Box 4</li> 
 
    <li>Box 5</li> 
 
    <li>Box 6</li> 
 
</ul>

來源

2016-09-01 13:43:42 Trix

CSS：Overflow-x，顯示：flex問題

回答

相關問題