- From: Ariel Balter <ariel@arielbalter.com>
- Date: Wed, 1 Nov 2017 10:27:42 -0700
- To: www-style@w3.org
Never posted to W3C before. Hopefully this is the right place.
I propose a css attribute 'wrap-order' that would specify the order in
which items are to wrap. This is a typical issue faced in responsive
design (which item is going to drop as the viewport shrinks), and the
wonderful thing about flexbox is that it gives declarative ways to solve
simple, typical problems. Centering is the perfect example.
I wanted to create a page layout with three columns where the left-most
column would wrap down first. This is what I had to do:
html:
```
<div id="parent">
<div id="right"></div>
<div id="center"></div>
<div id="left"></div>
</div>
```
css:
```
#parent {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
```
This seems like a total double negative. I place the divs in the
opposite order I want them to be in. Then I tell flexbox to reverse them.
Here is my proposal:
html:
```
<div id="parent">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
```
css:
```
#parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#left {
wrap-order: 1;
}
#right {
wrap-order: 2;
}
```
________________________
Ariel Balter
ariel@arielbalter.com
ariel.balter@gmail.com
509-713-0087
Received on Thursday, 2 November 2017 03:53:50 UTC