Skip to content

Commit 5718e94

Browse files
tabatkinstabatkins
committed
[css-flexbox-2] First draft of flex-wrap:balance. Still WIP. #13414 
1 parent 1bffc13 commit 5718e94

1 file changed

Lines changed: 179 additions & 0 deletions

File tree

‎css-flexbox-2/Overview.bs‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<pre class='metadata'>
2+
Title: CSS Flexible Box Layout Module Level 2
3+
Shortname: css-flexbox
4+
Level: 2
5+
Status: ED
6+
Work Status: Exploring
7+
Group: csswg
8+
ED: https://drafts.csswg.org/css-flexbox-2/
9+
Abstract: The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
10+
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
11+
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
12+
Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com, w3cid 49885
13+
</pre>
14+
15+
<h2 id="intro">
16+
Introduction</h2>
17+
18+
<em>This section is not normative.</em>
19+
20+
This module is currently a diff spec over [[CSS-FLEXBOX-1]].
21+
It defines a new flex wrapping mode, ''flex-wrap: balance'',
22+
which attempts to find linebreak locations
23+
which make the size of each flex line
24+
as similar as possible.
25+
26+
<h2 id='flow-order'>
27+
Ordering and Orientation</h2>
28+
29+
...
30+
31+
<h3 id='flex-wrap-property'>
32+
Flex Line Wrapping: the 'flex-wrap' property</h3>
33+
34+
<pre class='propdef'>
35+
Name: flex-wrap
36+
Value: nowrap | [ wrap | wrap-reverse ] || balance
37+
Initial: nowrap
38+
Applies to: <a>flex containers</a>
39+
Inherited: no
40+
Computed value: specified keyword
41+
Animation type: discrete
42+
</pre>
43+
44+
The 'flex-wrap' property controls whether the flex container is <a>single-line</a> or <a>multi-line</a>,
45+
and the direction of the <a>cross-axis</a>,
46+
which determines the direction new lines are stacked in.
47+
48+
<dl dfn-type=value dfn-for=flex-wrap>
49+
<dt><dfn>nowrap</dfn>
50+
<dd>
51+
The flex container is <a>single-line</a>.
52+
53+
<dt><dfn>wrap</dfn>
54+
<dd>
55+
The flex container is <a>multi-line</a>.
56+
57+
<dt><dfn>wrap-reverse</dfn>
58+
<dd>
59+
The flex container is [=multi-line=],
60+
but the lines are stacked "in reverse" (see below).
61+
62+
<dt><dfn>balance</dfn>
63+
<dd>
64+
The flex container is [=multi-line=],
65+
and attempts to "balance" the lengths of the [=flex lines=]
66+
to be as similar as possible.
67+
See [[#flex-balance=]].
68+
69+
''balance'' can be combined with ''wrap'' or ''wrap-reverse''
70+
to dictate which direction the [=flex lines=] are stacked in.
71+
If neither are specified,
72+
it behaves as if ''wrap'' was specified.
73+
</dl>
74+
75+
By default, the [=cross-start=] direction of the [=flex container=]
76+
is either the <a>inline-start</a> or <a>block-start</a> direction
77+
of the [=flex container's=] <a>writing mode</a>
78+
(whichever is in the <a>cross axis</a>)
79+
and the <a>cross-end</a> direction is the opposite direction of <a>cross-start</a>.
80+
If ''wrap-reverse'' is specified,
81+
the <a>cross-start</a> and <a>cross-end</a> directions
82+
are swapped.
83+
84+
Note: Depending on the value of 'align-content',
85+
the ''wrap-reverse'' value of 'flex-wrap' can alter the initial scroll position
86+
on [=flex containers=] that are also [=scroll containers=].
87+
See [[css-align-3#overflow-scroll-position]].
88+
89+
90+
<h2 id='flex-lines'>
91+
Flex Lines</h2>
92+
93+
...
94+
95+
<h3 id='flex-line-count-property'>
96+
Minimum Flex Lines: the 'flex-line-count' property</h3>
97+
98+
<pre class='propdef'>
99+
Name: flex-line-count
100+
Value: <<integer [1, infinity]>>
101+
Initial: 1
102+
Applies to: [=multi-line=] [=flex containers=]
103+
Inherited: no
104+
Computed value: the specified integer, computed
105+
Animation type: as integer
106+
</pre>
107+
108+
By default, a ''balance'' flexbox
109+
will create as many lines as a normal [=multi-line=] flexbox,
110+
then rebalance how the flex items are assigned across that many lines.
111+
In some situations,
112+
an author might want to ensure there are always a certain number of lines,
113+
or might be using a flexbox in a way where there is no limit to the line length
114+
(the standard for a [=column flexbox=])
115+
and so the "default" line number calculation is useless.
116+
The 'flex-line-count' property specifies a minimum number of [=flex lines=]
117+
that the [=flex container=] should create
118+
to balance the items across.
119+
120+
If the [=flex container=] has less [=flex items=] than the 'flex-line-count' value,
121+
it will only create as many lines as there are [=flex items=].
122+
If the [=flex lines=] are limited in length
123+
and the [=flex items=] will fill more than the specified number of lines,
124+
the actual [=flex line=] count can be higher than what is specified.
125+
126+
Unused lines (ones with no [=flex items=] assigned to them)
127+
are discarded and do not affect layout.
128+
<span class=note>This only affects non-''balance'' flexboxes.
129+
A ''balance'' flexbox will always assign at least one [=flex item=] to each line,
130+
and if it has less items than 'flex-line-count',
131+
that's handled specially, above.</span>
132+
133+
In addition to setting a minimum number of lines that are used by ''balance'',
134+
'flex-line-count' changes the [=available space=] in the [=cross axis=] for [=flex items=]:
135+
subtracting the size of N-1 gaps from the normal [=available space=],
136+
then dividing the leftover by N,
137+
where N is the 'flex-line-count' value.
138+
This uses the actual 'flex-line-count' value,
139+
not the number of lines produced
140+
(which can be higher or lower than what is specified).
141+
142+
Note: This [=available space=] adjustment is the only effect 'flex-line-count' has
143+
on non-''balance'' flexboxes.
144+
145+
Percentages continue to resolve as normal,
146+
unaffected by this [=available space=] adjustment.
147+
(To have a [=flex item=] fill the [=cross-axis=] [=available space=],
148+
use ''width/height: stretch''.)
149+
150+
If the [=flex container=] is [=single-line=]
151+
(aka, ''flex-wrap: nowrap''),
152+
this property has no effect.
153+
154+
<h2 id=layout-algorithm>
155+
Flex Layout Algorithm</h2>
156+
157+
...
158+
159+
<div class=issues>
160+
161+
TODO fill in the details of how balancing works.
162+
163+
In short, do flex layout up to the linebreaking part.
164+
Linebreak as normal
165+
(but with the floor-at-0 thing, below)
166+
to discover how many lines are needed;
167+
if 'flex-line-count' is higher
168+
(and there are at least that many flex items),
169+
use that line count instead.
170+
171+
Then do balanced line-breaking,
172+
using a well-known algorithm I forget the name of right this moment.
173+
174+
For the purpose of the balancing algorithm,
175+
hypothetical sizes are floored at 0,
176+
so it can be done efficiently.
177+
(Negative margins can make the hypothetical size negative,
178+
which <em>does</em> affect line-breaking.)
179+
</div>

0 commit comments

Comments
 (0)