W3C home > Mailing lists > Public > www-style@w3.org > February 2012

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

From: Phil Cupp <pcupp@microsoft.com>
Date: Mon, 13 Feb 2012 19:49:02 +0000
To: "www-style@w3.org" <www-style@w3.org>, "Tab Atkins Jr. (jackalmage@gmail.com)" <jackalmage@gmail.com>, Alex Mogilevsky <alexmog@microsoft.com>, "fantasai (fantasai.lists@inkedblade.net)" <fantasai.lists@inkedblade.net>
Message-ID: <58A081B0F3FA704EAB1082E64639BB010A413059@TK5EX14MBXC284.redmond.corp.microsoft.com>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:50 GMT