W3C home > Mailing lists > Public > www-style@w3.org > October 2012

Re: [css3-flexbox] Abspos flex-item positions

From: Kang-Hao (Kenny) Lu <kanghaol@oupeng.com>
Date: Wed, 17 Oct 2012 08:45:46 +0800
Message-ID: <507DFFBA.4000309@oupeng.com>
To: WWW Style <www-style@w3.org>
CC: Yisi <50167214@qq.com>, Daniel Holbert <dholbert@mozilla.com>
(12/08/01 5:50), Tab Atkins Jr. wrote:
> Per our action item last week, we've defined the static position of
> abspos flex items consistently with how they're handled in block and
> inline flow:
>   http://dev.w3.org/csswg/css3-flexbox/#abspos-items
>   http://lists.w3.org/Archives/Public/www-style/2012Jul/0605.html (minutes)

Sorry for not being able to overcome my slack earlier to review the
text, but I find the current prose a bit misleading... I hope my
comments below are just editorial.

  # In the main axis,
  #
  # 1. If there is a subsequent flex item on the same flex line, the
  #    static position is the outer main-start edge of that flex item.

The phrase "on the same flex line" seems to suggest that a 0x0
placeholder goes into the line breaking algorithm and belongs to a line,
which slightly contradicts the statement "An absolutely-positioned child
element of a flex container does not participate in flex layout beyond
the reordering step.". I think it meant to say

  | a. If there is no preceding flex item or the preceding flex item
  |    and the subsequent flex item are on the same flex line, ...


  # 2. Otherwise, if there is a preceding flex item on the same flex
  #    line, the static position is the outer main-end edge of that
  #    flex item.

At a minimum, assuming the flex container has at lease one flex item,
for an abspos flex-item, if there is no subsequent flex item "on the
same flex line", the preceding flex item must be "on the same flex line"
because an abspos flex-item can't really occupy a line, unlike a real
placeholder. Therefore, "on the same flex line" should be removed from
the premise:

  | b. Otherwise, if there is a preceding flex item, (that item is on
  |    the same flex line and) the static position ...


  # 3. Otherwise, the static position is determined by the value of
  #   ‘justify-content’ on the flex container as if the static
  #    position were represented by a zero-sized flex item.

I suggest s/a/a single/ just so that when there are multiple abspos
flex-items, the sentence doesn't read like the more than one 0x0 are
being laid out. This is what I suggest:

  | c. Otherwise, (there is no flex item in the flex container and) the
  |    static position is determined by the value of ‘justify-
  |    content’ on the flex container as if the static position were
  |    represented by a single zero-sized flex item.


But this order is having a hole in that a flex container having no flex
item would be caught by a.'s "if there is no preceding flex item', so
this is what I suggest overall (moving c. before. a.):

  | 1. If there is no flex item in the flex container, the
  |    static position is determined by the value of ‘justify-
  |    content’ on the flex container as if the static position were
  |    represented by a single zero-sized flex item.
  | 2. Otherwise, if there is no preceding flex item or the preceding
  |    flex item and the subsequent flex item are on the same flex
  |    line, the static position is the outer main-end edge of the
  |    subsequent flex item.
  | 3. Otherwise, the static position is the outer main-end edge of
  |    the preceding flex item.


(For what's worth, Opera Next/Opera Mobile 12.1 fails this with a test
case like

  data:text/html,<!DOCTYPE html><style> div { display: flex; flex-wrap:
wrap; border: red solid; width: 5em;} span { border: blue solid;
min-width: 6em;}</style><div><span>A</span><span style="position:
absolute; border-color: green;">B</span><span>C</span></div>

. I am not claiming it has to do with this prose, but I think it can be
made less ambiguous/misleading.)


  # In the cross axis,
  #
  # 1. If there is a preceding flex item, the static position is the
  #    cross-start edge of the flex-line that item is in.
  # 2. Otherwise, the static position is the cross-start edge of the
  #    first flex line.

2. should be changed to something like

  | 2. Otherwise, the static position is the cross-start edge of the
  |    first flex line or the cross-start edge of the content area if
  |    no flex line exists.

for obvious reasons. I am sure there are other places in the spec that
ignore this situation but I don't yet have the chance to do a throughout
review.


Cheers,
Kenny
-- 
Web Specialist, Oupeng Browser, Beijing
Try Oupeng: http://www.oupeng.com/
Received on Wednesday, 17 October 2012 00:46:16 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:01 GMT