W3C home > Mailing lists > Public > www-style@w3.org > April 2013

[css-flexbox] when fragmenting a column-reverse flex container, which page gets the first flex item?

From: Daniel Holbert <dholbert@mozilla.com>
Date: Tue, 23 Apr 2013 14:59:57 -0700
Message-ID: <5177045D.3070803@mozilla.com>
To: www-style <www-style@w3.org>
tl;dr: When a UA paginates (fragments) a "column-reverse" flex
container, should the first flex item end up at the bottom of the *last*
page or the bottom of the *first* page?


Consider this HTML markup:
 <div style="display: flex; flex-direction: column-reverse">

So, the on-screen rendering looks like this:
  |   E   |
  |   D   |
  |   C   |
  |   B   |
  |   A   |

QUESTION: If we paginate this content, where should the first flex-item
("A") appear, when printed?

Option 1: first item goes at the bottom of the *last* page:
   Pg1    Pg2    Pg3
  +---+  +---+  +---+
  | E |  | C |  | A |
  | D |  | B |  |   |
  +---+  +---+  +---+

Option 2: first item goes at the bottom of the *first* page:
   Pg1    Pg2    Pg3
  +---+  +---+  +---+
  | B |  | D |  | E |
  | A |  | C |  |   |
  +---+  +---+  +---+

Right now Chrome implements Option 1.  However, I think I prefer Option
2, and I also believe the spec's sample fragmentation algorithm yields
Option 2 (if you read the heading "Single-line column flex container" to
include both column and column-reverse, which is reasonable IMHO given
that there's no sample algorithm at all provided for column-reverse.)

In particular, the spec's sample algorithm for "Single-line column flex
container" says:
  # 2. Lay out as many consecutive flex items... as possible...
  # starting from the first, until there is no more room on the
  # page or a forced break is encountered.

So that pretty clearly indicates that the first flex item should end up
on the first page.

Moreover, Option 2 is very analogous to how multi-line flex containers
partition their items into flex lines. (The first flex item always ends
up on the first flex line, regardless of whether we're column or

Thoughts? Perhaps the spec could be clarified on this point? (If there's
general agreement that Option 2 is reasonable, then maybe we should
change the sample-algorithm header-text "Single-line column flex
container" to explicitly mention "column-reverse", and similar for the
other sample algorithms?)

Received on Tuesday, 23 April 2013 22:00:25 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:28 UTC