- 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.>
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