I know that you do not want to use conversions, but it works exactly as described, and actually has better browser support than flexbox (although it’s a less convincing argument for regular browser updates than usual).
Regardless:
What are we doing here:
.flex-c { transform: rotate(90deg) scaleY(-1); transform-origin: left top; }
Direction Setting . We twist it to move up, moving the left side of the container up, a quarter of a turn clockwise.
Flip the entire binding - We flip the container along the Y axis so that the orientation is correct (in this case, it looks like ltr )
.flex-c:after { content: ''; display: table; clear: both; }
Fixing Fleet Cleaning Material - Good Resource Here
.flex-i { transform: rotate(90deg) scaleY(-1); height: 100px; width: 100px; background-color: gray; margin: 0 10px 10px 0; float: left; }
Return flipping and twisting for individual items . We want them to display correctly, so we unwind them with the transform rule to lead the .flex-i rule.
So, let's see what happens with the final result:
- The large item is in the upper left corner.
- Items are displayed in columns.
- Columns are filled from top to bottom.
- Growth is infinitely expandable.
Some disadvantages:
- Your vertices are upside down for the layout on this container. You can mitigate this a bit by storing it in a third wrapper container if you don't mind the extra markup (I personally do this, but each one).
- This will fail to run in older browsers - but so is your flexbox solution, so it seems to be a wash.
Hope this helps!
Edit:
Thus, a rather obvious question was raised in the comments: “What if we want more than one large element in this layout?”
Quite reasonable, and the solution presented is going to leave some pretty ugly spaces provided. Unfortunately, if you need clean content for them, you will need to become more creative and use either the JavaScript layout system (boo, slow, nasty, hard-to-maintain), or do something that has several other layouts should have done it before: tuckpointing
We are going to fix our empty places with fictitious elements. These can be pre-selected images, tiles, anything that adds a splash of talent instead of the actual content, without being distracted from the content.
Here's how we do it:
Fiddle
Refresh .flex-c container to hide its overflow
.flex-c { transform: rotate(90deg) scaleY(-1); transform-origin: left top; overflow: hidden; }
Add a easily masked pseudo-pad element
.flex-i:not(.big):after { content: ''; height: 100px; width: 100px; left: 110px; top: 0; position: absolute; background-color: pink; }
ALTERNATIVELY: you can do it this way so that there is less CSS3 fantasy, but has better support
.flex-i:after { content: ''; height: 100px; width: 100px; left: 110px; top: 0; position: absolute; background-color: pink; } .flex-i.big:after { display: none; }
What this does in terms of violin creates a small pink box that pops up on the right side of each of these content elements. If there is already a box there, it closes. If it is absent, we show a dummy box. Super simple.