GoogleCodeExporter
commented
9 years ago From Tab:
There are 3 big differences:
1) The naming, obviously. Everything uses a "flex-" prefix rather
than "box-". This was largely because I liked it better, and it also
helps prevent collisions between the two models. Several of the names
are simply better, too, like 'flex-order' instead of
'box-ordinal-group'.
2) The way things are made flexible. Old flexbox used a combination
of width/height and the 'box-flex' property. New flexbox uses
width/height directly, by adding a 'flex()' function allowing you to
specify a flexible length. A *lot* of feedback showed that the
separation often confused authors, particularly the fact that solely
setting box-flex still made the elements "start flexing" from their
auto width, rather than from 0. This surfaced as a lot of complaints
that flexbox wouldn't make things equal-width.
3) The way that the flexbox's direction is declared. Old flexbox used
a combination of 'box-orient' and 'box-direction', with some
unintuitive behavior. New flexbox uses a single property 'flex-flow'
with better-named values and more intuitive behavior.
As well, the layout model of flexbox is written slightly better such
that it allows for a more efficient implementation. Old flexbox had
O(n^2) behavior in the common case; new flexbox only has it in rare,
artificial cases and otherwise has the same performance as block
layout.
Overall, the differences are not huge, but they add up to
substantially easier-to-use model. In most cases, though, translating
is simply a matter of renaming your properties, and moving the flex
declaration into width/height.
Original comment by ericbide...@html5rocks.com on 10 Jan 2012 at 4:28
- Added labels: Milestone-Q12012
- Removed labels: Milestone-X
Original issue reported on code.google.com by
ericbide...@html5rocks.comon 18 Oct 2011 at 8:25