You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1750 lines
68 KiB
1750 lines
68 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
|
|
<html lang=en>
|
|
<head><meta content="text/html; charset=utf-8" http-equiv=Content-Type>
|
|
|
|
<title>CSS Flexible Box Layout Module</title>
|
|
<link href=default.css rel=stylesheet type="text/css">
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel=stylesheet
|
|
type="text/css">
|
|
|
|
<body>
|
|
<div class=head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
|
|
|
|
<h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
|
|
|
|
<h2 class="no-num no-toc" id=w3c-working>W3C Working Draft, 29 November
|
|
2011</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/">http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/</a>
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-flexbox/">http://www.w3.org/TR/css3-flexbox/</a>
|
|
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/</a>
|
|
|
|
|
|
<dt>Editors:
|
|
|
|
<dd><a href="http://www.xanthir.com/contact">Tab Atkins Jr.</a>, Google
|
|
Inc.
|
|
|
|
<dd>Alex Mogilevsky, Microsoft Corporation, <a
|
|
href="mailto:alexmog@microsoft.com">alexmog@microsoft.com</a>
|
|
|
|
<dd>L. David Baron, Mozilla Corporation, <a
|
|
href="mailto:dbaron@dbaron.org">dbaron@dbaron.org</a>
|
|
|
|
<dt>Authors and former editors:
|
|
|
|
<dd>Neil Deakin, Mozilla Corporation, <a
|
|
href="mailto:enndeakin@gmail.com">enndeakin@gmail.com</a>
|
|
|
|
<dd>Ian Hickson, formerly of Opera Software, <a
|
|
href="mailto:ian@hixie.ch">ian@hixie.ch</a>
|
|
|
|
<dd>David Hyatt, formerly of Netscape Corporation, <a
|
|
href="mailto:hyatt@apple.com">hyatt@apple.com</a>
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2011 <a
|
|
href="http://www.w3.org/"><acronym
|
|
title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym
|
|
title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
|
|
href="http://www.ercim.eu/"><acronym
|
|
title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
|
|
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract> Abstract</h2>
|
|
|
|
<p>The specification describes a CSS box model optimized for user interface
|
|
design. In flexbox layout model, the children of a box are laid out either
|
|
horizontally or vertically, and unused space can be assigned to a
|
|
particular child or distributed among the children by assignment of "flex"
|
|
to the children that should expand. Nesting of these boxes (horizontal
|
|
inside vertical, or vertical inside horizontal) can be used to build
|
|
layouts in two dimensions.
|
|
|
|
<h2 class="no-num no-toc" id=status>Status of this document</h2>
|
|
<!--begin-status-->
|
|
|
|
<p><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>Publication as a Working Draft does not imply endorsement by the W3C
|
|
Membership. This is a draft document and may be updated, replaced or
|
|
obsoleted by other documents at any time. It is inappropriate to cite this
|
|
document as other than work in progress.
|
|
|
|
<p>The (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
|
|
<a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
|
|
for discussion of this specification. When sending e-mail, please put the
|
|
text “css3-flexbox” in the subject, preferably like this:
|
|
“[<!---->css3-flexbox<!---->] <em>…summary of
|
|
comment…</em>”
|
|
|
|
<p>This document was produced by the <a
|
|
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
|
|
the <a href="http://www.w3.org/Style/">Style Activity</a>).
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="http://www.w3.org/2004/01/pp-impl/32061/status"
|
|
rel=disclosure>public list of any patent disclosures</a> made in
|
|
connection with the deliverables of the group; that page also includes
|
|
instructions for disclosing a patent. An individual who has actual
|
|
knowledge of a patent which the individual believes contains <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
|
|
<h2 class="no-num no-toc" id=table>Table of contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#intro"><span class=secno>1. </span> Introduction</a>
|
|
|
|
<li><a href="#box-model"><span class=secno>2. </span> The Flexbox Box
|
|
Model</a>
|
|
<ul class=toc>
|
|
<li><a href="#display-flexbox"><span class=secno>2.1. </span> New values
|
|
for ‘<code class=property>display</code>’ property</a>
|
|
|
|
<li><a href="#flex-items"><span class=secno>2.2. </span> Flexbox
|
|
Items</a>
|
|
<ul class=toc>
|
|
<li><a href="#abspos-flexbox-items"><span class=secno>2.2.1. </span>
|
|
Positioning Absolutely Positioned Flexbox Items</a>
|
|
</ul>
|
|
</ul>
|
|
|
|
<li><a href="#ordering-orientation"><span class=secno>3. </span> Ordering
|
|
and Orientation</a>
|
|
<ul class=toc>
|
|
<li><a href="#flex-flow"><span class=secno>3.1. </span> Flexbox Flow
|
|
Direction: the ‘<code class=property>flex-flow</code>’
|
|
property</a>
|
|
|
|
<li><a href="#flex-order"><span class=secno>3.2. </span> Display Order:
|
|
the ‘<code class=property>flex-order</code>’ property</a>
|
|
</ul>
|
|
|
|
<li><a href="#flexibility"><span class=secno>4. </span> Flexibility</a>
|
|
<ul class=toc>
|
|
<li><a href="#flex-function"><span class=secno>4.1. </span> The
|
|
‘<code class=css>flex()</code>’ function</a>
|
|
|
|
<li><a href="#resolving-flexible-lengths"><span class=secno>4.2. </span>
|
|
Resolving Flexible Lengths</a>
|
|
</ul>
|
|
|
|
<li><a href="#alignment"><span class=secno>5. </span> Alignment</a>
|
|
<ul class=toc>
|
|
<li><a href="#flex-pack"><span class=secno>5.1. </span> Main Axis
|
|
Alignment: the ‘<code class=property>flex-pack</code>’
|
|
property</a>
|
|
|
|
<li><a href="#flex-align"><span class=secno>5.2. </span> Cross Axis
|
|
Alignment: the ‘<code class=property>flex-align</code>’
|
|
property</a>
|
|
</ul>
|
|
|
|
<li><a href="#multiline"><span class=secno>6. </span> Multi-line
|
|
Flexbox</a>
|
|
<ul class=toc>
|
|
<li><a href="#flex-line-pack"><span class=secno>6.1. </span>
|
|
‘<code class=property>flex-line-pack</code>’ property</a>
|
|
</ul>
|
|
|
|
<li><a href="#layout-algorithm"><span class=secno>7. </span> Flexbox
|
|
Layout Algorithm</a>
|
|
|
|
<li><a href="#pagination"><span class=secno>8. </span> Page breaks in
|
|
flexbox</a>
|
|
|
|
<li><a href="#layout-interface"><span class=secno>9. </span> Box
|
|
Properties and Sizing</a>
|
|
|
|
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
|
|
|
|
<li class=no-num><a href="#references">References</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#normative">Normative references</a>
|
|
|
|
<li class=no-num><a href="#informative">Other references</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#property">Property index</a>
|
|
|
|
<li class=no-num><a href="#index">Index</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=intro><span class=secno>1. </span> Introduction</h2>
|
|
|
|
<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: 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>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 ‘<code
|
|
class=property>float</code>’ and ‘<code
|
|
class=property>columns</code>’, but in return it gains more simple
|
|
and powerful tools for aligning its contents in ways that webapps and
|
|
complex web pages often need.
|
|
|
|
<p>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. If a flexbox is <a
|
|
href="#multi-line"><i>multi-line</i></a>, the flexbox items flow in two
|
|
dimensions, wrapping into separate lines in a fashion similar to how text
|
|
is wrapped into multiple lines. The direction that these lines are stacked
|
|
in can also be controlled explicitly, relative either to the current
|
|
writing mode (logical directions) or explicit physical directions.
|
|
|
|
<h2 id=box-model><span class=secno>2. </span> The Flexbox Box Model</h2>
|
|
|
|
<p>An element with ‘<code class=css>display:flexbox</code>’ or
|
|
‘<code class=css>display:inline-flexbox</code>’ is a <dfn
|
|
id=flexbox>flexbox</dfn>. Block-level children of a flexbox, and some
|
|
other types of children, are called <dfn id=flexbox-item
|
|
title="flexbox item|flexbox items|flexbox item's">flexbox items</dfn> and
|
|
are laid out using the flexbox box model. <span class=note>(See the <a
|
|
href="#flex-items">Flexbox Items</a> chapter, below, for specifics on
|
|
which children are <a href="#flexbox-item"><i>flexbox items</i></a>
|
|
directly and which children are instead wrapped in anonymous boxes which
|
|
are then <a href="#flexbox-item"><i>flexbox items</i></a>)</span>
|
|
|
|
<p>The flexbox layout algorithm is agnostic as to the physical direction
|
|
the flexbox happens to be laid out in, so we will define several
|
|
direction-agnostic terms here to make the rest of the spec easier to read
|
|
and understand. The <dfn id=main-axis>main axis</dfn> of a flexbox is the
|
|
axis on which <a href="#flexbox-item"><i>flexbox items</i></a> are laid
|
|
out along. The <a href="#flexbox-item"><i>flexbox items</i></a> are
|
|
ordered such that they start on the <dfn id=main-start>main-start</dfn>
|
|
side of the flexbox, and go toward the <dfn id=main-end>main-end</dfn>
|
|
side. A <a href="#flexbox-item"><i>flexbox item's</i></a> width or height,
|
|
whichever is in the <a href="#main-axis"><i>main axis</i></a>, is the
|
|
item's <dfn id=main-size>main size</dfn>. The <a
|
|
href="#flexbox-item"><i>flexbox item's</i></a> ‘<code
|
|
class=property>width</code>’ or ‘<code
|
|
class=property>height</code>’ property, specifically, that is in the
|
|
<a href="#main-axis"><i>main axis</i></a> is the item's <dfn
|
|
id=main-size-property>main size property</dfn>. These terms are mapped to
|
|
physical directions based on the first keyword in the ‘<a
|
|
href="#flex-flow0"><code class=property>flex-flow</code></a>’
|
|
property.
|
|
|
|
<p>The axis perpendicular to the <a href="#main-axis"><i>main axis</i></a>
|
|
is called the <dfn id=cross-axis>cross axis</dfn>, and similarly has <dfn
|
|
id=cross-start>cross-start</dfn> and <dfn id=cross-end>cross-end</dfn>
|
|
directions and sides defined. The width or height of a <a
|
|
href="#flexbox-item"><i>flexbox item</i></a>, whichever is in the <a
|
|
href="#cross-axis"><i>cross axis</i></a>, is the item's <dfn
|
|
id=cross-size>cross size</dfn>, and similarly the actual ‘<code
|
|
class=property>width</code>’ or ‘<code
|
|
class=property>height</code>’ property, whichever is in the <a
|
|
href="#cross-axis"><i>cross axis</i></a>, is the item's <dfn
|
|
id=cross-size-property>cross size property</dfn>. These terms are mapped
|
|
to physical directions based on the orientation of the <a
|
|
href="#main-axis"><i>main axis</i></a> and the second keyword in the
|
|
‘<a href="#flex-flow0"><code
|
|
class=property>flex-flow</code></a>’ property.
|
|
|
|
<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.
|
|
|
|
<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
|
|
the available space or be aligned within the space with the ‘<a
|
|
href="#flex-align0"><code class=property>flex-align</code></a>’
|
|
property. If a flexbox is <a href="#multi-line"><i>multi-line</i></a>, new
|
|
lines are added in the <a href="#cross-end"><i>cross-end</i></a>
|
|
direction, and can similarly be aligned, centered, or distributed within
|
|
the flexbox with the ‘<a href="#flex-line-pack0"><code
|
|
class=property>flex-line-pack</code></a>’ property.
|
|
|
|
<p>Similar to other layout modes such as table layout, a flexbox acts like
|
|
a block when placed into elements using other layout modes. Inline
|
|
flexboxes act like inline-blocks.
|
|
|
|
<div class=example>
|
|
<p>For example, the following HTML snippet declares a flexbox with a few
|
|
children. The flexbox is horizontal, and the children's widths don't fill
|
|
the flexbox's width, so the additional space is distributed between the
|
|
children. The flexbox's height isn't explicitly specified, so it shrinks
|
|
to the height of its tallest child and centers the other children within
|
|
it:</p>
|
|
|
|
<pre>
|
|
<p style="width: 500px; padding: 5px; display: flexbox; flex-pack: distribute; flex-align: center;">
|
|
<button style="width: 200px;">Child 1<br>Another Line</button>
|
|
<button style="width: 100px;">Child 2</button>
|
|
<button style="width: 100px;">Child 3</button>
|
|
</p></pre>
|
|
|
|
<p>This will render approximately like the following:</p>
|
|
|
|
<p
|
|
style="border: thin solid black; background: white; width: 500px; padding: 5px; overflow: hidden;">
|
|
<button
|
|
style="float: left; width: 200px; height: 40px; margin-right: 50px;">Child
|
|
1<br>
|
|
Another Line</button> <button
|
|
style="float: left; width: 100px; height: 22px; margin-top: 9px;">Child
|
|
2</button> <button
|
|
style="float: right; width: 100px; height: 22px; margin-top: 9px;">Child
|
|
3</button></p>
|
|
</div>
|
|
|
|
<h3 id=display-flexbox><span class=secno>2.1. </span> New values for
|
|
‘<code class=property>display</code>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td>display
|
|
|
|
<tr>
|
|
<th>New value:
|
|
|
|
<td>flexbox | inline-flexbox
|
|
</table>
|
|
|
|
<p>You can declare that an element is a flexbox, and thus should use
|
|
flexbox layout for its contents, by setting the ‘<code
|
|
class=property>display</code>’ property on the element to the value
|
|
‘<a href="#flexbox"><code class=property>flexbox</code></a>’
|
|
or ‘<code class=property>inline-flexbox</code>’.
|
|
|
|
<p>The ‘<a href="#flexbox"><code class=css>flexbox</code></a>’
|
|
value makes the flexbox act like a block in other layout modes. The
|
|
‘<code class=css>inline-flexbox</code>’ value makes the
|
|
flexbox act like an inline-block in other layout modes.
|
|
|
|
<p>Flexboxes use a new layout algorithm, and so some properties that were
|
|
designed with the assumption of block layout don't make sense in a flexbox
|
|
context. In particular:
|
|
|
|
<ul>
|
|
<li>all of the ‘<code class=css>column-*</code>’ properties in
|
|
the Multicol module compute to their initial values on a flexbox
|
|
(‘<code class=property>break-before</code>’, ‘<code
|
|
class=property>break-inside</code>’, and ‘<code
|
|
class=property>break-after</code>’ are still valid on a flexbox).
|
|
|
|
<li>‘<code class=property>float</code>’ and ‘<code
|
|
class=property>clear</code>’ compute to their initial values on a
|
|
flexbox item
|
|
|
|
<li>‘<code class=property>vertical-align</code>’ has no effect
|
|
on a flexbox item
|
|
</ul>
|
|
|
|
<p>A flexbox creates a new flexbox formatting context for its contents.
|
|
This is similar to a block formatting context: floats must not intrude
|
|
into the flexbox, and the flexbox's margins do not collapse with the
|
|
margins of its contents. Additionally, all of the <a
|
|
href="#flexbox-item"><i>flexbox items</i></a> establish new block
|
|
formatting contexts for their contents.
|
|
|
|
<p class=issue>Figure out the right terms to use here.
|
|
|
|
<h3 id=flex-items><span class=secno>2.2. </span> Flexbox Items</h3>
|
|
|
|
<p>Flexbox layout algorithm operates on <a href="#flexbox-item"><i>flexbox
|
|
items</i></a>, which are boxes that satisfy at least one of the following
|
|
criteria:
|
|
|
|
<ol>
|
|
<li>Immediate block-level children of flexbox
|
|
|
|
<li>Atomic inline-level children of flexbox
|
|
|
|
<li>Contiguous run of non-replaced inline children, wrapped into an
|
|
anonymous block
|
|
</ol>
|
|
|
|
<div class=example>
|
|
<p>Examples of flexbox items:</p>
|
|
|
|
<pre>
|
|
<div style="display:flexbox">
|
|
|
|
<!-- flexbox item: block-level child -->
|
|
<div id="item1">block</div>
|
|
|
|
<!-- not a flexbox item, because it's out-of-flow -->
|
|
<div id="not-an-item1.5" style="position: absolute;">block</div>
|
|
|
|
<!-- flexbox item: block-level child -->
|
|
<div id="item2" style="display:table">table</div>
|
|
|
|
<!-- flexbox item: anonymous table wrapped around table-cell -->
|
|
<div id="item3" style="display:table-cell">table-cell</div>
|
|
|
|
<!-- flexbox item: anonymous block around inline content -->
|
|
anonymous item 4
|
|
|
|
<!-- flexbox item: block-level child -->
|
|
<div id="item5">block</div>
|
|
|
|
<!-- flexbox item: anonymous block around inline content -->
|
|
anonymous item 6.1
|
|
<span id="item6.1">
|
|
text 6.2
|
|
<div id="not-an-item6.3">block</div>
|
|
text 6.4
|
|
</span>
|
|
|
|
<!-- flexbox item: block-level replaced element -->
|
|
<iframe id="item7">
|
|
|
|
<!-- flexbox item: inline-level replaced element -->
|
|
<img id="item7" style="display:inline">
|
|
|
|
<!-- flexbox item: inline-level replaced element -->
|
|
<button id="item8">button</button>
|
|
|
|
<!-- flexbox item: inline-table -->
|
|
<div id="item9" style="display:inline-table">table</div>
|
|
</div></pre>
|
|
|
|
<p>Notice that block element "not-an-item6.3" is not a separate flexbox
|
|
item, because it is contained inside an inline element which is being
|
|
wrapped into an anonymous flex item. Similarly, the block element
|
|
"not-an-item1.5" is not a flexbox item, because it's absolutely
|
|
positioned and thus out of flow.</p>
|
|
</div>
|
|
|
|
<p>Similar to table cells, flexbox items respond specially to the
|
|
‘<code class=css>collapse</code>’ value of the ‘<code
|
|
class=property>visibility</code>’ property. When a flexbox item is
|
|
set to ‘<code class=css>visibility: collapse;</code>’, the
|
|
item does not generate a box at all (identical to setting ‘<code
|
|
class=css>display: none;</code>’).
|
|
|
|
<h4 id=abspos-flexbox-items><span class=secno>2.2.1. </span> Positioning
|
|
Absolutely Positioned Flexbox Items</h4>
|
|
|
|
<p>Absolutely positioned children of a flexbox are not <a
|
|
href="#flexbox-item"><i>flexbox items</i></a>, but their "static position"
|
|
(their position when the ‘<code
|
|
class=property>top</code>’/‘<code
|
|
class=property>right</code>’/‘<code
|
|
class=property>bottom</code>’/‘<code
|
|
class=property>left</code>’ properties are ‘<code
|
|
class=css>auto</code>’) responds somewhat to the flexbox's various
|
|
properties. The element's static position in the flexbox's <a
|
|
href="#cross-axis"><i>cross axis</i></a> is on the <a
|
|
href="#cross-start"><i>cross-start</i></a> edge of the flexbox's content
|
|
box. The static position in the flexbox's <a href="#main-axis"><i>main
|
|
axis</i></a> is slightly more complex to compute:
|
|
|
|
<p>First, find the element's <dfn id=hypothetical-neighbors>hypothetical
|
|
neighbors</dfn> by assuming that the element is a normal <a
|
|
href="#flexbox-item"><i>flexbox item</i></a> with ‘<code
|
|
class=css>flex-order:0</code>’, and reorder the flexbox's contents
|
|
as mandated by ‘<a href="#flex-order0"><code
|
|
class=property>flex-order</code></a>’. The <a
|
|
href="#flexbox-item"><i>flexbox items</i></a> immediately preceding and
|
|
following the element in the flexbox's direction (if any) are the
|
|
element's <a href="#hypothetical-neighbors"><i>hypothetical
|
|
neighbors</i></a>.
|
|
|
|
<p>If the element has two neighbors, its static position in the <a
|
|
href="#main-axis"><i>main axis</i></a> is exactly in the center of the
|
|
packing space between them when the flexbox is actually laid out. If the
|
|
element has only a preceding neighbor, its static position in the <a
|
|
href="#main-axis"><i>main axis</i></a> is flush with the <a
|
|
href="#main-end"><i>main-end</i></a> edge of the margin box of the
|
|
neighbor. If the element has only a following neighbor, its static
|
|
position in the <a href="#main-axis"><i>main axis</i></a> is flush with
|
|
the <a href="#main-start"><i>main-start</i></a> edge of the margin box of
|
|
the neighbor. Finally, if the element has no neighbors (the flexbox has no
|
|
in-flow children at all), the static position in the <a
|
|
href="#main-axis"><i>main axis</i></a> is based on the value of ‘<a
|
|
href="#flex-pack0"><code class=property>flex-pack</code></a>’: if
|
|
the value is ‘<a href="#flex-line-pack-start"><code
|
|
class=css>start</code></a>’ or ‘<code
|
|
class=css>distribute</code>’, it's flush with the <a
|
|
href="#main-start"><i>main-start</i></a> edge of the flexbox's content
|
|
box; if the value is ‘<a href="#flex-line-pack-end"><code
|
|
class=css>end</code></a>’, it's flush with the <a
|
|
href="#main-end"><i>main-end</i></a> edge of the flexbox's content box; if
|
|
the value is ‘<a href="#flex-line-pack-center"><code
|
|
class=css>center</code></a>’, it's centered within the flexbox's
|
|
content box.
|
|
|
|
<h2 id=ordering-orientation><span class=secno>3. </span> Ordering and
|
|
Orientation</h2>
|
|
|
|
<p>The first level of flexbox functionality is the ability to lay out a
|
|
flexbox's contents in any direction and in any order. This allows an
|
|
author to trivially achieve effects that would previously have required
|
|
complex or fragile methods, such as using the ‘<code
|
|
class=property>float</code>’ property to lay out a horizontal
|
|
navigation bar (which then requires further effort with the ‘<code
|
|
class=property>clear</code>’ property or others to make the elements
|
|
interact nicely with the rest of the page). This functionality is exposed
|
|
through the ‘<a href="#flex-flow0"><code
|
|
class=property>flex-flow</code></a>’ and ‘<a
|
|
href="#flex-order0"><code class=property>flex-order</code></a>’
|
|
properties.
|
|
|
|
<h3 id=flex-flow><span class=secno>3.1. </span> Flexbox Flow Direction: the
|
|
‘<a href="#flex-flow0"><code
|
|
class=property>flex-flow</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=flex-flow0>flex-flow</dfn>
|
|
|
|
<tr>
|
|
<th>Values:
|
|
|
|
<td>[ row | row-reverse | column | column-reverse ] [ wrap |
|
|
wrap-reverse ]?
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>row
|
|
|
|
<tr>
|
|
<th>Applies To:
|
|
|
|
<td>flexboxes
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Computed Value:
|
|
|
|
<td>specified value
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
</table>
|
|
|
|
<p>The ‘<a href="#flex-flow0"><code
|
|
class=property>flex-flow</code></a>’ property specifies how <a
|
|
href="#flexbox-item"><i>flexbox items</i></a> are placed in the flexbox.
|
|
The value consists of one or two keywords: the first sets the orientation
|
|
and direction of the flexbox's <a href="#main-axis"><i>main axis</i></a>,
|
|
which affects the direction that flexbox items are laid out in, and the
|
|
meaning of the ‘<a href="#flex-pack0"><code
|
|
class=property>flex-pack</code></a>’ properties; the second, if
|
|
specified, marks the flexbox as being multiline and sets the direction of
|
|
the <a href="#cross-axis"><i>cross axis</i></a>, which affects the
|
|
direction new lines are stacked in, and the meaning of the ‘<a
|
|
href="#flex-align0"><code class=property>flex-align</code></a>’ and
|
|
‘<a href="#flex-line-pack0"><code
|
|
class=property>flex-line-pack</code></a>’ properties.
|
|
|
|
<dl>
|
|
<dt><dfn id=flex-flow-row>row</dfn>
|
|
|
|
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
|
|
orientation as the inline axis of the current writing mode (the direction
|
|
that text is laid out in). The <a
|
|
href="#main-start"><i>main-start</i></a> and <a
|
|
href="#main-end"><i>main-end</i></a> directions are equivalent to the
|
|
"start" and "end" directions, respectively, of the current writing mode.
|
|
|
|
<dt><dfn id=flex-flow-row-reverse>row-reverse</dfn>
|
|
|
|
<dd>Same as <a href="#flex-flow-row"><i>row</i></a>, except the <a
|
|
href="#main-start"><i>main-start</i></a> and <a
|
|
href="#main-end"><i>main-end</i></a> directions are swapped.
|
|
|
|
<dt><dfn id=flex-flow-column>column</dfn>
|
|
|
|
<dd>The flexbox's <a href="#main-axis"><i>main axis</i></a> has the same
|
|
orientation as the block axis of the current writing mode (the direction
|
|
that blocks are laid out in). The <a
|
|
href="#main-start"><i>main-start</i></a> and <a
|
|
href="#main-end"><i>main-end</i></a> directions are equivalent to the
|
|
"before" and "after" directions, respectively, of the current writing
|
|
mode.
|
|
|
|
<dt><dfn id=flex-flow-column-reverse>column-reverse</dfn>
|
|
|
|
<dd>Same as <a href="#flex-flow-column"><i>column</i></a>, except the <a
|
|
href="#main-start"><i>main-start</i></a> and <a
|
|
href="#main-end"><i>main-end</i></a> directions are swapped.
|
|
|
|
<dt><dfn id=flex-flow-wrap>wrap</dfn>
|
|
|
|
<dd>The flexbox is <a href="#multi-line"><i>multi-line</i></a>. The <a
|
|
href="#cross-start"><i>cross-start</i></a> direction is equivalent to
|
|
either the "start" or "before" direction of the current writing mode,
|
|
whichever is in the <i>cross-axis</i>, and the <a
|
|
href="#cross-end"><i>cross-end</i></a> direction is the opposite
|
|
direction of <a href="#cross-start"><i>cross-start</i></a>.
|
|
|
|
<dt><dfn id=flex-flow-wrap-reverse>wrap-reverse</dfn>
|
|
|
|
<dd>Same as <a href="#flex-flow-wrap"><i>wrap</i></a>, except the <a
|
|
href="#cross-start"><i>cross-start</i></a> and <a
|
|
href="#cross-end"><i>cross-end</i></a> directions are swapped.
|
|
</dl>
|
|
|
|
<p>If the second keyword is omitted, the flexbox is <a
|
|
href="#single-line"><i>single-line</i></a>, and the <a
|
|
href="#cross-start"><i>cross-start</i></a> and <a
|
|
href="#cross-end"><i>cross-end</i></a> directions are set as described
|
|
above for the ‘<a href="#flex-flow-wrap"><code
|
|
class=css>wrap</code></a>’ keyword.
|
|
|
|
<div class=example>
|
|
<p>Some examples of valid flows:</p>
|
|
|
|
<pre>
|
|
div { flex-flow: row; } /* Initial value. Main axis is inline,
|
|
no wrap. */
|
|
div { flex-flow: column wrap; } /* Main axis is block-direction and lines
|
|
wrap in the inline direction. For an
|
|
English page, the main axis is top-to-bottom
|
|
and lines wrap to the right. */
|
|
div { writing-mode: tb-rl; /* Main axis is block direction (right to left).
|
|
flex-flow: column wrap-reverse; } /* New lines wrap upwards. */</pre>
|
|
</div>
|
|
|
|
<p class=issue>Is there a good, shorter way to refer to the reversed
|
|
physical directions than the 8-character "-reverse" suffix?
|
|
|
|
<h3 id=flex-order><span class=secno>3.2. </span> Display Order: the
|
|
‘<a href="#flex-order0"><code
|
|
class=property>flex-order</code></a>’ property</h3>
|
|
|
|
<p><a href="#flexbox-item"><i>Flexbox items</i></a> are, by default,
|
|
displayed and laid out in the same order as they appear in the source
|
|
document. The ‘<a href="#flex-order0"><code
|
|
class=property>flex-order</code></a>’ property may be used to change
|
|
this ordering.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=flex-order0>flex-order</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><number>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>0
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td><a href="#flexbox-item"><i>flexbox items</i></a>
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
</table>
|
|
|
|
<p>The ‘<a href="#flex-order0"><code
|
|
class=property>flex-order</code></a>’ property assigns <a
|
|
href="#flexbox-item"><i>flexbox items</i></a> to ordinal groups.
|
|
|
|
<p>Ordinal groups control the order in which <a
|
|
href="#flexbox-item"><i>flexbox items</i></a> appear. A flexbox will lay
|
|
out its content starting from the lowest numbered ordinal group and going
|
|
up. Items with the same ordinal group are laid out in the order they
|
|
appear in the source document.
|
|
|
|
<div class=example>
|
|
<p>This example shows how ordinal groups might be used.</p>
|
|
|
|
<pre>
|
|
div { display: flexbox; }
|
|
#item1, #item3 { flex-order: 1; }
|
|
#item4 { flex-order: 0; }
|
|
|
|
<div>
|
|
<button id="item1">One</button>
|
|
<button id="item2">Two</button>
|
|
<button id="item3">Three</button>
|
|
<button id="item4">Four</button>
|
|
</div></pre>
|
|
|
|
<p>Items 2 and 4 are both in ordinal group 0 (item 2 defaults to
|
|
‘<code class=css>0</code>’ because it doesn't specify one
|
|
explicitly). This is the lowest ordinal group, so they'll be displayed
|
|
first, and in document order, with Item 2 displayed before Item 4. The
|
|
remaining items are both in ordinal group 1, so the resulting display
|
|
order will be:</p>
|
|
|
|
<div style="border: medium solid green; display: inline-block;">
|
|
<button>Two</button> <button>Four</button> <button>One</button>
|
|
<button>Three</button></div>
|
|
</div>
|
|
|
|
<p class=issue>Add a realistic example of tab reordering.
|
|
|
|
<p class=issue>Add an example of reordering columns in a page.
|
|
|
|
<h2 id=flexibility><span class=secno>4. </span> Flexibility</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 declaring a <dfn
|
|
id=flexible-length>flexible length</dfn> with the ‘<code
|
|
class=css>flex()</code>’ function, defined below.
|
|
|
|
<h3 id=flex-function><span class=secno>4.1. </span> The ‘<code
|
|
class=css>flex()</code>’ function</h3>
|
|
|
|
<p>The ‘<code class=css>flex()</code>’ function is used to
|
|
specify the parameters of a <dfn id=flexible-length0
|
|
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>’ function is:
|
|
|
|
<pre
|
|
class=prod>flex( [ <pos-flex> <neg-flex>? ]? || <preferred-size>? )</pre>
|
|
|
|
<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
|
|
‘<code class=css>flex()</code>’ function) that would be valid
|
|
in the ‘<code class=property>width</code>’ or ‘<code
|
|
class=property>height</code>’ property in which the function is
|
|
used, except that zero lengths must not omit their unit.
|
|
|
|
<p>The <code><pos-flex></code> component sets the length's <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
|
|
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
|
|
href="#preferred-size"><i>preferred size</i></a>; if omitted, it defaults
|
|
to ‘<code class=css>0px</code>’.
|
|
|
|
<p class=issue>Examples!
|
|
|
|
<h3 id=resolving-flexible-lengths><span class=secno>4.2. </span> Resolving
|
|
Flexible Lengths</h3>
|
|
|
|
<p class=note>Note: This section is non-normative.
|
|
|
|
<p><a href="#flexible-length0"><i>Flexible lengths</i></a> are resolved
|
|
into normal, inflexible lengths by figuring out how large all of the <a
|
|
href="#flexible-length0"><i>flexible lengths</i></a> in the flexbox
|
|
<em>want</em> to be, then either growing or shrinking that <a
|
|
href="#preferred-size"><i>preferred size</i></a> so that the <a
|
|
href="#flexbox-item"><i>flexbox items</i></a> exactly fill the flexbox,
|
|
neither overflowing nor leaving extra unfilled space.
|
|
|
|
<p><a href="#flexible-length0"><i>Flexible lengths</i></a> are resolved
|
|
into normal inflexible lengths based on their <a
|
|
href="#preferred-size"><i>preferred size</i></a>, their flexibility, and
|
|
the amount of free space in the flexbox. The exact algorithm is described
|
|
in <a href="#layout-algorithm">a later section of this spec</a>, but in
|
|
general, it works like this:
|
|
|
|
<ol>
|
|
<li>First, set all the <a href="#flexible-length0"><i>flexible
|
|
lengths</i></a> to their <a href="#preferred-size"><i>preferred
|
|
size</i></a>.
|
|
|
|
<li>Then, lay out the flexbox, and see if there is free space left, or if
|
|
the flexbox is overflowing.
|
|
|
|
<li>If there's free space, distribute it among the <a
|
|
href="#flexible-length0"><i>flexible lengths</i></a> in proportion to
|
|
their <a href="#positive-flexibility"><i>positive flexibility</i></a>. If
|
|
the flexbox is overflowing, shrink the <a
|
|
href="#flexible-length0"><i>flexible lengths</i></a> in proportion to
|
|
their <a href="#negative-flexibility"><i>negative flexibility</i></a>.
|
|
|
|
<li>If there's free space and any <a href="#flexible-length0"><i>flexible
|
|
lengths</i></a> are violating a max width or height constraint, change
|
|
them into the largest inflexible length that doesn't violate their
|
|
constraint and return to step 2. If the flexbox is overflowing and any <a
|
|
href="#flexible-length0"><i>flexible lengths</i></a> are violating a min
|
|
width or height constraint, change them into the smallest inflexible
|
|
length that doesn't violate their constraint and return to step 2.
|
|
|
|
<li>If there's free space and any <a href="#flexible-length0"><i>flexible
|
|
lengths</i></a> are violating a min width or height constraint, change
|
|
them into the smallest inflexible length that doesn't violate their
|
|
constraint and return to step 2. If the flexbox is overflowing and any <a
|
|
href="#flexible-length0"><i>flexible lengths</i></a> are violating a max
|
|
width or height constraint, change them into the largest inflexible
|
|
length that doesn't violate their constraint and return to step 2.
|
|
</ol>
|
|
|
|
<p class=issue>This is too much detail for a non-normative section. This is
|
|
living here only until I flesh out the layout algorithm section. Then this
|
|
can return to being a fairly simple explanation of what goes on.
|
|
|
|
<p>If a flexible length is used in a context where it is not allowed (for
|
|
example, on the ‘<code class=property>width</code>’ property
|
|
of an element that is not a <a href="#flexbox-item"><i>flexbox
|
|
item</i></a>), it represents its <a href="#preferred-size"><i>preferred
|
|
size</i></a>. Authors must not use flexible lengths in contexts where they
|
|
are not allowed.
|
|
|
|
<p class=issue>Examples!
|
|
|
|
<h2 id=alignment><span class=secno>5. </span> Alignment</h2>
|
|
|
|
<p>After a flexbox's contents have finished their flexing, they can be
|
|
aligned in both the <a href="#main-axis"><i>main axis</i></a> with
|
|
‘<a href="#flex-pack0"><code
|
|
class=property>flex-pack</code></a>’ and the <a
|
|
href="#cross-axis"><i>cross axis</i></a> with ‘<a
|
|
href="#flex-align0"><code class=property>flex-align</code></a>’.
|
|
These properties make many common types of alignment trivial, including
|
|
some things that were very difficult in CSS 2.1, like horizontal and
|
|
vertical centering.
|
|
|
|
<h3 id=flex-pack><span class=secno>5.1. </span> Main Axis Alignment: the
|
|
‘<a href="#flex-pack0"><code
|
|
class=property>flex-pack</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=flex-pack0>flex-pack</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>start | end | center | justify
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>start
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>flexboxes
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Computed Value:
|
|
|
|
<td>specified value
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
</table>
|
|
|
|
<p>The ‘<a href="#flex-pack0"><code
|
|
class=property>flex-pack</code></a>’ property aligns <a
|
|
href="#flexbox-item"><i>flexbox items</i></a> in the <a
|
|
href="#main-axis"><i>main axis</i></a> of the current line of the flexbox.
|
|
This is done <em title="">after</em> any flexible lengths have been
|
|
resolved. Typically it helps distribute extra free space leftover when
|
|
either all the <a href="#flexbox-item"><i>flexbox items</i></a> on a line
|
|
are inflexible, or are flexible but have reach their maximum size, but it
|
|
also exerts some control over the alignment of items when they overflow
|
|
the line.
|
|
|
|
<dl>
|
|
<dt><dfn id=flex-pack-start>start</dfn>
|
|
|
|
<dd><a href="#flexbox-item"><i>Flexbox items</i></a> are packed toward the
|
|
start of the line. The <a href="#main-start"><i>main-start</i></a> margin
|
|
edge of the first <a href="#flexbox-item"><i>flexbox item</i></a> on the
|
|
line is placed flush with the <a href="#main-start"><i>main-start</i></a>
|
|
edge of the line, and each subsequent <a href="#flexbox-item"><i>flexbox
|
|
item</i></a> is placed flush with the preceding item.
|
|
|
|
<dt><dfn id=flex-pack-end>end</dfn>
|
|
|
|
<dd><a href="#flexbox-item"><i>Flexbox items</i></a> are packed toward the
|
|
end of the line. The <a href="#main-end"><i>main-end</i></a> margin edge
|
|
of the last <a href="#flexbox-item"><i>flexbox item</i></a> is placed
|
|
flush with the <a href="#main-end"><i>main-end</i></a> edge of the line,
|
|
and each preceding <a href="#flexbox-item"><i>flexbox item</i></a> is
|
|
placed flush with the subsequent item.
|
|
|
|
<dt><dfn id=flex-pack-center>center</dfn>
|
|
|
|
<dd><a href="#flexbox-item"><i>Flexbox items</i></a> are packed toward the
|
|
center of the line. The <a href="#flexbox-item"><i>flexbox items</i></a>
|
|
on the line are placed flush with each other and aligned in the center of
|
|
the line, with equal amounts of empty space between the <a
|
|
href="#main-start"><i>main-start</i></a> edge of the line and the first
|
|
item on the line and between the <a href="#main-end"><i>main-end</i></a>
|
|
edge of the line and the last item on the line. (If the leftover
|
|
free-space is negative, the <a href="#flexbox-item"><i>flexbox
|
|
items</i></a> will overflow equally in both directions.)
|
|
|
|
<dt><dfn id=flex-pack-justify>justify</dfn>
|
|
|
|
<dd><a href="#flexbox-item"><i>Flexbox items</i></a> are evenly
|
|
distributed in the line. If the leftover free-space is negative or there
|
|
is only a single <a href="#flexbox-item"><i>flexbox item</i></a> on the
|
|
line, this value is identical to ‘<a
|
|
href="#flex-line-pack-start"><code class=css>start</code></a>’.
|
|
Otherwise, the <a href="#main-start"><i>main-start</i></a> margin edge of
|
|
the first <a href="#flexbox-item"><i>flexbox item</i></a> on the line is
|
|
placed flush with the <a href="#main-start"><i>main-start</i></a> edge of
|
|
the line, the <a href="#main-end"><i>main-end</i></a> margin edge of the
|
|
last <a href="#flexbox-item"><i>flexbox item</i></a> on the line is
|
|
placed flush with the <a href="#main-end"><i>main-end</i></a> edge of the
|
|
line, and the remaining <a href="#flexbox-item"><i>flexbox items</i></a>
|
|
on the line are distributed so that the empty space between any two
|
|
adjacent items is the same.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p class=issue>TODO: Examples showing the four values.</p>
|
|
</div>
|
|
|
|
<p class=note>A previous revision of this spec allowed margins to flex
|
|
directly, which allowed an effect similar to ‘<a
|
|
href="#flex-pack0"><code class=property>flex-pack</code></a>’. In
|
|
particular, it allowed an author to, for example, split a flexbox in half,
|
|
with some of the items pushed toward the start and the rest pushed toward
|
|
the end, by flexing exactly one margin. This sort of effect is no longer
|
|
possible without either using the ::before or ::after pseudoelements or
|
|
adding additional elements to the document, to act as an empty item that
|
|
can then flex. It's expected that we will develop something in the future
|
|
to make this easier, such as a more general pseudoelement or perhaps the
|
|
ability to explicitly control individual spaces between flexbox items.
|
|
|
|
<h3 id=flex-align><span class=secno>5.2. </span> Cross Axis Alignment: the
|
|
‘<a href="#flex-align0"><code
|
|
class=property>flex-align</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=flex-align0>flex-align</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>start | end | center | baseline | stretch
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>stretch
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td><a href="#flexbox-item"><i>flexbox items</i></a>
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Computed Value:
|
|
|
|
<td>specified value
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
</table>
|
|
|
|
<p>The ‘<a href="#flex-align0"><code
|
|
class=property>flex-align</code></a>’ property aligns <a
|
|
href="#flexbox-item"><i>flexbox items</i></a> in the <a
|
|
href="#cross-axis"><i>cross axis</i></a> of the current line of the
|
|
flexbox, similar to ‘<a href="#flex-pack0"><code
|
|
class=property>flex-pack</code></a>’ but in the perpendicular axis.
|
|
Note that ‘<a href="#flex-align0"><code
|
|
class=property>flex-align</code></a>’ applies to individual <a
|
|
href="#flexbox-item"><i>flexbox items</i></a>, while ‘<a
|
|
href="#flex-pack0"><code class=property>flex-pack</code></a>’
|
|
applies to the flexbox itself.
|
|
|
|
<dl>
|
|
<dt><dfn id=flex-align-start>start</dfn>
|
|
|
|
<dd>The <a href="#cross-start"><i>cross-start</i></a> margin edge of the
|
|
<a href="#flexbox-item"><i>flexbox item</i></a> is placed flush with the
|
|
<a href="#cross-start"><i>cross-start</i></a> edge of the line.
|
|
|
|
<dt><dfn id=flex-align-end>end</dfn>
|
|
|
|
<dd>The <a href="#cross-end"><i>cross-end</i></a> margin edge of the <a
|
|
href="#flexbox-item"><i>flexbox item</i></a> is placed flush with the <a
|
|
href="#cross-end"><i>cross-end</i></a> edge of the line.
|
|
|
|
<dt><dfn id=flex-align-center>center</dfn>
|
|
|
|
<dd>The <a href="#flexbox-item"><i>flexbox item's</i></a> margin box is
|
|
centered in the <a href="#cross-axis"><i>cross axis</i></a> within the
|
|
line.
|
|
|
|
<dt><dfn id=flex-align-baseline>baseline</dfn>
|
|
|
|
<dd>
|
|
<p>If the <a href="#flexbox-item"><i>flexbox item's</i></a> inline axis
|
|
is the same as the <a href="#cross-axis"><i>cross axis</i></a>, this
|
|
value is identical to ‘<a href="#flex-line-pack-start"><code
|
|
class=css>start</code></a>’.</p>
|
|
|
|
<p>Otherwise, all <a href="#flexbox-item"><i>flexbox items</i></a> on the
|
|
line with ‘<code class=css>flex-align:baseline</code>’ that
|
|
don't run afoul of the previous paragraph are aligned such that their
|
|
baselines align, and the item with the largest distance between its
|
|
baseline and its <a href="#cross-start"><i>cross-start</i></a> margin
|
|
edge is placed flush against the <a
|
|
href="#cross-start"><i>cross-start</i></a> edge of the line.</p>
|
|
|
|
<dt><dfn id=flex-align-stretch>stretch</dfn>
|
|
|
|
<dd>
|
|
<p>If the <a href="#cross-size-property"><i>cross size property</i></a>
|
|
of the <a href="#flexbox-item"><i>flexbox item</i></a> is anything other
|
|
than ‘<code class=css>auto</code>’, this value is identical
|
|
to ‘<a href="#flex-line-pack-start"><code
|
|
class=css>start</code></a>’.</p>
|
|
|
|
<p>Otherwise, this value causes the <a
|
|
href="#cross-size-property"><i>cross size property</i></a> of the <a
|
|
href="#flexbox-item"><i>flexbox item</i></a> to resolve to the length
|
|
necessary to make the <a href="#cross-size"><i>cross size</i></a> of the
|
|
item's margin box the same size as the line.</p>
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>By using a vertical flexbox and ‘<a href="#flex-align0"><code
|
|
class=property>flex-align</code></a>’, we can emulate the
|
|
functionality of HTML's <code><center></code> element:</p>
|
|
|
|
<pre><div>
|
|
<div>foo foo foo foo</div>
|
|
<div>bar bar<br>bar bar</div>
|
|
<div>foo foo foo foo foo foo foo foo foo foo foo foo</div>
|
|
</div>
|
|
<style>
|
|
div {
|
|
display: flexbox;
|
|
flex-flow: column;
|
|
width: 200px;
|
|
}
|
|
div > div {
|
|
flex-align: center;
|
|
}
|
|
</style></pre>
|
|
|
|
<p><img alt="" src="images/basic-vertical-flexbox.png"></p>
|
|
</div>
|
|
|
|
<p class=issue>More examples for the other alignment values!
|
|
|
|
<p>The precise effects of this property are articulated in the <a
|
|
href="#layout-algorithm">Layout Algorithm</a> section.
|
|
|
|
<h2 id=multiline><span class=secno>6. </span> Multi-line Flexbox</h2>
|
|
|
|
<p>A flexbox can be either single-line or multi-line, depending on the
|
|
‘<a href="#flex-flow0"><code
|
|
class=property>flex-flow</code></a>’ property. A <dfn
|
|
id=single-line>single-line</dfn> flexbox lays out all of its children in a
|
|
single line, even if that would cause the flexbox to overflow its bounds.
|
|
A <dfn id=multi-line>multi-line</dfn> flexbox breaks its <a
|
|
href="#flexbox-item"><i>flexbox items</i></a> across multiple lines to
|
|
avoid overflowing, similar to how text is broken onto a new line when it
|
|
gets too wide to fit on the existing line. Every line contains at least
|
|
one <a href="#flexbox-item"><i>flexbox item</i></a>, unless the flexbox
|
|
itself is completely empty.
|
|
|
|
<p>When additional lines are created, they are stacked in the flexbox in
|
|
the <a href="#cross-axis"><i>cross axis</i></a>. Each line is completely
|
|
independent; flexible lengths and the ‘<a href="#flex-pack0"><code
|
|
class=property>flex-pack</code></a>’ and ‘<a
|
|
href="#flex-align0"><code class=property>flex-align</code></a>’
|
|
properties only pay attention to the items on a single line at a time. The
|
|
<a href="#main-size"><i>main size</i></a> of a line is the same as the <a
|
|
href="#main-size"><i>main size</i></a> of the flexbox's content box. The
|
|
<a href="#cross-size"><i>cross size</i></a> of a line depends on whether
|
|
the flexbox is <a href="#single-line"><i>single-line</i></a> or <a
|
|
href="#multi-line"><i>multi-line</i></a>: the <a
|
|
href="#cross-size"><i>cross size</i></a> of the sole line in a <a
|
|
href="#single-line"><i>single-line</i></a> flexbox is the same as the <a
|
|
href="#cross-size"><i>cross size</i></a> of the flexbox's content box,
|
|
while the <a href="#cross-size"><i>cross size</i></a> of a line in a <a
|
|
href="#multi-line"><i>multi-line</i></a> flexbox is the minimum size
|
|
necessary to contain the <a href="#flexbox-item"><i>flexbox items</i></a>
|
|
on the line, after aligning them with ‘<a href="#flex-align0"><code
|
|
class=property>flex-align</code></a>’. The lines themselves are then
|
|
aligned within a flexbox with the ‘<a href="#flex-line-pack0"><code
|
|
class=property>flex-line-pack</code></a>’ property.
|
|
|
|
<div class=example>
|
|
<p>This example shows four buttons that do not fit horizontally.</p>
|
|
|
|
<pre><style>
|
|
#div1 {
|
|
display: flexbox;
|
|
flex-flow: row wrap;
|
|
width: 300px;
|
|
}
|
|
button {
|
|
width: flex(80px 1);
|
|
}
|
|
<style>
|
|
|
|
<div id="div1">
|
|
<button id="button1">Elephant</button>
|
|
<button id="button2">Tiger</button>
|
|
<button id="button3">Antelope</button>
|
|
<button id="button4">Wildebeest</button>
|
|
</div></pre>
|
|
|
|
<p>The buttons are first set to their preferred widths, in this case 80
|
|
pixels. This will allow the first three buttons to fit in 240 pixels with
|
|
60 pixels left over of remaining space. Because the ‘<a
|
|
href="#flex-flow0"><code class=property>flex-flow</code></a>’
|
|
property specifies a multiline flexbox (due to the ‘<a
|
|
href="#flex-flow-wrap"><code class=css>wrap</code></a>’ keyword
|
|
appearing in its value), the flexbox will create an additional line to
|
|
contain the last button.</p>
|
|
|
|
<p>Flexibility is applied to each element, separately for each line. The
|
|
first line has 60 pixels of remaining space and all of the buttons have
|
|
the same flexibility, so each of the three buttons on that line will
|
|
receive 20 pixels of extra width, ending up 100px wide. The remaining
|
|
button is on a line of its own and will stretch to the entire width of
|
|
the line, or 300 pixels.</p>
|
|
|
|
<div style="width:300px; border:medium solid green; overflow: hidden;">
|
|
<button style="width:100px; float: left;">Elephant</button> <button
|
|
style="width:100px; float: left;">Tiger</button> <button
|
|
style="width:100px; float: left;">Antelope</button> <button
|
|
style="width:300px; float: left;">Wildebeest</button></div>
|
|
|
|
<p>If the box was resized, the buttons may rearrange onto different lines
|
|
as necessary.</p>
|
|
|
|
<p>If the style rules in the example above were changed to the following:</p>
|
|
|
|
<pre>
|
|
#div1 {
|
|
display: flexbox;
|
|
flex-flow: row wrap;
|
|
flex-pack: center;
|
|
width: 300px;
|
|
}
|
|
button {
|
|
width: flex(80px 1);
|
|
max-width: 90px;
|
|
}</pre>
|
|
|
|
<p>Similar to the previous example, the first three buttons will fit on
|
|
the first line, and the last button will wrap onto a new line. However,
|
|
when the buttons attempt to flex they can only grow to 90px each, due to
|
|
their ‘<code class=property>max-width</code>’ property. This
|
|
leaves 30px of free space on the first line and 210px of free space on
|
|
the second line. Because ‘<a href="#flex-pack0"><code
|
|
class=property>flex-pack</code></a>’ is set to ‘<a
|
|
href="#flex-line-pack-center"><code class=css>center</code></a>’,
|
|
the buttons will be centered on each line, with the free space split
|
|
equally on either side.</p>
|
|
|
|
<div style="width:300px; border:medium solid green; text-align:center;">
|
|
<button
|
|
style="width:90px; float: left; margin-left: 15px;">Elephant</button>
|
|
<button style="width:90px; float: left;">Tiger</button> <button
|
|
style="width:90px; float: left;">Antelope</button> <button
|
|
style="width:90px">Wildebeest</button></div>
|
|
</div>
|
|
|
|
<h3 id=flex-line-pack><span class=secno>6.1. </span> ‘<a
|
|
href="#flex-line-pack0"><code
|
|
class=property>flex-line-pack</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=flex-line-pack0>flex-line-pack</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>start | end | center | justify
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>start
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td><a href="#multi-line"><i>multi-line</i></a> flexboxes
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Computed Value:
|
|
|
|
<td>specified value
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
</table>
|
|
|
|
<p>The ‘<a href="#flex-line-pack0"><code
|
|
class=property>flex-line-pack</code></a>’ property aligns a
|
|
flexbox's lines within the flexbox when there is extra space in the <a
|
|
href="#cross-axis"><i>cross axis</i></a>, similar to how ‘<a
|
|
href="#flex-pack0"><code class=property>flex-pack</code></a>’ aligns
|
|
individual items within the <a href="#main-axis"><i>main axis</i></a>:
|
|
|
|
<dl>
|
|
<dt><dfn id=flex-line-pack-start>start</dfn>
|
|
|
|
<dd>Lines are packed toward the start of the flexbox. The <a
|
|
href="#cross-start"><i>cross-start</i></a> edge of the first line in the
|
|
flexbox is placed flush with the <a
|
|
href="#cross-start"><i>cross-start</i></a> edge of the flexbox, and each
|
|
subsequent line is placed flush with the preceding line.
|
|
|
|
<dt><dfn id=flex-line-pack-end>end</dfn>
|
|
|
|
<dd>Lines are packed toward the end of the flexbox. The <a
|
|
href="#cross-end"><i>cross-end</i></a> edge of the last line is placed
|
|
flush with the <a href="#cross-end"><i>cross-end</i></a> edge of the
|
|
flexbox, and each preceding line is placed flush with the subsequent
|
|
line.
|
|
|
|
<dt><dfn id=flex-line-pack-center>center</dfn>
|
|
|
|
<dd>Lines are packed toward the center of the flexbox. The lines in the
|
|
flexbox are placed flush with each other and aligned in the center of the
|
|
flexbox, with equal amounts of empty space between the <a
|
|
href="#cross-start"><i>cross-start</i></a> content edge of the flexbox
|
|
and the first line in the flexbox and between the <a
|
|
href="#cross-end"><i>cross-end</i></a> content edge of the flexbox and
|
|
the last line in the flexbox. (If the leftover free-space is negative,
|
|
the lines will overflow equally in both directions.)
|
|
|
|
<dt><dfn id=flex-line-pack-justify>justify</dfn>
|
|
|
|
<dd>Lines are evenly distributed in the flexbox. If the leftover
|
|
free-space is negative or there is only a single line in the flexbox,
|
|
this value is identical to ‘<a href="#flex-line-pack-start"><code
|
|
class=css>start</code></a>’. Otherwise, the <a
|
|
href="#cross-start"><i>cross-start</i></a> edge of the first line in the
|
|
flexbox is placed flush with the <a
|
|
href="#cross-start"><i>cross-start</i></a> content edge of the flexbox,
|
|
the <a href="#cross-end"><i>cross-end</i></a> edge of the last line in
|
|
the flexbox is placed flush with the <a
|
|
href="#cross-end"><i>cross-end</i></a> content edge of the flexbox, and
|
|
the remaining lines in the flexbox are distributed so that the empty
|
|
space between any two adjacent lines is the same.
|
|
</dl>
|
|
|
|
<p class=note>Note: Only <a href="#multi-line"><i>multi-line</i></a>
|
|
flexboxes ever have free space in the <a href="#cross-axis"><i>cross
|
|
axis</i></a> for lines to be aligned in, because in a <a
|
|
href="#single-line"><i>single-line</i></a> flexbox the sole line
|
|
automatically stretches to fill the space.
|
|
|
|
<p class=issue>TODO: examples
|
|
|
|
<h2 id=layout-algorithm><span class=secno>7. </span> Flexbox Layout
|
|
Algorithm</h2>
|
|
|
|
<p>This section contains normative algorithms detailing the exact layout
|
|
behavior of a flexbox and its contents. The algorithms here were designed
|
|
to optimize readability and theoretical simplicity, and may not
|
|
necessarily be the most efficient. Implementations may use whatever actual
|
|
algorithms they wish, but must produce the same results as the algorithms
|
|
described here.
|
|
|
|
<div class=issue>
|
|
<p>Here I'll outline the general structure of the layout algorithm, before
|
|
I go into the ugly details below.</p>
|
|
|
|
<ol>
|
|
<li>Reorder flexbox items according to ‘<a
|
|
href="#flex-order0"><code class=property>flex-order</code></a>’.
|
|
|
|
<li>
|
|
<p>Find the "hypothetical size" of every flexbox item.</p>
|
|
|
|
<p>Pretend that the flexbox is display:block, and still establishes a
|
|
BFC. Pretend that the flexbox item is the only child of the flexbox
|
|
(and also establishes a BFC). Resolve flexible widths/heights into
|
|
their preferred sizes. Resolve ‘<code
|
|
class=property>auto</code>’ widths/heights by shrinkwrapping
|
|
them. Using all this pretend knowledge, resolve the width and height.</p>
|
|
|
|
<li>Based on the hypothetical sizes of the items, find the real main size
|
|
of the flexbox and the hypothetical cross size.
|
|
|
|
<li>Based on both of these, linebreak the flexbox if it's multiline. (Or
|
|
does the possibility of linebreaking affect the main size of the
|
|
flexbox, in a shrinkwrapping way?)
|
|
|
|
<li>Resolve any flexible lengths. All items now have a real main size.
|
|
|
|
<li>Align in the main axis, per ‘<a href="#flex-pack0"><code
|
|
class=property>flex-pack</code></a>’.
|
|
|
|
<li>Based on ‘<a href="#flex-align0"><code
|
|
class=property>flex-align</code></a>’, find the real cross size of
|
|
the flexbox, its lines, and the items.
|
|
|
|
<li>Align in the cross axis, per ‘<a href="#flex-align0"><code
|
|
class=property>flex-align</code></a>’.
|
|
|
|
<li>Align the lines, per ‘<a href="#flex-line-pack0"><code
|
|
class=property>flex-line-pack</code></a>’.
|
|
</ol>
|
|
|
|
<p>Note that if any "hypothetical" size is a definite length or
|
|
percentage, it's actually a real size immediately and won't change (well,
|
|
aside from flexing). The hypothetical calculations are meant to give
|
|
intermediate results in the presence of ‘<code
|
|
class=css>auto</code>’ values (and others?), so I can do other
|
|
calculations that depend on those lengths.</p>
|
|
</div>
|
|
|
|
<h2 id=pagination><span class=secno>8. </span> Page breaks in flexbox</h2>
|
|
|
|
<p class=issue>TODO: define how flexbox should break on pages, columns,
|
|
etc. This may or may not be normative until there is more than one
|
|
implementation.
|
|
|
|
<p>Very roughly:
|
|
|
|
<ul>
|
|
<li>Flexboxes can beak across pages between items, between rows of items
|
|
(in multi-line mode) and inside items, as long as ‘<code
|
|
class=property>break-</code>’ property allow that. All ‘<code
|
|
class=property>break-</code>’ properties are supported on flexbox,
|
|
on flexbox items and inside flexbox items.
|
|
|
|
<li>Breaking behavior of a single-line vertical flexbox should be
|
|
identical to a block in normal flow where children have same sizes and
|
|
positions (e.g. explicitly set to match computed values in flexbox), same
|
|
content and same breaking properties. <span class=issue>This is good goal
|
|
or guidance, but not necessarily good normative definition. Get
|
|
specific.</span>
|
|
|
|
<li>Breaking behavior of a horizontal single-line flexbox should be
|
|
similar (not necessarily identical) to that of a single-row table with
|
|
same sizing.
|
|
|
|
<li>In horizontal flexbox, a forced break within an items causes
|
|
subsequent content of that item to go to next container, but it doesn't
|
|
affect sibling items or their content.
|
|
|
|
<li>In horizontal multi-line flexbox, values of ‘<code
|
|
class=property>break-before</code>’ and ‘<code
|
|
class=property>break-after</code>’ for each line are computed from
|
|
combinatoin of properties on children that fit in that line (or would
|
|
have fit, given available width and infinite height)
|
|
</ul>
|
|
|
|
<p class=issue>TODO: define breaking of vertical multi-line flexbox
|
|
|
|
<p class=issue>TODO: add more detail: how breaking affect sizing (for
|
|
broken boxes and boxes after the break) and alignment
|
|
|
|
<h2 id=layout-interface><span class=secno>9. </span> Box Properties and
|
|
Sizing</h2>
|
|
|
|
<p class=issue>Define how flexboxes are sized, paying attention to
|
|
width/height keywords on both the flexbox and flexbox items, the writing
|
|
modes of both the flexbox and flexbox items, and the flexbox direction.
|
|
|
|
<hr title="Separator from footer">
|
|
|
|
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
|
|
|
|
<p>[This section will contain further acknowledgments.]
|
|
|
|
<p>Thanks for feedback from James Elmore and Shinichiro Hamaji.
|
|
|
|
<h2 class=no-num id=references>References</h2>
|
|
|
|
<h3 class=no-num id=normative>Normative references</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 class=no-num id=informative>Other references</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
|
|
<h2 class=no-num id=property>Property index</h2>
|
|
<!--begin-properties-->
|
|
|
|
<table class=proptable>
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th><span class=property>display</span>
|
|
|
|
<td>flexbox | inline-flexbox
|
|
|
|
<tr>
|
|
<th><a class=property href="#flex-align0">flex-align</a>
|
|
|
|
<td>start | end | center | baseline | stretch
|
|
|
|
<td>stretch
|
|
|
|
<td>flexbox items
|
|
|
|
<td>no
|
|
|
|
<td>specified value
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#flex-flow0">flex-flow</a>
|
|
|
|
<td>[ row | row-reverse | column | column-reverse ] [ wrap |
|
|
wrap-reverse ]?
|
|
|
|
<td>row
|
|
|
|
<td>flexboxes
|
|
|
|
<td>no
|
|
|
|
<td>specified value
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#flex-line-pack0">flex-line-pack</a>
|
|
|
|
<td>start | end | center | justify
|
|
|
|
<td>start
|
|
|
|
<td>multi-line flexboxes
|
|
|
|
<td>no
|
|
|
|
<td>specified value
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#flex-order0">flex-order</a>
|
|
|
|
<td><number>
|
|
|
|
<td>0
|
|
|
|
<td>flexbox items
|
|
|
|
<td>no
|
|
|
|
<td>specified value
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#flex-pack0">flex-pack</a>
|
|
|
|
<td>start | end | center | justify
|
|
|
|
<td>start
|
|
|
|
<td>flexboxes
|
|
|
|
<td>no
|
|
|
|
<td>specified value
|
|
|
|
<td>visual
|
|
</table>
|
|
<!--end-properties-->
|
|
|
|
<h2 class=no-num id=index>Index</h2>
|
|
<!--begin-index-->
|
|
|
|
<ul class=indexlist>
|
|
<li>baseline, <a href="#flex-align-baseline"
|
|
title=baseline><strong>5.2.</strong></a>
|
|
|
|
<li>center, <a href="#flex-align-center"
|
|
title=center><strong>5.2.</strong></a>, <a href="#flex-line-pack-center"
|
|
title=center><strong>6.1.</strong></a>, <a href="#flex-pack-center"
|
|
title=center><strong>5.1.</strong></a>
|
|
|
|
<li>column, <a href="#flex-flow-column"
|
|
title=column><strong>3.1.</strong></a>
|
|
|
|
<li>column-reverse, <a href="#flex-flow-column-reverse"
|
|
title=column-reverse><strong>3.1.</strong></a>
|
|
|
|
<li>cross axis, <a href="#cross-axis"
|
|
title="cross axis"><strong>2.</strong></a>
|
|
|
|
<li>cross-end, <a href="#cross-end"
|
|
title=cross-end><strong>2.</strong></a>
|
|
|
|
<li>cross size, <a href="#cross-size"
|
|
title="cross size"><strong>2.</strong></a>
|
|
|
|
<li>cross size property, <a href="#cross-size-property"
|
|
title="cross size property"><strong>2.</strong></a>
|
|
|
|
<li>cross-start, <a href="#cross-start"
|
|
title=cross-start><strong>2.</strong></a>
|
|
|
|
<li>end, <a href="#flex-align-end" title=end><strong>5.2.</strong></a>, <a
|
|
href="#flex-line-pack-end" title=end><strong>6.1.</strong></a>, <a
|
|
href="#flex-pack-end" title=end><strong>5.1.</strong></a>
|
|
|
|
<li>flex-align, <a href="#flex-align0"
|
|
title=flex-align><strong>5.2.</strong></a>
|
|
|
|
<li>flexbox, <a href="#flexbox" title=flexbox><strong>2.</strong></a>
|
|
|
|
<li>flexbox item, <a href="#flexbox-item"
|
|
title="flexbox item"><strong>2.</strong></a>
|
|
|
|
<li>flexbox items, <a href="#flexbox-item"
|
|
title="flexbox items"><strong>2.</strong></a>
|
|
|
|
<li>flexbox item's, <a href="#flexbox-item"
|
|
title="flexbox item's"><strong>2.</strong></a>
|
|
|
|
<li>flex-flow, <a href="#flex-flow0"
|
|
title=flex-flow><strong>3.1.</strong></a>
|
|
|
|
<li>flexible length, <a href="#flexible-length"
|
|
title="flexible length"><strong>4.</strong></a>, <a
|
|
href="#flexible-length0"
|
|
title="flexible length"><strong>4.1.</strong></a>
|
|
|
|
<li>flexible lengths, <a href="#flexible-length0"
|
|
title="flexible lengths"><strong>4.1.</strong></a>
|
|
|
|
<li>flexible length's, <a href="#flexible-length0"
|
|
title="flexible length's"><strong>4.1.</strong></a>
|
|
|
|
<li>flex-line-pack, <a href="#flex-line-pack0"
|
|
title=flex-line-pack><strong>6.1.</strong></a>
|
|
|
|
<li>flex-order, <a href="#flex-order0"
|
|
title=flex-order><strong>3.2.</strong></a>
|
|
|
|
<li>flex-pack, <a href="#flex-pack0"
|
|
title=flex-pack><strong>5.1.</strong></a>
|
|
|
|
<li>hypothetical neighbors, <a href="#hypothetical-neighbors"
|
|
title="hypothetical neighbors"><strong>2.2.1.</strong></a>
|
|
|
|
<li>justify, <a href="#flex-line-pack-justify"
|
|
title=justify><strong>6.1.</strong></a>, <a href="#flex-pack-justify"
|
|
title=justify><strong>5.1.</strong></a>
|
|
|
|
<li>main axis, <a href="#main-axis"
|
|
title="main axis"><strong>2.</strong></a>
|
|
|
|
<li>main-end, <a href="#main-end" title=main-end><strong>2.</strong></a>
|
|
|
|
<li>main size, <a href="#main-size"
|
|
title="main size"><strong>2.</strong></a>
|
|
|
|
<li>main size property, <a href="#main-size-property"
|
|
title="main size property"><strong>2.</strong></a>
|
|
|
|
<li>main-start, <a href="#main-start"
|
|
title=main-start><strong>2.</strong></a>
|
|
|
|
<li>multi-line, <a href="#multi-line"
|
|
title=multi-line><strong>6.</strong></a>
|
|
|
|
<li>negative flexibility, <a href="#negative-flexibility"
|
|
title="negative flexibility"><strong>4.1.</strong></a>
|
|
|
|
<li>positive flexibility, <a href="#positive-flexibility"
|
|
title="positive flexibility"><strong>4.1.</strong></a>
|
|
|
|
<li>preferred size, <a href="#preferred-size"
|
|
title="preferred size"><strong>4.1.</strong></a>
|
|
|
|
<li>row, <a href="#flex-flow-row" title=row><strong>3.1.</strong></a>
|
|
|
|
<li>row-reverse, <a href="#flex-flow-row-reverse"
|
|
title=row-reverse><strong>3.1.</strong></a>
|
|
|
|
<li>single-line, <a href="#single-line"
|
|
title=single-line><strong>6.</strong></a>
|
|
|
|
<li>start, <a href="#flex-align-start"
|
|
title=start><strong>5.2.</strong></a>, <a href="#flex-line-pack-start"
|
|
title=start><strong>6.1.</strong></a>, <a href="#flex-pack-start"
|
|
title=start><strong>5.1.</strong></a>
|
|
|
|
<li>stretch, <a href="#flex-align-stretch"
|
|
title=stretch><strong>5.2.</strong></a>
|
|
|
|
<li>wrap, <a href="#flex-flow-wrap" title=wrap><strong>3.1.</strong></a>
|
|
|
|
<li>wrap-reverse, <a href="#flex-flow-wrap-reverse"
|
|
title=wrap-reverse><strong>3.1.</strong></a>
|
|
</ul>
|
|
<!--end-index-->
|
|
</html>
|
|
<!-- 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
|
|
sgml-omittag:nil
|
|
sgml-shorttag:nil
|
|
sgml-namecase-general:t
|
|
sgml-general-insert-case:lower
|
|
sgml-always-quote-attributes:t
|
|
sgml-indent-step:nil
|
|
sgml-indent-data:t
|
|
sgml-parent-document:nil
|
|
sgml-exposed-tags:nil
|
|
sgml-local-catalogs:nil
|
|
sgml-local-ecat-files:nil
|
|
End:
|
|
-->
|