[flex-units] unit abbreviations and the flex()

Referring to http://www.xanthir.com/:wih document.

I don't think that 'fl' is particularly good name for flex units.
One of the reasons is that character 'l' is very close 
to either 'I' or '1' in most of fonts in use for development.

I think that something like 1fx is better.

But I would like community to consider '*' (star) as a flex unit 
designator.

1) By its nature flexes are at the same "level of distinction"
as percents (that use '%'). So it is expectable to see flexes 
as a distinct entity too (e.g. from length units). 

2) Our practice shows that in most of cases we use '1*' flex value.
E.g. to align block to bottom: margin-top:1* .
'*' as a distinct token (from a name)  allows to reduce '1*' to just '*' 
instead of '1*'. So { width:*; } means "all available space".

3) Almost all web developers are already familiar with flex units 
expressed as '*'.  
For example this is already well known construct:  
<FRAMESET cols="1*,250,3*">
   ...the rest of the definition...
</FRAMESET>
( http://www.w3.org/TR/REC-html40/present/frames.html#h-16.2.1.1 )
Note that <frmaeset> also allows '1*' to be reduced to just '*'.

Flex() 'function':

If we really need to support additive flex model then I propose 
to introduce following "flex" function that can exist in two forms:

a) additive flex definition.

flex( preferred-length, flex-value [, min-length [, max-length ]] )
where:
  - 'preferred-length' is either length unit or percents;
  - 'flex-value' is a flex unit value - portion of free space
    to be added to the 'preferred-length' to get final value.
  - 'min/max-length' are either length unit or percents - 
    min/max constraints.

b) absolute flex with constraints definition:

flex( flex-value [, min-length [, max-length ]] )

this function can be used in properties that have 
no natural constraints. For example: 

padding-right: flex(2*,10em,50%);

that means: padding-right has flex strength of 2 and
cannot be less than 10em and greater than 50%.

The flex() function can contain calc() expressions inside
but calc() cannot contain neither flex units nor the flex().

All this I think makes flex units feature complete as a system.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Thursday, 27 May 2010 03:07:00 UTC