- From: Alex Mogilevsky via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 16 Feb 2012 14:52:43 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv1389
Modified Files:
Overview.html Overview.src.html
Log Message:
changed flex() function to 'flex' property
a few small editorial changes
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.html,v
retrieving revision 1.155
retrieving revision 1.156
diff -u -d -r1.155 -r1.156
--- Overview.html 16 Feb 2012 12:18:40 -0000 1.155
+++ Overview.html 16 Feb 2012 14:52:41 -0000 1.156
@@ -214,7 +214,7 @@
</ul>
<li><a href="#flexibility"><span class=secno>4. </span> Flexibility: the
- ‘<code class=css>flex()</code>’ notation</a>
+ ‘<code class=property>flex</code>’ property</a>
<li><a href="#alignment"><span class=secno>5. </span> Alignment</a>
<ul class=toc>
@@ -341,10 +341,7 @@
<h3 id=placement><span class=secno>1.1. </span> Module interactions</h3>
<p>This module extends the definition of the ‘<code
- class=property>display</code>’ property. It also defines a new type
- of primitive value, the <a href="#flex-function">flex() notation</a>,
- which is accepted by the ‘<code class=property>width</code>’
- and ‘<code class=property>height</code>’ properties.
+ class=property>display</code>’ property.
<h3 id=values><span class=secno>1.2. </span> Values</h3>
@@ -418,19 +415,17 @@
<p>The contents of a flexbox can be easily and powerfully manipulated with
a handful of properties. Most significantly, <a
href="#flexbox-item"><i>flexbox items</i></a> can "flex" their <a
- href="#main-size"><i>main size</i></a> by using the ‘<code
- class=css>flex()</code>’ function in the ‘<code
- class=property>width</code>’ or ‘<code
- class=property>height</code>’ property. This "flexing" allows the
- items to get bigger or smaller based on the available space in the page.
- If there is leftover space in the flexbox after all of the <a
- href="#flexbox-item"><i>flexbox items</i></a> have finished flexing, the
- items can be aligned, centered, or distributed with the ‘<a
- href="#flex-pack0"><code class=property>flex-pack</code></a>’
- property. <a href="#flexbox-item"><i>Flexbox items</i></a> can also be
- completely rearranged within the flexbox with the ‘<a
- href="#flex-order0"><code class=property>flex-order</code></a>’
- property.
+ href="#main-size"><i>main size</i></a> by using the ‘<a
+ href="#flex"><code class=property>flex</code></a>’ property. This
+ "flexing" allows the items to get bigger or smaller based on the available
+ space in the page. If there is leftover space in the flexbox after all of
+ the <a href="#flexbox-item"><i>flexbox items</i></a> have finished
+ flexing, the items can be aligned, centered, or distributed with the
+ ‘<a href="#flex-pack0"><code
+ class=property>flex-pack</code></a>’ property. <a
+ href="#flexbox-item"><i>Flexbox items</i></a> can also be completely
+ rearranged within the flexbox with the ‘<a href="#flex-order0"><code
+ class=property>flex-order</code></a>’ property.
<p>In the <a href="#cross-axis"><i>cross axis</i></a>, <a
href="#flexbox-item"><i>flexbox items</i></a> can either "flex" to fill
@@ -509,6 +504,13 @@
Additionally, each of the <a href="#flexbox-item"><i>flexbox items</i></a>
establish a new formatting context for its contents.
+ <p class=issue>Although the term "flexbox formatting context" is defined
+ here, it is not used anywhere else. BFC is the commonly used term for what
+ it means here. Perhaps this could say that flexbox formatting context *is*
+ a block formatting context, with different rules for how blocks are
+ formatted but same protection from external floats etc. Then the terms can
+ be used interchangeably, as they will be anyway...
+
<h3 id=flex-items><span class=secno>2.2. </span> Flexbox Items</h3>
<p class=issue>Add a ‘<code
@@ -1001,10 +1003,6 @@
.tabs > .current {
flex-order: -1; /* Lower than the default of 0 */
}</pre>
-
- <p>You can also see a <a href=flex-order-example.html>working example</a>
- in some modern browsers (modern WebKit, Firefox, or any browser that
- supports the Flexbox spec).</p>
</div>
<div class=example>
@@ -1040,7 +1038,7 @@
<pre>
#main { display: flexbox; }
-#main > article { width: flex(1); flex-order: 2; }
+#main > article { flex:1; flex-order: 2; }
#main > nav { width: 200px; flex-order: 1; }
#main > aside { width: 200px; flex-order: 3; }</pre>
@@ -1063,73 +1061,128 @@
intelligent wrapping left as an exercise for the reader.)</small></p>
</div>
- <h2 id=flexibility><span class=secno>4. </span> Flexibility: the
- ‘<code class=css>flex()</code>’ notation</h2>
+ <h2 id=flexibility><span class=secno>4. </span> Flexibility: the ‘<a
+ href="#flex"><code class=property>flex</code></a>’ property</h2>
<p>The defining aspect of flexbox layout is the ability to make the <a
href="#flexbox-item"><i>flexbox items</i></a> "flex", altering their width
or height to fill the available space. This is done by using a ‘<a
- href="#ltflex"><code class=css><flex></code></a>’ value in the
- element's ‘<code class=property>width</code>’ or ‘<code
- class=property>height</code>’ property. A flexbox distributes free
- space to its items proportional to their positive flexibility, or shrinks
- them to prevent overflow proportional to their negative flexibility.
+ href="#flex"><code class=property>flex</code></a>’ property. A
+ flexbox distributes free space to its items proportional to their positive
+ flexibility, or shrinks them to prevent overflow proportional to their
+ negative flexibility.
- <p>The ‘<code class=css>flex()</code>’ notation is used to
- specify the parameters of a <dfn id=flexible-length
+ <table class=propdef>
+ <tbody>
+ <tr>
+ <th>Name:
+
+ <td><dfn id=flex>flex</dfn>
+
+ <tr>
+ <th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
+
+ <td>[[ <pos-flex> <neg-flex>? ]? &&
+ [<preferred-size>]?] | none
+
+ <tr>
+ <th>Initial:
+
+ <td>none
+
+ <tr>
+ <th>Applies to:
+
+ <td>flexbox items
+
+ <tr>
+ <th>Inherited:
+
+ <td>no
+
+ <tr>
+ <th>Computed Value:
+
+ <td>specified value
+
+ <tr>
+ <th>Media:
+
+ <td>visual
+
+ <tr>
+ <th>Animatable:
+
+ <td>yes
+ </table>
+
+ <p class=note><b>Editorial note:</b> in a property, default preferred size
+ of zero is problematic. If flex property is not specified, ‘<code
+ class=property>width</code>’ or ‘<code
+ class=property>height</code>’ must be used, which corresponds to
+ preferred size of ‘<code class=property>auto</code>’. But if
+ flex is specified, we want default preferred size of 0px. The new keyword
+ ‘<a href="#flex-flow-none"><code
+ class=property>none</code></a>’ is the way around it.
+
+ <p>The ‘<a href="#flex"><code class=property>flex</code></a>’
+ property specifiex the parameters of a <dfn id=flexible-length
title="flexible length|flexible lengths|flexible length's">flexible
length</dfn>: the <dfn id=positive-flexibility
title="positive flexibility">positive</dfn> and <dfn
id=negative-flexibility>negative flexibility</dfn>, and the <dfn
- id=preferred-size>preferred size</dfn>. The syntax of the ‘<code
- class=css>flex()</code>’ notation is:
-
- <pre class=prod><dfn
- id=ltflex><flex></dfn> = flex( [ <pos-flex> <neg-flex>? ]? && <preferred-size>? )</pre>
+ id=preferred-size>preferred size</dfn>.
<p><code><pos-flex></code> and <code><neg-flex></code> are
non-negative <code><numbers>s</code>, while
- <code><preferred-size></code> is any value (other than another
- ‘<a href="#ltflex"><code class=css><flex></code></a>’) that
- would be valid in the ‘<code class=property>width</code>’ or
- ‘<code class=property>height</code>’ property in which the
- notation is used. If the <code><preferred-size></code> is ‘<code
+ <code><preferred-size></code> is any value that would be valid in the
+ ‘<code class=property>width</code>’ or ‘<code
+ class=property>height</code>’ property. If the
+ <code><preferred-size></code> is ‘<code
class=css>0</code>’, it <strong>must</strong> be specified with a
unit (like ‘<code class=css>0px</code>’) to avoid ambiguity;
unitless zero will either be interpreted as as one of the flexibilities,
or is a syntax error.
- <p>The <code><pos-flex></code> component sets the length's <a
+ <p>The <code><pos-flex></code> component sets the <a
href="#positive-flexibility"><i>positive flexibility</i></a>; if omitted,
the <a href="#positive-flexibility"><i>positive flexibility</i></a>
defaults to ‘<code class=css>1</code>’. The
- <code><neg-flex></code> component sets the length's <a
+ <code><neg-flex></code> component sets the <a
href="#negative-flexibility"><i>negative flexibility</i></a>; if omitted,
- it defaults to ‘<code class=css>0</code>’. The
- <code><preferred-size></code> component sets the length's <a
+ it defaults to ‘<code class=css>0</code>’.
+
+ <p>The <code><preferred-size></code> component sets the <a
href="#preferred-size"><i>preferred size</i></a>; if omitted, it defaults
- to ‘<code class=css>0px</code>’.
+ to ‘<code class=css>0px</code>’. If set to ‘<code
+ class=property>auto</code>’, the value of ‘<code
+ class=property>width</code>’ or ‘<code
+ class=property>height</code>’ (whichever is in parallel to main
+ axis) is used as preferred size.
- <p>If the ‘<code class=css>flex()</code>’ notation is specified
- on an element that is not a <a href="#flexbox-item"><i>flexbox
- item</i></a>, it computes to the <a href="#preferred-size"><i>preferred
- size</i></a>. If the ‘<code class=css>flex()</code>’ notation
- is used on a <a href="#flexbox-item"><i>flexbox item's</i></a> <a
- href="#cross-size-property"><i>cross size property</i></a>, it computes to
- the <a href="#preferred-size"><i>preferred size</i></a>. Otherwise, it
- computes to itself, and is resolved to a length at used-value time by the
- flexbox layout algorithm.
+ <p>The keyword ‘<a href="#flex-flow-none"><code
+ class=property>none</code></a>’ is equivalent to "0 0 auto".
- <p>A ‘<a href="#ltflex"><code class=css><flex></code></a>’
- value is transitionable, by transitioning the <a
+ <p class=note><b>Reviewers:</b> editors differ in preference for default
+ value of the preferred size. The current choice is default flexibility of
+ "1" and default preferred size of "0px". Earlier spec and two partial
+ implementations use defaults of "0" and "auto". These still have to be
+ defaults when ‘<a href="#flex"><code
+ class=property>flex</code></a>’ property is not specified. <br>
+ The current defaults are chosen by consensus, but there has not been much
+ external input in support of either option. If you can share an opinion,
+ and/or use cases in support of either set of defaults, the editors would
+ appreciate it.
+
+ <p>A ‘<code class=css><flex></code>’ value is
+ transitionable, by transitioning the <a
href="#preferred-size"><i>preferred size</i></a>, <a
href="#positive-flexibility"><i>positive flexibility</i></a>, and <a
href="#negative-flexibility"><i>negative flexibility</i></a>
- independently. ‘<a href="#ltflex"><code
- class=css><flex></code></a>’ can also transition to and from a
- <length>, by treating the length as if it were a flexible length with a
- positive and negative flexibility of zero and a preferred size of the
- length.
+ independently. ‘<code class=css><flex></code>’ can also
+ transition to and from a <length>, by treating the length as if it were
+ a flexible length with a positive and negative flexibility of zero and a
+ preferred size of the length.
<p class=issue>Transitioning to/from a <length> (or to/from a <flex>
with 0 flexibility) doesn't work well if it's the only flexible item in
@@ -1138,11 +1191,11 @@
value that represents a percentage of the free space or something?
<div class=example>
- <p>The ‘<code class=css>flex()</code>’ notation allows
- elements to respond directly to the available space, in ways that are
- difficult or impossible in normal CSS. One common example is a page with
- one segment intended to stay on screen, and another section which may be
- long but which shouldn't scroll the page, like a chat room:</p>
+ <p>Flexibility allows elements to respond directly to the available space,
+ in ways that are difficult or impossible in normal CSS. One common
+ example is a page with one segment intended to stay on screen, and
+ another section which may be long but which shouldn't scroll the page,
+ like a chat room:</p>
<pre>
<!DOCTYPE html>
@@ -1162,12 +1215,18 @@
</body>
<style>
body { display:flexbox; flex-flow: column; }
- #messages { height: flex(1); }
+ #messages { flex:1; }
</style></pre>
<p class=issue>Illustrate this example.</p>
</div>
+ <p class=issue>Currently there are no separate properties for pos-flex,
+ neg-flex or preferred size. If it doesn't change, there needs to be at
+ least CSS OM access to the separate values. Parsing space-separated list
+ is easier than functional notation, but figuring out the used value for
+ preferred size is still far from trivial.
+
<h2 id=alignment><span class=secno>5. </span> Alignment</h2>
<p>After a flexbox's contents have finished their flexing, they can be
@@ -1484,6 +1543,33 @@
<a href="#cross-start"><i>cross-start</i></a> edge of the line.</p>
</dl>
+ <div class=issue>
+ <p>Finalize and define what happens to auto margin.
+
+ <p>Proposals:
+
+ <ul>
+ <li>cross-axis margins (align):
+ <ol>
+ <li>‘<code class=property>auto</code>’ is zero
+
+ <li>auto margins applied before alignment, map directly to alignment
+ values (start/end/center)
+
+ <li>auto margins applied before alignment, do safe align (flex-align
+ does ‘<code class=css>true center</code>’ etc.)
+ </ol>
+
+ <li>main-axis margins (pack):
+ <ol>
+ <li>‘<code class=property>auto</code>’ is zero
+
+ <li>if there is positive extra space after flexing (and before pack),
+ distribute it equally to auto margins.
+ </ol>
+ </ul>
+ </div>
+
<div class=figure> <img height=377 src="images/flex-align.svg" width=508>
<p class=caption>An illustration of the five ‘<a
href="#flex-align0"><code class=property>flex-align</code></a>’
@@ -1566,7 +1652,7 @@
width: 300px;
}
button {
- width: flex(80px 1);
+ flex:80px 1;
}
<style>
@@ -1612,7 +1698,7 @@
width: 300px;
}
button {
- width: flex(80px 1);
+ flex:80px 1;
max-width: 90px;
}</pre>
@@ -2585,6 +2671,22 @@
<td>flexbox | inline-flexbox
<tr>
+ <th><a class=property href="#flex">flex</a>
+
+ <td>[[ <pos-flex> <neg-flex>? ]? &&
+ [<preferred-size>]?] | none
+
+ <td>none
+
+ <td>flexbox items
+
+ <td>no
+
+ <td>specified value
+
+ <td>visual
+
+ <tr>
<th><a class=property href="#flex-align0">flex-align</a>
<td>start | end | center | baseline | stretch
@@ -2774,8 +2876,7 @@
<li>fix min size violations, <a href="#fix-size-constraint-violations"
title="fix min size violations"><strong>7.</strong></a>
- <li><flex>, <a href="#ltflex" title="<flex>"><strong>4.</strong></a>
-
+ <li>flex, <a href="#flex" title=flex><strong>4.</strong></a>
<li>flex-align, <a href="#flex-align0"
title=flex-align><strong>5.2.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.src.html,v
retrieving revision 1.153
retrieving revision 1.154
diff -u -d -r1.153 -r1.154
--- Overview.src.html 16 Feb 2012 12:18:40 -0000 1.153
+++ Overview.src.html 16 Feb 2012 14:52:41 -0000 1.154
@@ -112,7 +112,7 @@
<h3 id="placement">
Module interactions</h3>
- <p>This module extends the definition of the 'display' property. It also defines a new type of primitive value, the <a href="#flex-function">flex() notation</a>, which is accepted by the 'width' and 'height' properties.
+ <p>This module extends the definition of the 'display' property.
<h3 id="values">
Values</h3>
@@ -137,7 +137,7 @@
<p>The axis perpendicular to the <i>main axis</i> is called the <dfn>cross axis</dfn>, and similarly has <dfn>cross-start</dfn> and <dfn>cross-end</dfn> directions and sides defined. The width or height of a <i>flexbox item</i>, whichever is in the <i>cross axis</i>, is the item's <dfn>cross size</dfn>, and similarly the <dfn>cross size property</dfn> is whichever of 'width' or 'height' that is in the <i>cross axis</i>.</p>
- <p>The contents of a flexbox can be easily and powerfully manipulated with a handful of properties. Most significantly, <i>flexbox items</i> can "flex" their <i>main size</i> by using the ''flex()'' function in the 'width' or 'height' property. This "flexing" allows the items to get bigger or smaller based on the available space in the page. If there is leftover space in the flexbox after all of the <i>flexbox items</i> have finished flexing, the items can be aligned, centered, or distributed with the 'flex-pack' property. <i>Flexbox items</i> can also be completely rearranged within the flexbox with the 'flex-order' property.</p>
+ <p>The contents of a flexbox can be easily and powerfully manipulated with a handful of properties. Most significantly, <i>flexbox items</i> can "flex" their <i>main size</i> by using the 'flex' property. This "flexing" allows the items to get bigger or smaller based on the available space in the page. If there is leftover space in the flexbox after all of the <i>flexbox items</i> have finished flexing, the items can be aligned, centered, or distributed with the 'flex-pack' property. <i>Flexbox items</i> can also be completely rearranged within the flexbox with the 'flex-order' property.</p>
<p>In the <i>cross axis</i>, <i>flexbox items</i> can either "flex" to fill the available space or be aligned within the space with the 'flex-align' property. If a flexbox is <i>multi-line</i>, new lines are added in the <i>cross-end</i> direction, and can similarly be aligned, centered, or distributed within the flexbox with the 'flex-line-pack' property.</p>
@@ -171,7 +171,11 @@
<p>If an element's specified value for 'display' is ''inline-flexbox'' and the element is floated or absolutely positioned, the computed value of 'display' must be ''flexbox''.</p>
<p>A flexbox establishes a new <dfn>flexbox formatting context</dfn> for its contents. This is similar to a block formatting context root: floats do not intrude into the flexbox, and the flexbox's margins do not collapse with the margins of its contents. Additionally, each of the <i>flexbox items</i> establish a new formatting context for its contents.</p>
-
+ <p class="issue">Although the term "flexbox formatting context" is defined here,
+ it is not used anywhere else. BFC is the commonly used term for what it means here.
+ Perhaps this could say that flexbox formatting context *is* a block formatting context,
+ with different rules for how blocks are formatted but same protection from external floats etc.
+ Then the terms can be used interchangeably, as they will be anyway...</p>
<h3 id='flex-items'>
Flexbox Items</h3>
@@ -459,7 +463,6 @@
flex-order: -1; /* Lower than the default of 0 */
}</pre>
- <p>You can also see a <a href="flex-order-example.html">working example</a> in some modern browsers (modern WebKit, Firefox, or any browser that supports the Flexbox spec).</p>
</div>
<div class='example'>
@@ -482,7 +485,7 @@
<pre>
#main { display: flexbox; }
-#main > article { width: flex(1); flex-order: 2; }
+#main > article { flex:1; flex-order: 2; }
#main > nav { width: 200px; flex-order: 1; }
#main > aside { width: 200px; flex-order: 3; }</pre>
@@ -503,26 +506,84 @@
<h2 id='flexibility'>
-Flexibility: the ''flex()'' notation</h2>
+Flexibility: the 'flex' property</h2>
- <p>The defining aspect of flexbox layout is the ability to make the <i>flexbox items</i> "flex", altering their width or height to fill the available space. This is done by using a ''<flex>'' value in the element's 'width' or 'height' property. A flexbox distributes free space to its items proportional to their positive flexibility, or shrinks them to prevent overflow proportional to their negative flexibility.</p>
+ <p>The defining aspect of flexbox layout is the ability to make the <i>flexbox items</i> "flex",
+ altering their width or height to fill the available space.
+ This is done by using a 'flex' property.
+ A flexbox distributes free space to its items proportional to their positive flexibility,
+ or shrinks them to prevent overflow proportional to their negative flexibility.</p>
- <p>The ''flex()'' notation is used to specify the parameters of a <dfn title="flexible length|flexible lengths|flexible length's">flexible length</dfn>: the <dfn id="positive-flexibility" title="positive flexibility">positive</dfn> and <dfn>negative flexibility</dfn>, and the <dfn>preferred size</dfn>. The syntax of the ''flex()'' notation is:</p>
+ <table class=propdef>
+ <tr>
+ <th>Name:
+ <td><dfn>flex</dfn>
+ <tr>
+ <th><a href="http://dev.w3.org/csswg/css-module/#values">Value</a>:
+ <td>[[ <pos-flex> <neg-flex>? ]? && [<preferred-size>]?] | none
+ <tr>
+ <th>Initial:
+ <td>none
+ <tr>
+ <th>Applies to:
+ <td>flexbox items
+ <tr>
+ <th>Inherited:
+ <td>no
+ <tr>
+ <th>Computed Value:
+ <td>specified value
+ <tr>
+ <th>Media:
+ <td>visual
+ <tr>
+ <th>Animatable:
+ <td>yes
+ </table>
- <pre class=prod><dfn><flex></dfn> = flex( [ <pos-flex> <neg-flex>? ]? && <preferred-size>? )</pre>
+ <p class="note"><b>Editorial note:</b> in a property, default preferred size of zero is problematic. If flex property is
+ not specified, 'width' or 'height' must be used, which corresponds to preferred size of 'auto'.
+ But if flex is specified, we want default preferred size of 0px.
+ The new keyword 'none' is the way around it.
- <p><code><pos-flex></code> and <code><neg-flex></code> are non-negative <code><numbers>s</code>, while <code><preferred-size></code> is any value (other than another ''<flex>'') that would be valid in the 'width' or 'height' property in which the notation is used. If the <code><preferred-size></code> is ''0'', it <strong>must</strong> be specified with a unit (like ''0px'') to avoid ambiguity; unitless zero will either be interpreted as as one of the flexibilities, or is a syntax error.</p>
+ <p>The 'flex' property specifiex the parameters of a <dfn title="flexible length|flexible lengths|flexible length's">flexible length</dfn>: the <dfn id="positive-flexibility" title="positive flexibility">positive</dfn> and <dfn>negative flexibility</dfn>, and the <dfn>preferred size</dfn>.
- <p>The <code><pos-flex></code> component sets the length's <i>positive flexibility</i>; if omitted, the <i>positive flexibility</i> defaults to ''1''. The <code><neg-flex></code> component sets the length's <i>negative flexibility</i>; if omitted, it defaults to ''0''. The <code><preferred-size></code> component sets the length's <i>preferred size</i>; if omitted, it defaults to ''0px''.</p>
+ <p><code><pos-flex></code> and <code><neg-flex></code> are non-negative <code><numbers>s</code>,
+ while <code><preferred-size></code> is any value that would be valid in the
+ 'width' or 'height' property.
+ If the <code><preferred-size></code> is ''0'', it <strong>must</strong> be specified with a unit
+ (like ''0px'') to avoid ambiguity; unitless zero will either be interpreted as as one of the
+ flexibilities, or is a syntax error.</p>
- <p>If the ''flex()'' notation is specified on an element that is not a <i>flexbox item</i>, it computes to the <i>preferred size</i>. If the ''flex()'' notation is used on a <i>flexbox item's</i> <i>cross size property</i>, it computes to the <i>preferred size</i>. Otherwise, it computes to itself, and is resolved to a length at used-value time by the flexbox layout algorithm.</p>
+ <p>The <code><pos-flex></code> component sets the <i>positive flexibility</i>;
+ if omitted, the <i>positive flexibility</i> defaults to ''1''.
+ The <code><neg-flex></code> component sets the <i>negative flexibility</i>;
+ if omitted, it defaults to ''0''. </p>
+
+ <p>The <code><preferred-size></code> component sets the <i>preferred size</i>;
+ if omitted, it defaults to ''0px''. If set to 'auto', the value of 'width' or 'height' (whichever is
+ in parallel to main axis) is used as preferred size.
+
+ <p>The keyword 'none' is equivalent to "0 0 auto".
+ </p>
+ <p class="note"><b>Reviewers:</b> editors differ in preference for default value of the preferred size.
+ The current choice is default flexibility of "1" and default preferred size of "0px".
+ Earlier spec and two partial implementations use defaults of "0" and "auto".
+ These still have to be defaults when 'flex' property is not specified.
+ <br>
+ The current defaults are chosen by consensus, but there has not been much external input in
+ support of either option. If you can share an opinion, and/or use cases in support of either
+ set of defaults, the editors would appreciate it.
+ </p>
+
+
<p>A ''<flex>'' value is transitionable, by transitioning the <i>preferred size</i>, <i>positive flexibility</i>, and <i>negative flexibility</i> independently. ''<flex>'' can also transition to and from a <length>, by treating the length as if it were a flexible length with a positive and negative flexibility of zero and a preferred size of the length.</p>
<p class='issue'>Transitioning to/from a <length> (or to/from a <flex> with 0 flexibility) doesn't work well if it's the only flexible item in the flexbox. Rather than smoothly transitioning, it suddenly jumps in size when the flexibility becomes non-zero. Can we fix this, perhaps with a value that represents a percentage of the free space or something?</p>
<div class='example'>
- <p>The ''flex()'' notation allows elements to respond directly to the available space, in ways that are difficult or impossible in normal CSS. One common example is a page with one segment intended to stay on screen, and another section which may be long but which shouldn't scroll the page, like a chat room:</p>
+ <p>Flexibility allows elements to respond directly to the available space, in ways that are difficult or impossible in normal CSS. One common example is a page with one segment intended to stay on screen, and another section which may be long but which shouldn't scroll the page, like a chat room:</p>
<pre>
<!DOCTYPE html>
@@ -542,11 +603,15 @@
</body>
<style>
body { display:flexbox; flex-flow: column; }
- #messages { height: flex(1); }
+ #messages { flex:1; }
</style></pre>
<p class='issue'>Illustrate this example.</p>
</div>
+
+<p class="issue">Currently there are no separate properties for pos-flex, neg-flex or preferred size.
+If it doesn't change, there needs to be at least CSS OM access to the separate values.
+Parsing space-separated list is easier than functional notation, but figuring out the used value for preferred size is still far from trivial.
<h2 id='alignment'>
Alignment</h2>
@@ -695,6 +760,25 @@
</dd>
</dl>
+ <div class="issue"><p>Finalize and define what happens to auto margin.
+ <p>Proposals:
+ <ul>
+ <li>cross-axis margins (align):
+ <ol>
+ <li>'auto' is zero
+ <li>auto margins applied before alignment, map directly to alignment values (start/end/center)
+ <li>auto margins applied before alignment, do safe align (flex-align does 'true center' etc.)
+ </ol>
+ </li>
+ <li>main-axis margins (pack):
+ <ol>
+ <li>'auto' is zero
+ <li>if there is positive extra space after flexing (and before pack), distribute it equally to auto margins.
+ </ol>
+ </li>
+ </p>
+ </div>
+
<div class='figure'>
<img src="images/flex-align.svg" width=508 height=377>
<p class='caption'>An illustration of the five 'flex-align' keywords and their effects on a flexbox with four colored items.</p>
@@ -741,7 +825,7 @@
width: 300px;
}
button {
- width: flex(80px 1);
+ flex:80px 1;
}
<style>
@@ -775,7 +859,7 @@
width: 300px;
}
button {
- width: flex(80px 1);
+ flex:80px 1;
max-width: 90px;
}</pre>
Received on Thursday, 16 February 2012 14:52:46 UTC