This document provides a quick rundown of the differences between the existing Flexbox Draft http://dev.w3.org/csswg/css3-flexbox/ and the proposed new Flexbox draft http://dev.w3.org/csswg/css3-flexbox/Overview.new.src.html.

New Prefix

All flexbox properties now use the prefix 'flex-', rather than 'box-'. The term 'box' already has a specific meaning in CSS, and we felt that this made the properties somewhat unclear. Related: when talking about flexboxes, the draft refers to them as "flexboxes", not "boxes", and the children of the flexbox as "flexbox children".

Determining the Direction

The old draft used a combination of two properties, box-orient and box-direction, to indicate which direction flexbox children were flowed into. We don't believe it's useful to specify the axis and the direction separately; there is basically no situation in which you'd like to change the orientation but let the direction cascade from another rule. As such, the two properties have been merged into a single property, flex-direction, with 8 values to cover every combination of values that the previous properties had.

Alignment in the transverse direction

In the old flexbox draft, box-align had four values which indicated that the flexbox child should shrink to the size of its content in the transverse direction, and then indicated where the additional free space should be placed outside the box. An additional value, stretch, instead made the flexbox child fill the flexbox in the transverse direction, and placed the additional free space underneath the content of the flexbox child.

The new flexbox draft subsumes the former functionality under a single keyword shrink and auto margins. The other values all make the flexbox child grow to the size of the flexbox, and indicate where the free space should be placed within the flexbox child, in a similar way to how they operated in the old draft.

This is almost a strict increase in power. The old flexbox draft value of baseline can no longer be properly represented in the new flexbox draft. We feel that the functionality offered by it was insufficiently useful; it can be duplicated in most cases by using the new baseline value (the difference is that the old one shrank the flexbox child, the new one stretches it).

Alignment in the axis direction

The old flexbox draft used a single property box-flex to provide flexibility in the axis direction. It determined how much boxes would grow when there was free space available, and how much boxes would shrink when there was an overflow situation.

It was found that in many cases an author wants to provide different flexibility numbers when the box can grow versus when it must shrink. For example, a box that should stay larger than its siblings may have a large flex value when growing, but a small flex value when shrinking, to maintain this relationship. As such, the new flexbox draft defines two new properties flex-grow and flex-shrink, along with a shorthand flex for setting both at the same time. They work identically to the old box-flex property, except they only control the growability or shrinkability of the box, respectively.

As well, auto margins now interact in the flex algorithm. An auto margin is treated like a length with a preferred width of 0 and a flexibility of 1. Margins of flexbox children do not collapse.

The old flexbox draft defined a property box-pack which distributed any free space left over after the main flex algorithm had finished. The new flexbox draft's flex-pack property is identical, with the caveat that flexbox child margins interact in the main flex algorithm and so will take free space before flex-pack has a chance to operate.

The box-flex-group property, which affected which flexbox children got first dibs on free space, has been removed with no replacement. When necessary, this functionality can be emulated by using flex values a few orders of magnitude apart; for example, having one box with flex-grow: 1000 and another with flex-grow: 1 ensures that essentially all the free space goes to the first box. If this is insufficient (in some cases the second box may still pick up a pixel or two of space), a value of 1000000 or similar may be used instead.

Flexbox child reordering

The box-ordinal-group property from the old draft has simply been renamed to flex-order. It is otherwise identical.

Multiple Lines

The multiple line support has been marked as at-risk in the new draft, as it appears to require a more extensive treatment than is given to it in this draft. We believe it could be useful to focus on single-line flexboxes now for maturity, then address multi-line flexboxes more extensively at a later time.

That said, the box-lines property in the old draft has been changed to more closely reflect the similar behavior in other modules. A pair of properties, flex-break-before and flex-break-after, can produce explicit line breaks before/after a flexbox child, or prevent linebreaks from ever occuring. flex-wrap controls whether implicit linebreaks will be created (assuming they're allowed by the flex-break-* properties) when the preferred widths/heights of flexbox children are greater than the width/height of the flexbox.