- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 28 Jan 2011 01:26:43 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-flexbox
In directory hutz:/tmp/cvs-serv15921
Modified Files:
Overview.new.src.html
Added Files:
Overview.new.html
Log Message:
Finished initial re-draft of the spec.
Index: Overview.new.src.html
===================================================================
RCS file: /sources/public/csswg/css3-flexbox/Overview.new.src.html,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -d -r1.5 -r1.6
--- Overview.new.src.html 20 Jan 2011 17:27:29 -0000 1.5
+++ Overview.new.src.html 28 Jan 2011 01:26:41 -0000 1.6
@@ -1,12 +1,13 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>Flexible Box Layout Module</title>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED"> <!-- TODO: remove before build -->
+ <link rel=stylesheet href=http://dev.w3.org/csswg/default.css>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS]">
<link rel="stylesheet" type="text/css" href="../default.css">
<style type="text/css">
-.style1 {
- background-color: #FFFF00;
-}
+ p { margin: .5em 0; }
+ dd > p { text-indent: 0; }
+ a > b { font-weight: normal; color: #800; }
</style>
</head><body>
@@ -63,60 +64,31 @@
<div>
<h2 id="overview">Overview</h2>
- <p>CSS 2.1 defined three layout modes, algorithms which determine the size and
+ <p>CSS 2.1 defined four layout modes, algorithms which determine the size and
position of boxes based on their relationships with their sibling and ancestor
- boxes: normal layout, designed for laying out documents and simple applications,
+ boxes: block layout, designed for laying out documents and simple applications,
+ inline layout, designed for laying out text,
table layout, designed for laying out information in a tabular format, and
positioned layout, designed for very explicit positioning without much regard
for other elements in the document. This module introduces a new layout mode,
flexbox layout, which is designed for laying out more complex applications and
webpages.</p>
- <p>In CSS, flexboxes may be created by setting the 'display' property. A block-level
- flexbox can be specified with a value of ''flexbox'' and an inline flexbox can be
- specified using a value of ''inline-flexbox''. A block-level flexbox placed inside
- a block level element is positioned and sized as if it were any other block.
- An inline-level flexbox placed inside another element is positioned and sized
- like an inline-block.</p>
-
- <p class=issue>It's expected that the 'display' property will be split into
- 'display-inside' and 'display-outside' subproperties to specify, respectively,
- how elements layout themselves and their children, and how they are laid out by
- their parents. Once this happens, we can cut this down to merely
- ''display-inside:flexbox'', and let people set 'display-outside' to ''block'' or
- ''inline'' as they wish, or even ''table-cell''.</p>
-
- <p>Inline children of a flexbox are wrapped in anonymous blocks. All other children
- are block-level. These anonymous blocks or block-level boxes are referred to as
- ''flexbox children'' in this specification.</p>
-
- <p>Flexbox children may specify their width and height using the 'width' and
- 'height' properties. The width and height of replaced elements is computed as with
- replaced elements in inline contexts. Otherwise, if the width is set to ''auto'', then the
- used value is the intrinsic size, which may be calculated using a shrink-to-fit algorithm,
- as with inline-block elements, i.e., it will be given the minimum amount of space required
- to lay out the element without unnecessary line breaks. Similarly, if the height is set to
- ''auto'', then the used value in a similar manner.</p>
-
- <p>An unnested flexbox placed inside an enclosing block will obey all the
- usual sizing rules of the block. For example, setting the width of an unnested flexbox to
- 100% ensures that the flexbox is the maximum width permitted by the enclosing block
- (ignoring any margins, border and padding on that box).</p>
+ <p>Flexbox layout is superficially similar to block layout. It lacks many of
+ the more complex text or document-formatting properties that can be used in
+ block layout, such as 'float' and 'columns', but in return it gains more simple
+ and powerful tools for aligning its contents in ways that webapps and complex
+ web pages often need. The contents of a flexbox can be laid out in any direction,
+ can have their order swapped around dynamically, and can "flex" their sizes
+ and positions to respond to the available space.</p>
- <p>The difference between flexboxes and blocks is in how the children of the
- element are laid out. Flexbox children are all block-level (inline-level
- contents get wrapped in anonymous blocks).
- These blocks then get stacked in the direction specified by the 'flex-direction'
- property and order specified by the 'flex-order' property. They are aligned
- within the box according to their margins and the 'flex-align' property. The
- flexbox children may then flex or be distributed as specified by their margins,
- the 'flex' property, and the 'flex-pack' property.</p>
- </p><p>
+ <p>Similar to other layout modes such as table layout, a flexbox acts like a
+ block when placed into other layout modes. Inline flexboxes can also be declared,
+ which act like inline-blocks.</p>
- <p>The 'float' and 'clear' properties do not apply to flexbox children, so the
- used value of these properties is ''none''. Similarly, none of the properties
- defined in the CSS Multicol module apply to flexboxes or flexbox children, so
- the used value of all such properties is the initial value.</p>
+ <p>Block-level and atomic inline-level children of the flexbox are referred
+ to as <dfn>flexbox children</dfn> in this specification. Inline children are
+ wrapped in anonymous blocks, and these anonymous blocks are also <b>flexbox children</b>.</p>
<div class="example">
<p>For example:</p>
@@ -138,13 +110,6 @@
also be this height plus any margins around the buttons.</p>
</div>
- <p>Elements within a box may use the 'overflow' property
- to control whether a scrolling mechanism appears when the children of a box overflow.
- A scrolling mechanism may be displayed when flexible elements are reduced below their minimum
- intrinsic size when the overflow property is set to ''auto'' or ''scroll''.
- If 'overflow' is ''hidden'', the element will be clipped instead. <em>Note
- that the initial value is ''visible'', which is
- typically not the preferred effect in user interfaces.</em></p>
</div>
<!-- ====================================================================== -->
@@ -159,10 +124,19 @@
<td>display
<tr>
<th>New value:
- <td>flexbox
+ <td>flexbox | inline-flexbox
</tbody>
</table>
+ <p class=issue>The proliferation of "inline-*" display values is untenable and
+ restrictive. Table cells should be able to use the flexbox layout mode for
+ their contents, for example, rather than being forced to use block layout.
+ It's expected that this will be fixed by splitting the 'display' property
+ into subproperties controlling how the element formats its contents ('display-inside')
+ and how it reacts to its surroundings ('display-outside'). Once that occurs,
+ this section will instead describe a single new 'display-inside' value that
+ triggers flexbox layout.</p>
+
<p>You can declare that an element is a flexbox, and thus should use flexbox
layout, by setting the 'display' property on the element to the value
''flexbox''.</p>
@@ -180,11 +154,13 @@
the various flexbox properties defined in later sections.</p>
<p>A flexbox child creates a new BFC. The margins of a flexbox child
- do not collapse with any other margin.</p>
+ do not collapse with any other margin. Flexboxes "shrinkwrap" their contents
+ by default (when their 'width' or 'height' properties are ''auto''), similar
+ to tables or floats.</p>
<p>Setting ''display:flexbox'' on an element forces it to use a new layout
algorithm, and so some properties that were designed with the assumption of
- "normal" flow don't make sense in a flexbox context. In particular:</p>
+ block layout don't make sense in a flexbox context. In particular:</p>
<ul>
<li>all of the 'column-*' properties in the Multicol module compute to their initial
@@ -360,175 +336,97 @@
<!-- ====================================================================== -->
<div>
- <h2 id=flex>Flexibility: the 'flex' property</h2>
-
- <p>Each flexbox child may be made either ''flexible'' or ''inflexible''. Flexible
- elements may grow when the flexbox has extra space available after the size of
- all the flexbox children have been computed, or shrink if the combined size
- of all the flexbox children would cause the flexbox to overflow. Inflexible
- elements do not change size, even when there it too much or too little space
- left over in the flexbox.</p>
+ <h2 id=flexibility>Flexibility</h2>
- <p>When figuring out how large a flexible flexbox child is, CSS starts with
- the flexbox child's <dfn>preferred size</dfn>, which is simply the size specified
- in the 'width' or 'height' property. It then grows or shrinks that size based
- on the available free space and the flexbox child's relative flexibility.</p>
+ <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>The flexibility defined in this section only affects the size of flexbox child
- in the ''layout axis''. (That is, it only affects the width of a flexbox child
- in a horizontal flexbox, or the height in a vertical flexbox.)</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>
- <table class=propdef>
- <tr>
- <th>Name:
- <td><dfn>flex-grow</dfn>
- <tr>
- <th>Value:
- <td><number>
- <tr>
- <th>Initial:
- <td>0.0
- <tr>
- <th>Applies to:
- <td>flexbox children
- <tr>
- <th>Inherited:
- <td>no
- <tr>
- <th>Computed Value:
- <td>specified value
- <tr>
- <th>Media:
- <td>visual
- </table>
+ <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>
- <table class=propdef>
- <tr>
- <th>Name:
- <td><dfn>flex-shrink</dfn>
- <tr>
- <th>Value:
- <td><number>
- <tr>
- <th>Initial:
- <td>0.0
- <tr>
- <th>Applies to:
- <td>flexbox children
- <tr>
- <th>Inherited:
- <td>no
- <tr>
- <th>Computed Value:
- <td>specified value
- <tr>
- <th>Media:
- <td>visual
- </table>
+ <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>
- <p>An element is <dfn>flexible</dfn> when the 'flex-grow' or 'flex-shrink' property is
- non-zero. These properties are floating point values representing the flexibility
- of the flexbox child when the flexbox children are too small or too large, respectively,
- for the flexbox. When there is extra space left over in a flexbox, the flexible
- elements with a non-zero 'flex-grow' are expanded to fill that space. When a
- flexbox's contents would overflow the flexbox, the flexible elements with a
- non-zero 'flex-shrink' are shrunk to keep the contents from overflowing.</p>
+ <p>For <b>flexbox children</b>, the 'width', 'height', 'padding', and 'margin'
+ properties additionally accept the <dfn><flex></dfn> data type. Using
+ ''<flex>'' in any other context is a syntax error. The ''<flex>'' data
+ type can be expressed in two forms: the ''fl'' unit, and the ''flex()'' function.</p>
- <p>All flexibility is relative. For example, a flexbox child with a 'flex-grow'
- of 2 is twice as flexible (and thus will absorb twice as much free space) as
- a flexbox child with a 'flex-grow' of 1.</p>
+ <div>
+ <h3 id=flex-unit>The ''fl'' unit</h3>
- <p>Both 'flex-grow' and 'flex-shrink' must be non-negative. A negative value
- for either property is a syntax error.</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 ''<number>'' followed by ''fl''.
+ The ''fl'' unit defines a <b>flexible length</b> with a <b>preferred size</b>
+ of ''0'', a minimum size of ''0'', no maximum size, and a flexibility equal
+ to its value.</p>
+ </div>
- <p>The precise details of how flexibility is treated are defined in a later
- section of this specification. Generally, flexbox children compute their
- ''preferred size'' in the ''layout axis'', which is then summed between all
- the flexbox children and subtracted from the size of the flexbox in the
- ''layout axis''. If the resultant value is positive, there is free space left
- over, and it is apportioned out to each flexbox child relative to their 'flex-grow'
- value, so that their actual size is their ''preferred size'' plus their portion
- of the free space. If the resultant value is negative, the flexbox's contents
- would overflow, and so each flexbox child has its size reduced relative to its
- 'flex-shrink' value so that the flexbox's contents fit in the flexbox without
- overflowing.</p>
+ <div>
+ <h3 id=flex-function>The ''flex()'' function</h3>
- <p>Margins and paddings can take up the free space as well. If a margin or
- padding in the ''layout axis'' is ''auto'', they'll take up free space as if
- they had a flexibility of 1 and started from a size of 0. Because their size
- starts at 0, they don't participate in shrinking calculations.
+ <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 <b>preferred size</b>. The
+ syntax of the ''flex()'' function is:</p>
- <table class=propdef>
- <tr>
- <th>Name:
- <th><dfn>flex</dfn>
- <tr>
- <tr>Value:
- <td><number> <number>?
- <tr>
- <th>Initial:
- <td>0.0
- <tr>
- <th>Inherited:
- <td>no
- <tr>
- <th>Computed Value:
- <td>specified value
- <tr>
- <th>Media:
- <td>visual
- </table>
+ <pre class=prod>flex( <preferred-size>, <flex-grow> <max-size>? [, <flex-shrink> <min-size>?]? )</pre>
- <p>The 'flex' property is a shorthand that can set both 'flex-grow' and 'flex-shrink'
- at the same time. It accepts one or two numbers, which must be non-negative.
- Negative numbers are a syntax error.</p>
+ <p>The first argument given to the function sets the <b>preferred size</b>
+ of the <b>flexible length</b>. 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 ''<flex>''
+ value itself.</p>
- <p>If a single number is given, both 'flex-grow' and 'flex-shrink' are set to
- that value. If two numbers are given, 'flex-grow' is set to the first value
- and 'flex-shrink' is set to the second.</p>
+ <p>The second argument sets the <b>positive flexibility</b> of the length, and
+ optionally the maximum size of the length. The <flex-grow> must be
+ specified in <b>flex unit</b>s, while the <max-size>, if provided, must
+ be a value that would be valid if used in the property that the ''flex()''
+ function is being used on. If the <max-size> is not provided, the
+ <b>flexible length</b> has no maximum size.</p>
- <div class=example>
- <p class=issue>TODO: Add example showing basic usage.</p>
+ <p>The third argument is optional. If provided, it sets the <b>negative flexibility</b>
+ of the <b>flexible length</b>. Just like the previous argument, the
+ <flex-shrink> must be specified in <b>flex unit</b>s, while the optional
+ <min-size> must be a value that would be valid if used in the property
+ that the ''flex()'' function is being used on. If the <min-size> is not
+ provided, the <b>flexible length</b> has a minimum size of ''0''. If this
+ argument is not provided at all, the <b>flexible length</b> has no negative
+ flexibility and a minimum size of ''0''.</p>
</div>
- <div class=example>
- <p class=issue>TODO: Add example showing dynamic changes of flex (via :hover?).</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>
<div class=example>
- <p class=issue>TODO: Add example showing the interaction of flex and different
- preferred sizes.</p>
- </div>
- <!--
-If the size in the layout axis is computed first, then 'auto' resolves as 'fit-content'.
-Do the flexing calculations, set real size, then calculate the size in the transverse
-axis using this size. Do flexing calcs in the transverse axis.
-
-If the size in the layout axis is computed second, then resolve the size in the
-transverse axis with as 'fit-content', and using this, determine the size in the layout
-axis. Do the flexing calculations, set real size. Continue using the same value
-previously determined to do flexing in the transverse axis.
--->
- <div class=issue>
- <p>Somewhat concerned here. The way it works right now is that 'width'
- sets the preferred width, and 'flex' determines how the preferred width
- changes in response to free space.</p>
- <p>Many people seem to find this unintuitive, though. We can prevent this
- from being a problem in common cases by, frex, making ''width:auto'' give
- a preferred width of ''min-content'', but should we solve this more directly?
- It appears that forcing absolute flex through setting "width:0" is also
- unintuitive.</p>
- <p>"Fixing" this would probably involve using flex units or perhaps a flex()
- function in 'width' and 'height', so that you specify the flexibility and
- the preferred width at the same time, in the seemingly-logical place: the
- 'width' property.</p>
+ <p class=issue>TODO: Yank some examples from my original blog post and/or
+ the HTML5ROCKS article.</p>
</div>
</div>
<!-- ====================================================================== -->
<div>
- <h2 id=flex-pack>Aligning in the layout axis: the 'flex-pack' property</h2>
+ <h2 id=flex-pack>The 'flex-pack' property</h2>
<table class=propdef>
<tr>
<th>Name:
@@ -553,30 +451,48 @@
<td>visual
</table>
- <p>After resolving
- <P>The <CODE>flex-pack</CODE> property specifies what to do with leftover free
- space if there are no flexible widths or margins, or if all flexible widths have
- grown to their maximum size and there is still space left over.</P>
- <P>The <CODE>start</CODE> value specifies that flexbox children will be packed
- toward the start of the flexbox (this is not necessarily the 'start' logical
- edge - it's the edge of the flexbox that flexbox children are first placed
- against). That is, any leftover free space must be placed at the end of the
- flexbox.</P>
- <P>Similarly, the <CODE>end</CODE> value specifies that flexbox children will be
- packed toward the end of the flexbox (same caveat as above applies). That is,
- leftover free space is placed at the start of the flexbox.</P>
- <P>The <CODE>center</CODE> value specifies that flexbox children will be placed
- in the center of the flexbox; leftover free space is split equally between being
- placed at the start and end of the flexbox.</P>
- <P>The <CODE>justify</CODE> value specifies that flexbox children will be spaced
- evenly in the flexbox; if there are N flexbox children, leftover free space is
- split into N-1 equal parts and inserted between each flexbox child. There is no
- free space placed at the start or the end of the flexbox; the first and last
- flexbox child will be flush with the edges of the flexbox.</P>
+ <p>Between and around the margins of <b>flexbox children</b> there are additional
+ flexible lengths, called <dfn>packing space</dfn>. Packing space can absorb
+ leftover free space in a flexbox if there aren't any <b>flexible length</b>s
+ otherwise, or if all the <b>flexible length</b>s have reached their maximum
+ size. The 'flex-pack' property defines the flexibility of these packing spaces:
+
+ <dl>
+ <dt>start</dt>
+ <dd>Flexbox children must be packed toward the start of the flexbox. The
+ last packing space (between the margin of the last flexbox child and the
+ edge of the flexbox) must absorb all leftover free space; all other packing
+ spaces must have a length of ''0''.</dd>
+
+ <dt>end</dt>
+ <dd>Flexbox children must be packed toward the end of the flexbox. The
+ first packing space (between the edge of the flexbox and the margin of the
+ first flexbox child ) must absorb all leftover free space; all other packing
+ spaces must have a length of ''0''.</dd>
+
+ <dt>center</dt>
+ <dd>Flexbox children must be packed toward the center of the flexbox. The
+ first and last packing spaces must equally split all leftover free space;
+ all other packing spaces must have a length of ''0''.</dd>
+
+ <dt>justify</dt>
+ <dd>Flexbox children must be evenly distributed through the flexbox. The
+ first and last packing spaces must have a length of ''0''; all other packing
+ spaces must equally split all leftover free space.</dd>
+ </dl>
+
+ <div class=figure>
+ <p class=caption><span class=issue>TODO: Provide a diagram showing packing
+ spaces.</p>
+ </div>
+
+ <div class=example>
+ <p class=issue>TODO: Examples showing the four values.</p>
+ </div>
</div>
<!-- ====================================================================== -->
-
+<!-- Aborted new introduction to flexboxes
<p>A flexbox has two axes, which are treated differently by the space distribute algorithm: the <b>layout axis</b>, which is the axis along which the flexbox grows as you add more children, and the <b>transverse axis</b>, which is the perpendicular axis.</p>
<img alt="In a horizontal flexbox, the layout axis is horizontal, while the transverse axis is vertical.">
@@ -616,42 +532,11 @@
</div>
[write the transverse axis section]
-
+-->
<!-- ====================================================================== -->
<div>
- <h2 id=flex-align>Alignment: the 'flex-align' property</h2>
-
- <p>When the size of the flexbox is larger than the size of a child, extra space
- will be available. The 'margin', 'padding', 'width', 'height', and 'flex-align'
- properties specify how a flexbox's children are placed and aligned along the
- ''transverse axis'', and where the extra space, if any, is positioned.</p>
-
- <p>The amount of extra space may be different for each flexbox child. For
- example, if a horizontal flexbox has a height of 200px and contains two children
- at heights of 100px and 150px, there will be 100px of extra space for the first
- child and 50px of extra space for the second child.</p>
-
- <p>As in the previous section, the precise details of the free space distribution
- are detailed in a later section. This section merely gives an informative
- overview of the process.</p>
-
- <p>The amount of free space is determined by subtracting the ''transverse size''
- of the flexbox child from the size of the flexbox in the same axis. If either
- of the flexbox child's margins are ''auto'', they take all of the available free
- space, splitting it equally between them if they are both ''auto''. If neither
- margin is ''auto'', but at least one of the 'padding' values in the ''transverse axis''
- are, then the free space is apportioned to the auto padding, again splitting the
- free space equally if both paddings are ''auto''. If none of the margins or
- paddings in the ''transverse axis'' are ''auto'', but the 'width' or 'height'
- (whichever is in the ''transverse axis'') are, then that size is given all of
- the free space. Finally, if nothing in the ''transverse axis'' is ''auto''
- for the flexbox child, the free space is placed after the margin box in the
- ''transverse direction''.</p>
-
- <div class=example>
- <p class=issue>Examples go here.</p>
- </div>
+ <h2 id=flex-align>The 'flex-align' property</h2>
<table class=propdef>
<tr>
@@ -665,7 +550,7 @@
<td>auto
<tr>
<th>Applies to:
- <td>flexbox children
+ <td>flexboxes
<tr>
<th>Inherited:
<td>no
@@ -677,28 +562,31 @@
<td>visual
</table>
- <p>The 'flex-align' property changes how free space is distributed in the
- ''transverse axis''. If set to ''auto'', this property does nothing special -
- free space distribution proceeds as outlined above.</p>
+ <p>By default, laying out flexbox children in the <b>transverse axis</b> is
+ a simple matter of determining free space and then splitting it between any
+ <b>flexible length</b>s in that axis. This is not always sufficient, however;
+ in particular, it is often useful to align flexbox children by their baseline.
+ The 'flex-align' property changes the way free space is allocated in the
+ <b>transverse axis</b>.</p>
- <p>However, if 'flex-align' is set to ''baseline'', then the distribution of
- free space is changed to try and align the baselines of all flexbox children
- with ''flex-align: baseline''.</p>
+ <dl>
+ <dt>auto</dt>
+ <dd>Allocate free space in the <b>transverse axis</b> as normal, by distributing
+ it proportionally between <b>flexible length</b>s in that axis.</dd>
- <div class=issue>
- <p>So, I'm not sure what I want to do here. Possibilities include:</p>
- <ol>
- <li>Specify how things changes the resolution of auto margin/padding/height</li>
- <li>Move this property up onto the flexbox, where it makes <em>everyone</em>
- baseline-align no matter what, with some switches to determine whether
- the flexbox children stretch or shrink as well.</li>
- <li>Magic?</li>
- </ol>
- <p>I think I like #2. #1 seems complex and tricky. #3 is more difficult
- unless I become a wizard, which isn't in my career plan at the moment.</p>
- <p>I just need more use-case data on exactly what we need baseline alignment
- for.</p>
- </div>
+ <dt>baseline</dt>
+ <dd>
+ <p>Align all flexbox children so that their baselines line up, then distribute
+ free space above and below the content.</p>
+ <p>This only has an effect on flexbox children with a horizontal baseline
+ in a horizontal flexbox, or flexbox children with a vertical baseline
+ in a vertical flexbox. Otherwise, alignment for that flexbox child
+ proceeds as if ''flex-align:auto'' had been specified.</p>
+ </dd>
+ </dl>
+
+ <p>The precise effects that 'flex-align' has on alignment and free space
+ distribution are detailed in a later chapter.</p>
</div>
<!-- ====================================================================== -->
@@ -706,8 +594,8 @@
<div>
<h2 id=free-space-algorithm>Free Space Calculation and Distribution</h2>
- <p class="issue">TODO: to be completed. I've done it once before, I just need
- to make the necessary modifications to accomodate the changes, once we've
+ <p class="issue">TODO: to be completed. I've done it <a href="http://www.xanthir.com/blog/b45o0">once before</a>, I just need
+ to make the necessary modifications to accomodate the differences here, once we've
decided on what changes to make.</p>
</div>
@@ -721,8 +609,10 @@
layout model (for the flexbox to use) and by the flexbox (for the containing
layout model to use), and then write that up. Then the other layout models
we produce can re-use the same template.</p>
- </div>
+ <p>For now, I'm commenting out the text of the section.</p>
+ </div>
+ <!--
<p>
A box placed in a block is considered a block level element and will be positioned
and sized according to the rules for CSS 2.1 (section 10.3 for widths). Specifically,
@@ -766,6 +656,7 @@
based on the <span class="property">'box-align'</span> property of the
box.
</p>
+ -->
</div>
--- NEW FILE: Overview.new.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Flexible Box Layout Module</title>
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
type="text/css">
<!-- TODO: remove before build -->
<link href="http://dev.w3.org/csswg/default.css" rel=stylesheet>
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
type="text/css">
<link href="../default.css" rel=stylesheet type="text/css">
<style type="text/css">
p { margin: .5em 0; }
dd > p { text-indent: 0; }
a > b { font-weight: normal; color: #800; }
</style>
[...1070 lines suppressed...]
<td>flexboxes
<td>no
<td>specified value
<td>visual
</table>
<!--end-properties-->
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
End:
-->
Received on Friday, 28 January 2011 01:26:45 UTC