E788 csswg-drafts/css-flexbox/Overview.html at 8ff9e16e9e737649b0135548dabcd96be671dc95 · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
4517 lines (3529 loc) · 169 KB

Overview.html

File metadata and controls

4517 lines (3529 loc) · 169 KB
<dt>Authors and former editors:
<dd class="p-author h-card"><span class=p-name>Alex Mogilevsky</span>,
<span class=p-org>Microsoft Corporation</span>, <a class=u-email
href="mailto:alexmog@microsoft.com">alexmog@microsoft.com</a>
<dd class="p-author h-card"><span class=p-name>L. David Baron</span>,
<span class=p-org>Mozilla Corporation</span>, <a class=u-email
href="mailto:dbaron@dbaron.org">dbaron@dbaron.org</a>
<dd class="p-author h-card"><span class=p-name>Neil Deakin</span>, <span
class=p-org>Mozilla Corporation</span>, <a class=u-email
href="mailto:enndeakin@gmail.com">enndeakin@gmail.com</a>
<dd class="p-author h-card"><span class=p-name>Ian Hickson</span>,
formerly of Opera Software, <a class=u-email
href="mailto:ian@hixie.ch">ian@hixie.ch</a>
<dd class="p-author h-card"><span class=p-name>David Hyatt</span>,
formerly of Netscape Corporation, <a class=u-email
href="mailto:hyatt@apple.com">hyatt@apple.com</a>
<dt>Test Suite:
<dd><a
href="http://test.csswg.org/suites/css3-flexbox/nightly-unstable/">http://test.csswg.org/suites/css3-flexbox/nightly-unstable/</a>
</dl>
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><abbr
title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
href="http://www.ercim.eu/"><abbr
title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="http://www.keio.ac.jp/">Keio</a>, <a
href="http://ev.buaa.edu.cn/">Beihang</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> <span class=p-summary> The specification describes a CSS box model
optimized for user interface design. In the flex layout model, the
children of a flex container can be laid out in any direction, and can
"flex" their sizes, either growing to fill unused space or shrinking to
avoid overflowing the parent. </span> Both horizontal and vertical
alignment of the children can be easily manipulated. Nesting of these
boxes (horizontal inside vertical, or vertical inside horizontal) can be
used to build layouts in two dimensions.
<h2 class="no-num no-toc" id=status>Status of this document</h2>
<!--begin-status-->
<p>This is a public copy of the editors' draft. It is provided for
discussion only and may change at any moment. Its publication here does
not imply endorsement of its contents by W3C. Don't cite this document
other than as 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?Subject=%5Bcss3-flexbox%5D%20PUT%20SUBJECT%20HERE">
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-->
<p>The CR period will last at least until 20 March 2013. At the time of
publication, no test suite and implementation report have yet been made.
They will be made available from the <a href="/Style/CSS/Test/">CSS test
suites page</a>. See the section <a href="#cr-exit-criteria">“CR exit
criteria”</a> for details.
<p>See the section <a href="#changes">“Changes”</a> for changes made to
this specification since the last Working Draft.
<p> The following features are at-risk:
<ul>
<li>Calculation of the static position of absolutely-positioned flex
items.
</ul>
<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>
<ul class=toc>
<li><a href="#overview"><span class=secno>1.1. </span> Overview</a>
<li><a href="#placement"><span class=secno>1.2. </span> Module
interactions</a>
<li><a href="#values"><span class=secno>1.3. </span> Values</a>
</ul>
<li><a href="#box-model"><span class=secno>2. </span> Flex Layout Box
Model and Terminology</a>
<li><a href="#flex-containers"><span class=secno>3. </span> Flex
Containers: the ‘<code class=css>flex</code>’ and ‘<code
class=css>inline-flex</code>’ ‘<code class=property>display</code>’
values</a>
<li><a href="#flex-items"><span class=secno>4. </span> Flex Items</a>
<ul class=toc>
<li><a href="#abspos-items"><span class=secno>4.1. </span>
Absolutely-Positioned Flex Children</a>
<li><a href="#item-margins"><span class=secno>4.2. </span> Flex Item
Margins and Paddings</a>
<li><a href="#painting"><span class=secno>4.3. </span> Flex Item
Z-Ordering</a>
<li><a href="#visibility-collapse"><span class=secno>4.4. </span>
Collapsed Items</a>
</ul>
<li><a href="#flow-order"><span class=secno>5. </span> Ordering and
Orientation</a>
<ul class=toc>
<li><a href="#flex-direction-property"><span class=secno>5.1. </span>
Flex Flow Direction: the ‘<code
class=property>flex-direction</code>’ property</a>
<li><a href="#flex-wrap-property"><span class=secno>5.2. </span> Flex
Line Wrapping: the ‘<code class=property>flex-wrap</code>’
property</a>
<li><a href="#flex-flow-property"><span class=secno>5.3. </span> Flex
Direction and Wrap: the ‘<code class=property>flex-flow</code>’
shorthand</a>
<li><a href="#order-property"><span class=secno>5.4. </span> Display
Order: the ‘<code class=property>order</code>’ property</a>
<ul class=toc>
<li><a href="#order-accessibility"><span class=secno>5.4.1. </span>
Reordering and Accessibility</a>
</ul>
</ul>
<li><a href="#flex-lines"><span class=secno>6. </span> Flex Lines</a>
<li><a href="#flexibility"><span class=secno>7. </span> Flexibility</a>
<ul class=toc>
<li><a href="#flex-property"><span class=secno>7.1. </span> The ‘<code
class=property>flex</code>’ Shorthand</a>
<li><a href="#flex-common"><span class=secno>7.2. </span> Common Values
of ‘<code class=property>flex</code>’</a>
<li><a href="#flex-components"><span class=secno>7.3. </span> Components
of Flexibility</a>
<ul class=toc>
<li><a href="#flex-grow-property"><span class=secno>7.3.1. </span> The
‘<code class=property>flex-grow</code> 40FE ;’ property</a>
<li><a href="#flex-shrink-property"><span class=secno>7.3.2. </span>
The ‘<code class=property>flex-shrink</code>’ property</a>
<li><a href="#flex-basis-property"><span class=secno>7.3.3. </span>
The ‘<code class=property>flex-basis</code>’ property</a>
</ul>
</ul>
<li><a href="#alignment"><span class=secno>8. </span> Alignment</a>
<ul class=toc>
<li><a href="#auto-margins"><span class=secno>8.1. </span> Aligning with
‘<code class=css>auto</code>’ margins</a>
<li><a href="#justify-content-property"><span class=secno>8.2. </span>
Axis Alignment: the ‘<code class=property>justify-content</code>’
property</a>
<li><a href="#align-items-property"><span class=secno>8.3. </span>
Cross-axis Alignment: the ‘<code class=property>align-items</code>’
and ‘<code class=property>align-self</code>’ properties</a>
<li><a href="#align-content-property"><span class=secno>8.4. </span>
Packing Flex Lines: the ‘<code class=property>align-content</code>’
property</a>
<li><a href="#flex-baselines"><span class=secno>8.5. </span> Flex
Baselines</a>
</ul>
<li><a href="#layout-algorithm"><span class=secno>9. </span> Flex Layout
Algorithm</a>
<ul class=toc>
<li><a href="#box-manip"><span class=secno>9.1. </span> Initial
Setup</a>
<li><a href="#line-sizing"><span class=secno>9.2. </span> Line Length
Determination</a>
<li><a href="#main-sizing"><span class=secno>9.3. </span> Main Size
Determination</a>
<li><a href="#cross-sizing"><span class=secno>9.4. </span> Cross Size
Determination</a>
<li><a href="#main-alignment"><span class=secno>9.5. </span> Main-Axis
Alignment</a>
<li><a href="#cross-alignment"><span class=secno>9.6. </span> Cross-Axis
Alignment</a>
<li><a href="#resolve-flexible-lengths"><span class=secno>9.7. </span>
Resolving Flexible Lengths</a>
<li><a href="#intrinsic-sizes"><span class=secno>9.8. </span> Intrinsic
Sizes</a>
</ul>
<li><a href="#pagination"><span class=secno>10. </span> Fragmenting Flex
Layout</a>
<u 3F20 l class=toc>
<li><a href="#pagination-algo"><span class=secno>10.1. </span> Sample
Flex Fragmentation Algorithm</a>
</ul>
<li><a href="#conformance"><span class=secno>11. </span> Conformance</a>
<ul class=toc>
<li><a href="#conventions"><span class=secno>11.1. </span> Document
conventions</a>
<li><a href="#conformance-classes"><span class=secno>11.2. </span>
Conformance classes</a>
<li><a href="#partial"><span class=secno>11.3. </span> Partial
implementations</a>
<li><a href="#experimental"><span class=secno>11.4. </span> Experimental
implementations</a>
<li><a href="#testing"><span class=secno>11.5. </span> Non-experimental
implementations</a>
<li><a href="#cr-exit-criteria"><span class=secno>11.6. </span> CR exit
criteria</a>
</ul>
<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="#changes">Changes</a>
<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><em>This section is not normative.</em>
<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:
<ul class=compact>
<li>block layout, designed for laying out documents
<li>inline layout, designed for laying out text
<li>table layout, designed for laying out 2D data in a tabular format
<li>positioned layout, designed for very explicit positioning without much
regard for other elements in the document
</ul>
<p> This module introduces a new layout mode, <dfn id=flex-layout>flex
layout</dfn>, which is designed for laying out more complex applications
and webpages.
<h3 id=overview><span class=secno>1.1. </span> Overview</h3>
<p><em>This section is not normative.</em>
<p> Flex layout is superficially similar to block layout. It lacks many of
the more complex text- or document-centric properties that can be used in
block layout, such as <a
href="http://www.w3.org/TR/CSS21/visuren.html#floats">floats</a> and <a
href="http://www.w3.org/TR/css3-multicol/">columns</a>. In return it gains
simple and powerful tools for distributing space and aligning content in
ways that webapps and complex web pages often need. The contents of a flex
container:
<ul>
<li> can be laid out in any <a href="#flex-direction-property">flow
direction</a> (leftwards, rightwards, downwards, or even upwards!)
<li> can have their display order <a
href="#flex-flow-row-reverse">reversed</a> or <a
href="#order-property">rearranged</a> at the style layer (i.e., visual
order can be independent of source and speech order)
<li> can be laid out linearly along a single (<a href="#main-axis"><i
title="main axis">main</i></a>) axis or <a
href="#flex-wrap-property">wrapped</a> into multiple lines along a
secondary (<a href="#cross-axis"><i title="cross axis">cross</i></a>)
axis
<li> can <a href="#flexibility">“flex” their sizes</a> to respond to
the available space
<li> can be <a href="#alignment">aligned</a> with respect to their
container or each other
<li> can be dynamically <a href="#visibility-collapse">collapsed</a> or
uncollapsed along the <a href="#main-axis"><i>main axis</i></a> while
preserving the container's <a href="#cross-size"><i>cross size</i></a>
</ul>
<div class=example>
<p> Here's an example of a catalog where each item has a title, an photo,
a description, and a purchase button. The designer's intention is that
each entry has the same overall size, that the photo be above the text,
and that the purchase buttons aligned at the bottom, regardless of the
length of the item's description. Flex layout makes many aspects of this
design easy:
<ul>
<li> The catalog uses flex layout to lay out rows of items horizontally,
and to ensure that items within a row are all equal-height. Each entry
is then itself a column flex container, laying out its contents
vertically.
<li> Within each entry, the source document content is ordered logically
with the title first, followed by the description and the photo. This
provides a sensible ordering for speech rendering and in non-CSS
browsers. For a more compelling visual presentation, however, ‘<a
href="#order"><code class=property>order</code></a>’ is used to pull
the image up from later in the content to the top, and ‘<a
href="#align-self"><code class=property>align-self</code></a>’ is used
to center it horizontally.
<li> An <a href="#auto-margins">‘<code class=css>auto</code>’
margin</a> above the purchase button forces it to the bottom within each
entry box, regardless of the height of that item's description.
</ul>
<pre>
&lt;style>
#deals {
display: flex; /* Flex layout so items <a
href="#align-self"
title="Flex items stretch by default.">have equal height</a> */
flex-flow: row wrap; /* <a
href="http://dev.w3.org/csswg/css3-flexbox/#flex-flow-property">Allow items to wrap into multiple lines</a> */
}
.sale-item {
display: flex; /* Lay out each item using flex layout */
flex-flow: column; /* <a
href="#flex-flow-property">Lay out item's contents vertically</a> */
}
.sale-item > img {
order: -1; /* <a
href="#order-property">Shift image before other content (in visual order)</a> */
align-self: center; /* <a
href="#align-self">Center the image cross-wise (horizontally)</a> */
}
.sale-item > button {
margin-top: auto; /* <a
href="#auto-margins">Auto top margin pushes button to bottom</a> */
}
&lt;/style></pre>
<pre>
&lt;section id='deals'>
&lt;section class='sale-item'>
&lt;h1>Computer Starter Kit&lt;/h1>
&lt;p>This is the best computer money can buy, if you don't have much money.
&lt;ul>
&lt;li>Computer
&lt;li>Monitor
&lt;li>Keyboard
&lt;li>Mouse
&lt;/ul>
&lt;img src='images/computer.jpg'
alt='You get: a white computer with matching peripherals.'>
&lt;button>BUY NOW&lt;/button>
&lt;/section>
&lt;section class='sale-item'>
…
&lt;/section>
…
&lt;/section></pre>
<figure>
<div id=overview-example>
<div class=col></div>
<div class=col></div>
<div class=desc> <img
alt="You get: a white computer with matching keyboard and monitor."
src="images/computer.jpg">
<h1 style="font-size: 1.4em;">Computer Starter Kit</h1>
<p> This is the best computer money can buy, if you don't have much
money.
<ul>
<li>Computer
<li>Monitor
<li>Keyboard
<li>Mouse
</ul>
</div>
<div class=desc> <img alt="You get: beautiful ASCII art."
src="images/printer.png">
<h1 style="font-size: 1.4em;">Printer</h1>
<p> Only capable of printing ASCII art.
<ul>
<li>Paper and ink not included.
</ul>
</div>
<div class=buttons>
<div><button>BUY NOW</button></div>
<div><button>BUY NOW</button></div>
</div>
</div>
<figcaption> An example rendering of the code above. </figcaption>
</figure></div>
<h3 id=placement><span class=secno>1.2. </span> Module interactions</h3>
<p> This module extends the definition of the ‘<code
class=property>display</code>’ property <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, adding a new block-level and
new inline-level display type, and defining a new type of formatting
context along with properties to control its layout. None of the
properties defined in this module apply to the ‘<code
class=css>::first-line</code>’ or ‘<code
class=css>::first-letter</code>’ pseudo-elements.
<h3 id=values><span class=secno>1.3. </span> Values</h3>
<p> This specification follows the <a
href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
definition conventions</a> from <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
this specification are defined in CSS Level 2 Revision 1 <a
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
modules may expand the definitions of these value types: for example <a
href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{CSS3VAL}}--></a>, when
combined with this module, expands the definition of the
<var>&lt;length&gt;</var> value type as used in this specification.
<p>In addition to the property-specific values listed in their definitions,
all properties defined in this specification also accept the <a
href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">‘<code
class=css>inherit</code>’</a> keyword as their property value. For
readability it has not been repeated explicitly.
<h2 id=box-model><span class=secno>2. </span> Flex Layout Box Model and
Terminology</h2>
3F20
<p> An element with ‘<code class=css>display:flex</code>’ or ‘<code
class=css>display:inline-flex</code>’ is a <a
href="#flex-container"><i>flex container</i></a>. Children of a flex
container are called <a href="#flex-item"><i>flex items</i></a> and are
laid out using the flex layout model.
<p> Unlike block and inline layout, whose layout calculations are biased to
the <a href="http://www.w3.org/TR/css3-writing-modes/#abstract-box">block
and inline flow directions</a>, flex layout is biased to the <a
href="#flex-flow-property">flex flow</a> directions. To make it easier to
talk about flex layout, this section defines a set of flex flow–relative
terms. The ‘<a href="#flex-flow"><code
class=property>flex-flow</code></a>’ value determines how these terms
map to physical directions (top/right/bottom/left), axes
(vertical/horizontal), and sizes (width/height). <figure> <img alt=alt
height=277 src="images/flex-direction-terms.svg" width=665> <figcaption>
An illustration of the various directions and sizing terms as applied to a
‘<a href="#flex-flow-row"><code class=css>row</code></a>’ flex
container. </figcaption> </figure>
<dl id=main>
<dt class=axis title="main axis|main-axis">main axis
<dt class=axis>main dimension
<dd> The <dfn id=main-axis>main axis</dfn> of a flex container is the
primary axis along which <a href="#flex-item"><i>flex items</i></a> are
laid out. It extends in the <dfn id=main-dimension>main dimension</dfn>.
<dt class=side>main-start
<dt class=side>main-end
<dd> The <a href="#flex-item"><i>flex items</i></a> are placed within the
container starting on the <dfn id=main-start>main-start</dfn> side and
going toward the <dfn id=main-end>main-end</dfn> side.
<dt class=size>main size
<dt class=size>main size property
<dd> A <a href="#flex-item"><i>flex item</i></a>&apos;s width or height,
whichever is in the <a href="#main-dimension"><i>main dimension</i></a>,
is the item's <dfn id=main-size>main size</dfn>. The <a
href="#flex-item"><i>flex item</i></a>&apos;s <dfn
id=main-size-property>main size property</dfn> is either the ‘<code
class=property>width</code>’ or ‘<code
class=property>height</code>’ property, whichever is in the <a
href="#main-dimension"><i>main dimension</i></a>.
</dl>
<dl id=cross>
<dt class=axis title="cross axis|cross-axis">cross axis
<dt class=axis>cross dimension
<dd> The axis perpendicular to the <a href="#main-axis"><i>main
axis</i></a> is called the <dfn id=cross-axis>cross axis</dfn>. It
extends in the <dfn id=cross-dimension>cross dimension</dfn>.
<dt class=side>cross-start
<dt class=side>cross-end
<dd> <i>Flex lines</i> are filled with items and placed into the container
starting on the <dfn id=cross-start>cross-start</dfn> side of the flex
container and going toward the <dfn id=cross-end>cross-end</dfn> side.
<dt class=size>cross size
<dt class=size>cross size property
<dd> The width or height of a <a href="#flex-item"><i>flex item</i></a>,
whichever is in the <a href="#cross-dimension"><i>cross
dimension</i></a>, is the item's <dfn id=cross-size>cross size</dfn>. The
<dfn id=cross-size-property>cross size property</dfn> is whichever of
‘<code class=property>width</code>’ or ‘<code
class=property>height</code>’ that is in the <a
href="#cross-dimension"><i>cross dimension</i></a>.
</dl>
<h2 id=flex-containers><span class=secno>3. </span> Flex Containers: the <a
href="#display-flex">‘<code class=css>flex</code>’</a> and <a
href="#display-inline-flex">‘<code class=css>inline-flex</code>’</a>
‘<code class=property>display</code>’ values</h2>
<table class=propdef>
<tbody>
<tr>
<th>Name:
<td>display
<tr>
<th><a href="#values">New Values</a>:
<td>flex | inline-flex
</table>
<dl>
<dt><dfn id=display-flex>‘<code class=css>flex</code>’</dfn>
<dd> This value causes an element to generate a block-level <a
href="#flex-container"><i>flex container</i></a> box.
<dt><dfn id=display-inline-flex>‘<code
class=css>inline-flex</code>’</dfn>
<dd> This value causes an element to generate an inline-level <a
href="#flex-container"><i>flex container</i></a> box.
</dl>
<p> A <dfn id=flex-container>flex container</dfn> establishes a new <dfn
id=flex-formatting-context>flex formatting context</dfn> for its contents.
This is the same as establishing a block formatting context, except that
flex layout is used instead of block layout: floats do not intrude into
the flex container, and the flex container's margins do not collapse with
the margins of its contents. <a href="#flex-container"><i>Flex
containers</i></a> form a containing block for their contents <a
href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">exactly
like block containers do</a>. <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> The ‘<code
class=property>overflow</code>’ property applies to <a
href="#flex-container"><i>flex containers</i></a>.
<p> Flex containers are not block containers, and so some properties that
were designed with the assumption of block layout don't apply in the
context of flex layout. In particular:
<ul>
<li> all of the ‘<code class=css>column-*</code>’ properties in the
Multicol module have no effect on a flex container.
<li> ‘<code class=property>float</code>’ and ‘<code
class=property>clear</code>’ have no effect on a <a
href="#flex-item"><i>flex item</i></a>. (However, the ‘<code
class=property>float</code>’ property still affects the computed value
of ‘<code class=property>display</code>’ on children of a flex
container, as this occurs <em title="">before</em> <a
href="#flex-item"><i>flex items</i></a> are determined.)
<li> ‘<code class=property>vertical-align</code>’ has no effect on a
flex item.
<li> the ‘<code class=css>::first-line</code>’ and ‘<code
class=css>::first-letter</code>’ pseudo-elements do not apply to <a
href="#flex-container"><i>flex containers</i></a>.
</ul>
<p> If an element's specified ‘<code class=property>display</code>’ is
‘<a href="#display-inline-flex"><code
class=css>inline-flex</code></a>’ and the element is floated or
absolutely positioned, the computed value of ‘<code
class=property>display</code>’ is <a href="#display-flex">‘<code
class=css>flex</code>’</a>. The table in <a
href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Chapter
9.7</a> is thus amended to contain an additional row, with ‘<a
href="#display-inline-flex"><code class=css>inline-flex</code></a>’ in
the "Specified Value" column and <a href="#display-flex">‘<code
class=css>flex</code>’</a> in the "Computed Value" column.
<h2 id=flex-items><span class=secno>4. </span> Flex Items</h2>
<p> The contents of a <a href="#flex-container"><i>flex container</i></a>
consists of zero or more <dfn id=flex-item title="flex item">flex
items</dfn>: each in-flow child of a <a href="#flex-container"><i>flex
container</i></a> becomes a <a href="#flex-item"><i>flex item</i></a>, and
each contiguous run of text that is directly contained inside a <a
href="#flex-container"><i>flex container</i></a> is wrapped in an
anonymous <a href="#flex-item"><i>flex item</i></a>. However, an anonymous
flex item that contains only <a
href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">white
space</a> is not rendered, as if it were ‘<code
class=css>display:none</code>’.
<p class=note> Authors reading this spec may want to <a
href="#item-margins">skip past these box-generation details</a>.
<p> A <a href="#flex-item"><i>flex item</i></a> establishes a new
formatting context for its contents. The type of this formatting context
is determined by its ‘<code class=property>display</code>’ value, as
usual. The computed ‘<code class=property>display</code>’ of a <a
href="#flex-item"><i>flex item</i></a> is determined by applying the table
in <a href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1
Chapter 9.7</a> (except that internal table elements are instead handled
by anonymous box fixup, see below). However, flex items are flex-level
boxes, not block-level boxes: they participate in their container's flex
formatting context, not in a block formatting context.
<p class=note> The ‘<code class=property>display</code>’ computation on
flex items as defined here is expected to be superseded by a future
specification that defines a new ‘<code class=property>display</code>’
value specific to flex items.
<div class=example>
<p>Examples of flex items:
<pre>
&lt;div style="display:flex">
&lt;!-- flex item: block child -->
&lt;div id="item1">block&lt;/div>
&lt;!-- flex item: floated element; floating is ignored -->
&lt;div id="item2" style="float: left;">float&lt;/div>
&lt;!-- flex item: anonymous block box around inline content -->
anonymous item 3
&lt;!-- flex item: inline child -->
&lt;span>
item 4
&lt;!-- flex items do not split around blocks -->
&lt;div id=not-an-item>item 4&lt;/div>
item 4
&lt;/span>
View remainder of file in raw view