[css-flexbox] Additive and non-additve flexes

Let me recap flex systems that we are discussing recently.

So far we have two system of flexes:

1. "Additive Flexes" that are used in CSS FlexBox proposal [1] and
2. "Absolute Flexes" used in HTML tables [2] and adapted to CSS[3].

Idea of Additive Flexes:
Flex  here defines portion of free space that needs to be added to some
other fixed value to get final computed value. So if we want to see
flexibility in CSS then each property that may accept flexes should
accept two values:  "base value" (a.k.a. "preferred value", bad name IMO)
and the flex per se.  Such change (two values instead of one) will require
substantial change of CSS thus authors of CSS FlexBox proposal
introduced single box-flex property that defines flex of either
width or height of the element. Other properties that can be flexed
otherwise ( e.g. paddings and margins ) are excluded from flexing
by design in principle.

Examples of Additive Flexes:  I don't know any adequate examples
that use or require exclusively Additive Flexes. I'd appreciate if
someone will point me on such samples. David Baron said that
address bar of Mozilla is using Additive Flexes but exactly
the same layout behavior can be achieved with Absolute Flexes
so this is about all Flexes.

Idea of Absolute Flexes:

Flex, as a value of some CSS property, defines portion that
the property will receive from the available space.

Absolute Flexes can be modeled by tables:

<table border="1" cellpadding="1" cellspacing="1" width="100%">
  <tr>
    <td width="70%" valign="middle">A: 7*</td>
    <td width="30%" valign="middle">B: 3*</td>
  </tr>
</table>

While changing size of such table widths of cells will always
be in proportion 7/3 (or close) in all modern UAs.
(If cell will hit min-width then proportion will change of course)

With flexes this can be expressed as:

<div style="flow:horizontal">
   <div style="width:7*">A: 7*</div>
   <div style="width:3*">B: 3*</div>
</div>

By definition absolute flexes can be used in practically all CSS
properties that accept length units and where flexibility makes
sense. For example: margin, padding, width, height, border-spacing,
left, top, etc. can be made flexible.

Examples of Absolute Flexes: pretty much any site that has
adjustable content section and designed to support wide
range of UAs by using <table> based layouts is using
Absolute Flexes in one form or another.
E.g. http://lenta.ru/ - one of most popular news portal in Russia.

Therefore Additive Flexes are only about flexible widths or heights
but not both on the same element. All other CSS properties are explicitly 
excluded.
Additive Flexes are not compatible with the Template[4] proposal that uses
absolute flexes, at least in its current form.
To be able to overcome "only-width-or-height" limitation FlexBox proposal
introduces additional properties (e.g. box-align) that otherwise (in case
of Absolute Flexes) can be achieved without any additional properties -
by just using flex values on correspondent properties:

#sample
{
   width: 100px; height:100px;
   margin-top: 1*;
   margin-left: 1*;
}
will align element to right/bottom of its container - so
in both directions at the same time.

----------------

Input of Absolute Flex computation algorithm takes
array of triplets ( min/max constraints and the flex value)
and computes final length of each property defined by such
triplet.

Margin collapsing with Absolute Flexes.

Collapsed fixed and flex margins:
  #on-the-left {   margin-right: 10px;  }
  #on-the-right {  margin-left: 1*;  }
are simply defined by single triplet:
{
  min: 10px;
  flex: 1*;
  max: <max-numeric-value>;
}
thus such collapsed margin is flexible but not
less than 10px.

Use of 'border-spacing' CSS attribute:

'border-spacing' in flow: ... containers can accept
either fixed or flex value. border-spacing: 0 1*;
will cause children to be replaced as words in
text-align: justify paragraphs.

[1] FlexBox proposal:
   http://www.w3.org/TR/css3-flexbox/
[2] HTML relative (flex) units:
   http://www.w3.org/TR/REC-html40/types.html#type-multi-length
[3] 'Flow' and flex units:
   http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm
[4] Template proposal:
  http://www.w3.org/TR/2010/WD-css3-layout-20100429/


-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Wednesday, 12 May 2010 05:05:49 UTC