[css3-flexbox] requst for new features

Hello CSS spec editors,


I am a front-end developer from etao.com, as well as a member of the W3C HTML5 Chinese Interest Group. I also participated in the Chinese translation of the CSS Flexible Box Layout Module[1].

It's nice to see css3-flexbox improve a lot recently, such as the change of the default value of 'min-width/height' from 'auto' to '0'. However, whenever I am using multi-line flex layout, I often get frustrated by the lack of features, esp. the ability to control the last line. We know that there is 'text-align-last' in CSS3 for controlling the line alignment of the last line, but flex still does't have this control. There's 'justify-content', but there are problems.

Problem 1: The alignment of the last line in a flex container

For example, we often need to make the following adaptive list, esp. in shopping sites. Designers usually want the spacing in the last line to be the same as the spacing in the previous line:

(Figure[2]) http://img03.taobaocdn.com/tps/i3/T1WJROXrXjXXcMd4cp-636-337.png

We usually achieve this with 'margin-right' and the outer container requires a negative 'margin' to cancel the edge behavior. See this demo[3]. 

If we use flex ('justify-content: space-between') for this (Demo[4]), the last line would look like this:

(Figure[5])http://img04.taobaocdn.com/tps/i4/T1Y6BOXAVhXXXqLucu-641-344.png

Obviously, this is not the layout we want. We want something like a table:

(Figure[6])http://img01.taobaocdn.com/tps/i1/T1PKh3XsJXXXc3B0kj-422-183.png

No matter how much text it has, the start of each item is aligned.

Therefore, I would like see a new property which makes the spacing in the last line the same as in the previous line, no matter how many flex items the last line has. We could consider a new property like this:

  justify-content-last:table-cell;

Similary, 'text-align-last' is suffering from the same problem. See Demo[7]. I'd like to see 'text-align-last' have something like what's described above.

Problem 2: Distribute the remaining space between flex items in a flexible way

Although there's 'justify-content' for controlling the remaining space between flex items, and 'flex-basis' fro controlling the flex basis and width of a flex item. But we don't always want to make the width of a flex item flexible. Sometimes, we want the width to be the content width (or fixed width) and what's flexible is the spacing between flex items.

For example, we want to achieve an effect like this:

(Figure[8]) http://www.w3.org/html/ig/zh/wiki/images/2/29/Flex-spacing-before.png

See demo[9] (achieved with 'margin', pretty cumbersome and inflexible).

But if we do this with flex, this is what it looks like:

(Figure[10]) http://www.w3.org/html/ig/zh/wiki/images/4/47/Flex-spacing-after.png

See demo[11] (achieved with 'flex').

Because the actual width of each flex item is '100px' and the flex container has a total width of '400px', the flex items can just fit into the flex container. If want to display only three flex items then it becomes more difficult. We can only use 'margin' or 'padding'.

Therefore, I'd like to see a property that can be used to control the spacing between flex items so that we can control the number of flex items in a line flexibly. It is important to be able to flex not only flex items but also spacing between flex items.

Spacing between flex items - the 'flex-spacing'[12] property

| Name:                    flex-spacing
| Value:                    <length> | auto
| Initial:                     depends on the processing model
| Appplied to:           depends on the processing model
| Inherited:               no
| Percentage:          relative the reaming space in the flex container
| Media:                   visual
| Computed value:   to be determinted 
| Animatable:           yes

These are all very common scenarios and please take a serious look. The precise name of the property is to be discussed, but I really hope flex can have these features. Thank you very much.

Yisi
2013-3-29
 

[1] http://www.w3.org/html/ig/zh/css-flex-1/
[2] http://img03.taobaocdn.com/tps/i3/T1WJROXrXjXXcMd4cp-636-337.png
[3] http://jsbin.com/ubejuv/2
[4] http://jsbin.com/ubejuv/1
[5] http://img04.taobaocdn.com/tps/i4/T1Y6BOXAVhXXXqLucu-641-344.png
[6]http://img01.taobaocdn.com/tps/i1/T1PKh3XsJXXXc3B0kj-422-183.png
[7] http://jsbin.com/ubejuv/3
[8]http://www.w3.org/html/ig/zh/wiki/images/2/29/Flex-spacing-before.png
[9] http://www.iyunlu.com/demo/flex-spacing-before
[10] http://www.w3.org/html/ig/zh/wiki/images/4/47/Flex-spacing-after.png
[11] http://www.iyunlu.com/demo/flex-spacing-before/
[12] http://www.w3.org/html/ig/zh/wiki/Flex-spacing#flex-spacing

浪迹江湖数余年，马甲无数，有个长处，下面好吃，小弟很棒。从此江湖上便有了一个传言：哥不在江湖，江湖却流进了哥心里。博客：www.iyunlu.com/view