[css3-flexbox] Restricting flex to specific increments

Currently, boxes flex pixel-by-pixel, swallowing all of the space that
they can.  Even when working with flexible boxes, however, it can be
desirable to align the boxes at least somewhat.  This currently isn't
possible.  I propose that we add the ability to restrict the ability
to flex to particular increments.  While this does not ensure that the
box edges line up, it will produce a visible sense that the boxes are
aligned against an invisible grid.

To this, end, I propose that the box-flex property be amended to take
an additional value.  This value can be a length unit or a percentage.
 If it is a percentage, it is based on the dimension of the parent box
in the box-axis direction.

The box flexes as normal from its inherent width to the first multiple
of the provided increment value.  After this, the width only increases
if it can increase to the next multiple of the increment value.

For example, take a box which is intrinsically 70px wide and has the
property "box-flex: 1 50px".  If the parent box is anywhere from 70px
to 100px wide, the child flexes as normal to the full width of the
parent.  If the parent is 120px, though, the child box remains at
100px wide.  When the parent box reaches 150px wide, the child box
will finally increase in size, flexing to 150px wide as well.

A live example of roughly how this should operate can be found at
http://www.xanthir.com/etc/flex-increment.html.  I think the behavior
at low widths is incorrect, but the overall desired behavior is
correct.

~TJ

Received on Monday, 27 July 2009 03:47:24 UTC