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

[css3-flexbox] for 'space-*', should compression happen when space is not enough?

From: Kang-Hao (Kenny) Lu <kennyluck@csail.mit.edu>
Date: Wed, 01 Aug 2012 22:55:29 +0800
Message-ID: <50194361.2050405@csail.mit.edu>
To: WWW Style <www-style@w3.org>
The spec now says (e.g. for 'justify-content: space-between'):

  # ‘space-between’
  #  Flex items are evenly distributed in the line. If the leftover
  # free-space is negative or there is only a single flex item on the
  # line, this value is identical to ‘flex-start’.

. I've been thinking about the case when free-space is negative. In such
cases, should UA do "true" justification in the sense that the the first
flex item is placed flush with main-start and the last flex item is
placed with main-end with the spacing being negative? I can see
arguments for both sides:

== Why "true" justification? ==

The main argument is that this layout is not possible with other means,
or at least it's difficult (it seems that wrapping contents with 'width:
0' flex items with a property for "true" centering would work but I am
not so sure), while "false" justification can be done via auto margin
and 'flex-start'.

The use case for this kind of thing is for tool box layout like[1],
where overlapping is required. Admittedly, this behavior isn't a good
solution for the use case, while negative margin in combination with
'space-around' is, as negative margin allows authors to specify an area
(the outer box) where adjacent flex items are not allowed to collapse
into. However, I am not exactly sure there are no use cases when authors
just don't want to specify such an area (or he/she doesn't feel like
finding a random number for the negative margin).

== Why "false" justification ==

I think for the majority of the situation "false" justification would be
more desirable, for example, when you are dynamically adding new flex
items to a flex container with 'justify-content: space-between' and you
can use 'overflow: auto' to make the flex items always readable.


[1] http://jsfiddle.net/samUb/1/

Received on Wednesday, 1 August 2012 14:56:04 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:02 UTC