CSS: Overflow-x, display:flex issues

Question

I have done already 2 questions related with the issue I'm having. But here I have created a better example. Please see below. The boxes are being loaded by Angular ng-bind.

Please see the following code pen: http://codepen.io/anon/pen/LRPwZP

As well, I'm including the same snippet into stackoverflow, but be aware that it's not possible to resize the resolution, therefore, the example might not be useful.

It's very important to notice the desired behaviour:

Every box has the same width (of 700px in the real case)
Box #1 is desired to be at the top left.
Box #2 is desired to be at the right of the box #1 only if there's enough space.
Box #3 if still screen has space, goes at the right of box #2.
Now, assuming there's no longer space at the right, of box #3
Box #4, falls at the bottom of box #1.
Box #5, goes directly at the bottom of the box #2.
Box #6, goes directly at the bottom of the box #3.
so on...
Boxes are loaded using angular ng-bind, and are dynamic.

I can't use the following options:

(1)

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

Reason: useless and fails when you need more than 2 columns.

(2) I'm aware of AngularJS Masonry, I don't want to increase the loading time, and I want to accomplish this using only CSS.

For references:

No CSS frameworks are being use.
Pure "Vainilla" JS is being use - occasionally.
AngularJS is heavy used.

Previous questions, same issue:

Kind regards, Chris,

Another better dupe target - http://stackoverflow.com/q/8470070/2930477 — misterManSam, Sep 05 '16 at 02:12

score 0 · Answer 1 · answered Sep 01 '16 at 13:43

Why not using 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>

score 0 · Accepted Answer · answered Sep 04 '16 at 23:59

So, after a few days testing Masonry, Isotope, and a few different angular and JQuery modules... most of them requiring lots of workarounds just to function properly... and after trying as well different ng-directives and modules made by users to make something like masonry in angular, without using it. I found the solution: AngularMaterial. https://material.angularjs.org/latest/layout/options Might be obvious, but takes time to understand what you're looking for sometimes.

CSS: Overflow-x, display:flex issues

2 Answers2