W3C home > Mailing lists > Public > public-css-commits@w3.org > February 2011

csswg/css3-flexbox Overview.new.src.html,1.10,1.11

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 22 Feb 2011 23:44:12 +0000
To: public-css-commits@w3.org
Message-Id: <E1Ps1ts-0003MT-3H@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv12896

Modified Files:
	Overview.new.src.html 
Log Message:
Rewrote the Flexibility chapter for better organization and clarity.
Switched over to AlexMog's suggestion for flex() syntax, dropped the 'fl' unit.


Index: Overview.new.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.new.src.html,v
retrieving revision 1.10
retrieving revision 1.11
diff -u -d -r1.10 -r1.11
--- Overview.new.src.html	22 Feb 2011 23:27:48 -0000	1.10
+++ Overview.new.src.html	22 Feb 2011 23:44:10 -0000	1.11
@@ -338,82 +338,74 @@
 
 	<p>The defining aspect of Flexbox Layout is the ability to make various lengths
 	of the flexbox children flexible.  Flexible lengths can be used for the 'width',
-	'height', 'padding', and 'margin' properties.  A <dfn>flexible length</dfn> can grow if 
-	the flexbox has extra space available, or shrink if the flexbox would otherwise
-	overflow.</p>
-
-	<p>When figuring out how large a flexible length should be, CSS starts with
-	the length's <dfn>preferred size</dfn>.  For lengths specified using the ''fl''
-	unit, the preferred size is ''0'' - it starts from nothing, and only gets some
-	space if there is any left over to distribute.  For lengths specified with the
-	''flex()'' function, the preferred size is the value of the first argument.</p>
-
-	<p>CSS then sums all the lengths that are sharing space, whether they are flexible
-	or inflexible, and subtracts that value from the total available space in that 
-	direction.  If there's space left over, then any lengths with <dfn>positive flexibility</dfn>
-	split the space between each other in proportion to their flexibility.  If
-	the sum is larger than the available space, so that the flexbox would be overflowing,
-	then any lengths with <dfn>negative flexibility</dfn> shrink in proportion to 
-	their flexibility, so that the contents of the flexbox exactly fit without 
-	overflowing.</p>
+	'height', 'padding', and 'margin' properties of flexbox children.  A 
+	<dfn>flexible length</dfn> can grow if the flexbox has extra space available, 
+	or shrink if the flexbox would otherwise overflow.  The ''flex()'' function
+	is used to specify a <i>flexible length</i> and it's parameters.</p>
 
-	<p>The 'flex-pack' and 'flex-align' properties offer more complex control over
-	free-space distribution.  The precise details of how free space is determined 
-	and assigned to flexible lengths is detailed in a later chapter.</p>
+	<div class=example>
+		<p class=issue>TODO: Examples!</p>
+	</div>
 
-	<p>For <i>flexbox children</i>, the 'width', 'height', 'padding', and 'margin'
-	properties additionally accept the <dfn>&lt;flex></dfn> data type.  Using 
-	''&lt;flex>'' in any other context is a syntax error.  The ''&lt;flex>'' data 
-	type can be expressed in two forms: the ''fl'' unit, and the ''flex()'' function.</p>
+<h3 id=resolving-flexible-lengths>
+Resolving Flexible Lengths</h3>
 
-	<div>
-		<h3 id=flex-unit>The ''fl'' unit</h3>
+	<p>CSS resolves a <i>flexible length</i> into a definite length by first collecting
+	all the lengths, flexible or inflexible, that will share some space.  For example,
+	for a horizontal flexbox, the lengths of the left and right margins, left and right
+	borders, left and right paddings, and widths of all <i>flexbox children</i> share
+	the width of the flexbox itself.  Conversely, each <i title="flexbox children">flexbox child's</i>
+	vertical margins, borders, padding, and height individually share the height
+	of the flexbox.</p>
 
-		<p>One way to indicate that a length is flexible is by setting the property's
-		value using the <dfn>flex unit</dfn>, denoted as a ''&lt;number>'' followed by ''fl''.
-		The ''fl'' unit defines a <i>flexible length</i> with a <i>preferred size</i>
-		of ''0'', a minimum size of ''0'', no maximum size, and a flexibility equal 
-		to its value.</p>
+	<div class=figure>
+		<p class="caption issue">TODO: Diagram showing the relevant lengths
+		in each axis.</p>
 	</div>
 
