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

[css3-flexbox] requst for new features

From: һ˿ <yiorsi@gmail.com>
Date: Mon, 1 Apr 2013 15:48:45 +0800
Message-Id: <B7E54CC5-46B4-4B3D-AEBA-CF962B9C92C7@gmail.com>
To: "www-style@w3.org" <www-style@w3.org>, "kanghaol@oupeng.com" <kanghaol@oupeng.com>
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:


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


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:


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.


[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
[7] http://jsbin.com/ubejuv/3
[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


Received on Tuesday, 2 April 2013 07:41:55 UTC

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