Re: Flexbox Draft, with pictures!

On May 27, 2010, at 10:44 AM, Tab Atkins Jr. wrote:

>> BTW, why not flex units on 'border-radius', as long as that was a child of a flexbox (I might want bigger radii if my padding gets substantially bigger)? Or on border-image-width, since it can be based on border-width anyway (as the UA will therefore need to be able to translate what flex units mean to border-image-width)? Or the offsets of box-shadow, which you might want smaller if the margins or element widths are small?
> 
> border-radius, border-image-width, etc. don't participate in any
> sizing calculations for their box; I don't know what flex units could
> possible mean in that context.  

It means you solve what '1fl' means, based on the properties with flex values that ARE participating in the sizing calculations (width, margin, padding, border-width). Then you can use that value in other properties. So, for instance, if you have 90px of horizontal space before adding flex to anything, and one of the flex-children has 'width:1fl' and another has '2fl', and those are the only uses of flex in the above named properties, then 1fl = 30px. Armed with this number, the UA can apply it to other things that have a horizontal width, such as box-shadow's horizontal offset, border-radius's horizontal radius, background properties with an x or left or right component, etc. So, if I had 'border-radius: 0.5fl 10px', then in the example above I would end up with a used value (computed value?) of  'border-radius: 15px 10px'.

> Percentages do the job for most such
> cases, don't they?  

No.

> If not, then you're talking about a more general
> constraint system

I don't think so. It would only be on elements that were children of flexboxes, where the value of 1fl could be determined by its use in properties that participate in any sizing calculations. If there weren't any, then 1fl would equal zero.

Consider the following:

	border-width:10px; 
	border-radius:10px;

This creates a distinctive look where the border is rounded off at the corners, but the inside of the border is still square. The radius is as wide as the border. That can't be done with percentages. So instead, if you had something like this:

	border-width:10fl; 
	border-radius:10fl;
...and this created a border width equal to '4px 15px', then border-radius would be equal to '15px 4px'.

Or consider this:

	border-left-width:1fl;
	border-image-width: 0 0 0 1;

This already would create a border-image-width on the left that was equal to the 1fl of border width there. So clearly the UA would have to already know what that is and would be able to apply it that way. So why not let me set it that way directly? Maybe I want 0 for the border-width, but want the border-image-width to be equal to the space instead. This could be a fairly common need, given the way 'border-image-offset' can allow you to extend a border image beyond the border and into the margin. So, for instance:

	margin-left:1fl;
	border:0;
	border-image-width: 0 0 0 1fl;
	border-image-outset: 0 0 0 1fl;

or perhaps this:

	margin-left:1fl;
	border:2px;
	border-image-width: 0 0 0 1fl;
	border-image-outset: 0 0 0 calc(1fl - 2px);
	/* still leaves 2px of non-image margin */
	/* image has a vertical line on the right... */
	/* ...that aligns with actual border's position */

Adding this to the proposal would not be that hard, and it does not seem like it would be that hard for implementors either, if they go with the rest of your proposal.

Received on Friday, 28 May 2010 17:13:40 UTC