-	<div>
-		<h3 id=flex-function>The ''flex()'' function</h3>
-
-		<p>For more complex flexible lengths, the ''flex()'' function can be used
-		to specify various attributes of the length; most importantly, the ''flex()''
-		function can specify a non-zero length for the <i>preferred size</i>.  The
-		syntax of the ''flex()'' function is:</p>
-
-		<pre class=prod>flex( &lt;preferred-size>, &lt;flex-grow>[, &lt;flex-shrink>]? )</pre>
+	<p>CSS then sums the <dfn>preflex size</dfn> of the lengths in each set.  The
+	<i>preflex size</i> of an inflexible length is just the length itself.  The
+	<i>preflex size</i> of a flexible length is its <i>preferred size</i>.  The
+	<i>preferred size</i> defaults to ''0'', and can be set to a different value
+	with the optional third argument to the ''flex()'' function (defined below).</p>
 
-		<p>The first argument given to the function sets the <i>preferred size</i>
-		of the <i>flexible length</i>.  It must be a value that would be valid for the property
-		the ''flex()'' function is being used on, and resolves to the same length
-		that it would if used in that property (with the exception of ''auto'', which
-		is handled specially in flexbox layout).  It must not be a ''&lt;flex>'' 
-		value itself.</p>
+	<p>If the sum of all the <i title="preflex size">preflex sizes</i> is less than
+	the available width/height of the flexbox, then the difference is split up among all the 
+	<i title="flexible length">flexible lengths</i> with <dfn>positive flexibility</dfn>
+	(a non-zero value for the first argument to the ''flex()'' function), with the
+	space divvied up proportionally to the flexibility of each length.  If the sum
+	is greater than the available width/height, then all the
+	<i title="flexible length">flexible lengths</i> with <dfn>negative flexibility</dfn>
+	(a non-zero value for the second argument to the ''flex()'' function) shrink
+	in proportion to their flexibility to try and make the sum equal the available
+	width/height.</p>
+ 
+	<p>The 'flex-pack' and 'flex-align' properties offer more complex control over
+	free-space distribution.  The precise details of how free space is determined 
+	and assigned to flexible lengths is detailed in a later chapter.</p>
+ 
+<h3 id=flex-function>
+The ''flex()'' function</h3>
+ 
+	<p>The ''flex()'' function is used to specify the parameters of a
+	<i>flexible length</i>: the <i title="positive flexibility">positive</i> 
+	and <i>negative flexibility</i>, and the <i>preferred size</i>.  The syntax
+	of the ''flex()'' function is:</p>
 
-		<p>The second argument sets the <i>positive flexibility</i> of the length.
-		It must be specified in flex units.</p>
+	<pre class=prod>flex( <i title="positive flexibility">&lt;pos-flex></i>[, <i title="negative flexibility">&lt;neg-flex></i>[, <i title="preferred size">&lt;preferred-size></i>]?]? )</pre>
 
-		<p>The third argument is optional.  If provided, it sets the <i>negative flexibility</i>
-		of the <i>flexible length</i>.  Just like the previous argument, it must
-		be specified in <i>flex unit</i>s.  If not provided, the <i>negative flexibility</i>
-		of the length is ''0''.</p>
+	<p>The first argument sets the <i>positive flexibility</i> of the length.
+	It must be a non-negative &lt;number> - anything else is a syntax error.</p>
 
-		<p>Flexible lengths created by the ''flex()'' function have a minimum size
-		of ''0'' and no maximum size.</p>
-	</div>
+	<p>The second argument sets the <i>negative flexibility</i> of the length.
+	It must also be a non-negative &lt;number>, with anything else being a syntax
+	error.  This argument is optional; if omitted, it defaults to ''0''.</p>
 
-	<div class=figure>
-		<p class=caption><span class=issue>TODO: Diagram showing the relevant flexible
-		lengths in both the layout and transverse axis.</span></p>
-	</div>
+	<p>The third and final argument sets the <i>preferred size</i> of the length.
+	It must be a &lt;length> or a &lt;percentage>, or the keyword ''auto'' - 
+	anything else is a syntax error.  This argument is also optional; if omitted,
+	it defaults to ''0''.</p>
 
-	<div class=example>
-		<p class=issue>TODO: Yank some examples from my original blog post and/or
-		the HTML5ROCKS article.</p>
-	</div>
 
 <!-- ====================================================================== -->
 
Received on Tuesday, 22 February 2011 23:44:13 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:26:01 UTC