CSS: Overflow-x, display:flex issues

CSS: Overflow-x, display:flex issues

本文关键字：flex issues display Overflow-x CSS      更新时间：2023-09-26

我已经做了两个与我所遇到的问题相关的问题。但在这里我创造了一个更好的例子。请参阅下文。这些盒子被Angular的ng-bind加载。

请看下面的代码笔:http://codepen.io/anon/pen/LRPwZP

同样，我在stackoverflow中包含了相同的代码片段，但请注意，无法调整分辨率大小，因此，该示例可能没有用处。

注意期望的行为是非常重要的:

  1. 每个框有相同的宽度(在实际情况下为700px)
  2. Box #1应该位于左上角。
  3. Box #2只有在有足够空间的情况下才会出现在Box #1的右边。
  4. 如果屏幕上还有空间，3号方框会移到2号方框的右边。
    5. 现在，假设框#3右边没有空间了
  5. 4号盒子，落在1号盒子的底部。
  6. 5号框，直接放到2号框的底部。
  7. 6号方框，直接放到3号方框的底部。
  8. 等等…
  9. box是使用angular的ng-bind加载的，并且是动态的。

我不能使用以下选项:

(1) 

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

原因:无用，当需要超过2列时失败。

(2)我知道AngularJS的砌筑，我不想增加加载时间，我想完成这只使用CSS。

引用

:

  • 没有使用CSS框架。
    • 纯"香草"JS正在使用-偶尔。AngularJS被大量使用。

之前的问题，同样的问题:

  • CSS多个不同高度的浮动左元素排列在2列

    • Flex、AngularJS +砌体、akoenig/angular-deckgrid等

亲切的问候,克里斯,

为什么不使用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>

所以，经过几天的测试砌体，同位素，和一些不同的角度和JQuery模块…它们中的大多数都需要大量的变通方法才能正常工作……在尝试了用户制作的不同的ng指令和模块之后，在angular中制作了一些类似砌筑的东西，而不使用它。我找到了解决方案:AngularMaterial。https://material.angularjs.org/latest/layout/options可能很明显，但有时需要时间来理解您在寻找什么

相关文章：