So after the great and useful Flex workshop that @fantasai ran, several crazy suggestions were asked. Here is a list of things that I mentioned that would be useful.
@tabatkins Fantasai already mentioned how hard some of these are to implement, however I still think they are worth considering.
Collapse of outer margins
Flex containers don’t currently have the ability to collapse the outer margins of its elements which get taken from the items within.
Having the outer regions of the flex container to collapse margin to 0 would be my only curreny use case.
<h1>Big ol heading</h1>
<ul>
<li>Wow
<li>So
<li>Much
<li>Fun!
</ul>
With CSS:
ul {
display: flex;
}
li {
flex: auto;
min-width: 5rem;
margin: 2rem;
}
h1 {
color: blue;
}
Having the control to set how the li aligns it’s margin to the h1 without having to know document structure would be useful here.
So setting minus margin works here: http://codepen.io/anon/pen/pJLJeo
However it then makes an assumption of what the contents of the flex container is.
So perhaps finding a better name for this:
ul {
display: flex;
outer-item-margin: 0;
}
Min and Max margins
Flex uses auto margins for laying out spacing between elements, however it doesn’t give fine grain controls for collapsing of margins.
.thing {
margin: auto;
min-margin: 2rem;
max-margin: 20rem;
}
The element will use auto margins unless they are calculated smaller than 2rem or larger than 20rem.
The use case here is something like:
<my-row>
<my-product>
<h1>Product name</h1>
<p>Product desc</p>
<button>Buy me</button>
</my-product>
...
The style could be something like:
my-product {
display: flex;
flex-flow: column;
}
my-product button {
margin-top: auto;
margin-top-max: 5rem;
}
So the products would be within a row which lined up vertically, however when a certain products description isn’t even close to matching the others then the button would clamp to 5rem and no further down the product element.
Selectors for a lines flex items
Having fine grained selectors for row and items within them isn’t currently possible.
Layouts where the outer edge elements of flex need a certain layout needs the ability to be selected.
.thing {
display: flex;
}
.thing .item {
flex: auto;
margin-bottom: 20rem;
}
.thing:line-start {
border-left: 1px solid #333;
}
.thing:line-end {
border-right: 1px solid #333;
}
.thing:first-line {
border-top: 1px solid #333;
}
.thing:last-line {
border-bottom: 1px solid #333;
}
@Shane mentioned the desire to select each line to give an odd and even row style.
line-start selector
Gives the author the ability to style items which are at the first item of every line on the main axis.
Alternative-name: main-start
last-line selector
Gives the author the ability to style items which are at the far most edge of the cross axis.
Alternative-name: cross-end
Snap fit
The last line of a flex sometimes looks messy with it not matching any other column.
.thing:last-line {
max-width: 300rem;
snap-fit: 1;
}
Setting a max-width usually makes the layout look worse, however in this case we give it a bounding to match from towards 1 flexible unit. This would try to snap to the items in the previous line, where min and max width would be used to aid the snapping.
If there are two or more items in the last-line the behaviour is the same. Positive space would fill the remaining space.
