[css3-grid] [css3-flexbox] Stretch alignment in flexbox and grid

I saw in the minutes from Paris discussion about margins and flex-item-align.  I didn't see any mention of stretch alignment though which is what I think makes the treatment of margins interesting.  In the grid, stretch alignment mimics the way that stretching a block element's width in the normal flow works[1] (except we drop the paragraph that says it should be dropped).  That applies to both the width and height of grid items when they have grid-column-align or grid-row-align stretch.  If flex-item-align behaves the same way, then I think we have a consistent algorithm for stretching an item's box so that it touches the edges of the space afforded to it by its parent layout.  Note I think the same rules should probably apply to flex-pack: justify as well, since it seems like another form of stretching.

I think the markup below should result in the following rendering (twice - once for grid and again for the flexbox):
*-* *-*     *-*
| | | | *-* |D|
|A| |B| |C| *-*
| | | | *-*
*-* *-*

If it doesn't because we always treat auto margins as zero, then I think that will be a surprise to authors that attempt the case labeled "item-fixed-height-auto-margins" since we decided to stretch the height of the item even when they have explicitly set margin to auto.

<html>
<head>
    <style>
        #grid {
            display: grid;
            height: 100px;
            grid-rows: 1fr;
        }
        #flexbox {
            display: flexbox;
            height: 100px;
        }
        .item-auto-height-zero-margins {
            /* this is the default */
            /* I expect height to be stretched */
            background-color: green;
        }
        .item-auto-height-auto-margins {
            /* height is still auto
            /* I expect height to be stretched */
            background-color: yellow;
            grid-column: 2;
            margin: auto;
        }
        .item-fixed-height-auto-margins {
            /* height is fixed, but margins are auto */
            /* I expect margins to be stretched (both equally) */
            background-color: purple;
            grid-column: 3;
            height: 30px;
            margin: auto;
        }
        .item-fixed-height-zero-margins {
            /* over constrained */
            /* I expect ending margin to be stretched so that the stretch equation is satisfied */
            background-color: red;
            grid-column: 4;
            height: 30px;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="grid">
        <div class="item-auto-height-zero-margins">A</div>
        <div class="item-auto-height-auto-margins">B</div>
        <div class="item-fixed-height-auto-margins">C</div>
        <div class="item-fixed-height-zero-margins">D</div>
    </div>
    <div id="flexbox">
        <div class="item-auto-height-zero-margins">A</div>
        <div class="item-auto-height-auto-margins">B</div>
        <div class="item-fixed-height-auto-margins">C</div>
        <div class="item-fixed-height-zero-margins">D</div>
    </div>
</body>
</html>

[1] http://www.w3.org/TR/css3-box/#blockwidth

Received on Monday, 13 February 2012 19:49:42 UTC