8000 csswg-drafts/css-flexbox/Overview.bs at ec4ebc3f29e82901c5414bb44aea523289a4d50f · w3c/csswg-drafts · GitHub
Skip to content

Overview.bs

Latest commit

 

History

History
4432 lines (3883 loc) · 190 KB

Overview.bs

File metadata and controls

4432 lines (3883 loc) · 190 KB
<div class='example'>
Here's an example of a catalog where each item has a title, a 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:
* 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.
* 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,
'order' is used to pull the image up from later in the content to the top,
and 'align-self' is used to center it horizontally.
* An <a href="#auto-margins"><css>auto</css> margin</a> above the purchase button
forces it to the bottom within each entry box,
regardless of the height of that item's description.
<pre class="lang-css">
#deals {
display: flex; /* Flex layout so items <a property lt="align-self">have equal height</a> */
flex-flow: row wrap; /* <a section href="#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 section href="#flex-flow-property">Lay out item's contents vertically</a> */
}
.sale-item > img {
order: -1; /* <a section href="#order-property">Shift image before other content (in visual order)</a> */
align-self: center; /* <a property lt="align-self">Center the image cross-wise (horizontally)</a> */
}
.sale-item > button {
margin-top: auto; /* <a section href="#auto-margins">Auto top margin pushes button to bottom</a> */
}
</pre>
<pre class="lang-markup">
&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">
&hellip;
&lt;/section>
&hellip;
&lt;/section>
</pre>
<figure>
<div id="overview-example">
<div class="col"></div>
<div class="col"></div>
<div class="desc">
<img src="images/computer.jpg" alt='You get: a white computer with matching keyboard and monitor.'>
<h1 id=quiet-pubrules-1 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 src="images/printer.png" alt='You get: beautiful ASCII art.'>
<h1 id=quiet-pubrules-2 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">
Module interactions</h3>
This module extends the definition of the 'display' property [[!CSS21]],
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 ''::first-line'' or ''::first-letter'' pseudo-elements.
<h2 id='box-model'>
Flex Layout Box Model and Terminology</h2>
A <dfn export>flex container</dfn> is the box generated by an element with a
computed 'display' of ''flex'' or ''inline-flex''.
In-flow children of a flex container are called <dfn export lt="flex item" id="flex-item">flex items</dfn>
and are laid out using the flex layout model.
Unlike block and inline layout,
whose layout calculations are biased to the <a href="https://www.w3.org/TR/css3-writing-modes/#abstract-box">block and inline flow directions</a>,
flex layout is biased to the <dfn lt="flex direction">flex directions</dfn>.
To make it easier to talk about flex layout,
this section defines a set of flex flow&ndash;relative terms.
The 'flex-flow' value and the <a>writing mode</a>
determine how these terms map
to physical directions (top/right/bottom/left),
axes (vertical/horizontal), and sizes (width/height).
<figure>
<img src='images/flex-direction-terms.svg' width=665 height=277 alt>
<figcaption>
An illustration of the various directions and sizing terms as applied to a ''row'' flex container.
</figcaption>
</figure>
<dl id="main" export>
<dt class='axis'>main axis
<dt class='axis'>main dimension
<dd>
The <dfn lt="main axis|main-axis">main axis</dfn> of a flex container is the primary axis along which <a>flex items</a> are laid out.
It extends in the <dfn>main dimension</dfn>.
<dt class='side'>main-start
<dt class='side'>main-end
<dd>
The <a>flex items</a> are placed within the container
starting on the <dfn>main-start</dfn> side
and going toward the <dfn>main-end</dfn> side.
<dt class='size'>main size
<dt class='size'>main size property
<dd>
A <a>flex item</a>’s width or height,
whichever is in the <a>main dimension</a>,
is the item's <dfn lt="main size|main-size">main size</dfn>.
The <a>flex item</a>’s <dfn lt="main size property|max main size property|min main size property">main size property</dfn> is
either the 'width' or 'height' property,
whichever is in the <a>main dimension</a>.
</dl>
<dl id="cross" export>
<dt class='axis'>cross axis
<dt class='axis'>cross dimension
<dd>
The axis perpendicular to the <a>main axis</a> is called the <dfn lt="cross axis|cross-axis">cross axis</dfn>.
It extends in the <dfn>cross dimension</dfn>.
<dt class='side'>cross-start
<dt class='side'>cross-end
<dd>
<a>Flex lines</a> are filled with items and placed into the container
starting on the <dfn>cross-start</dfn> side of the flex container
and going toward the <dfn>cross-end</dfn> side.
<dt class='size'>cross size
<dt class='size'>cross size property
<dd>
The width or height of a <a>flex item</a>,
whichever is in the <a>cross dimension</a>,
is the item's <dfn lt="cross size | cross-size">cross size</dfn>.
The <dfn lt="cross size property|max cross size property|min cross size property">cross size property</dfn> is
whichever of 'width' or 'height' that is in the <a>cross dimension</a>.
</dl>
<!--
████████ ████ ██████ ████████ ██ ███ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ████
██ ██ ██ ██████ ████████ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ █████████ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
████████ ████ ██████ ██ ████████ ██ ██ ██
-->
<h2 id='flex-containers'>
Flex Containers: the ''flex'' and ''inline-flex'' 'display' values</h2>
<pre class="propdef partial">
Name: display
New values: flex | inline-flex
</pre>
<dl dfn-type=value dfn-for=display>
<dt><dfn>flex</dfn>
<dd>
This value causes an element to generate a block-level <a>flex container</a> box.
<dt><dfn>inline-flex</dfn>
<dd>
This value causes an element to generate an inline-level <a>flex container</a> box.
</dl>
A <a>flex container</a> establishes a new <dfn export>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.
For example, floats do not intrude into the flex container,
and the flex container's margins do not collapse with the margins of its contents.
<a>Flex containers</a> form a containing block for their contents
<a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">exactly like block containers do</a>. [[!CSS21]]
The 'overflow' property applies to <a>flex containers</a>.
Flex containers are not block containers,
and so some properties that were designed with the assumption of block layout 1DDA don't apply in the context of flex layout.
In particular:
* the 'column-*' properties in the Multi-column Layout module [[!CSS3COL]] have no effect on a flex container.
* 'float' and 'clear' do not create floating or clearance of <a>flex item</a>,
and do not take it out-of-flow.
* 'vertical-align' has no effect on a flex item.
* the ''::first-line'' and ''::first-letter'' pseudo-elements do not apply to <a>flex containers</a>,
and <a>flex containers</a> do not contribute a <a>first formatted line</a> or <a>first letter</a>
to their ancestors.
<!--
Issue: When the Pseudo-Elements spec exists,
align this language with whatever algo we define for figuring out where to search for first-line/letter content.
-->
If an element's specified 'display' is ''inline-flex'',
then its 'display' property computes to ''flex''
in certain circumstances:
the table in <a href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS 2.1 Section 9.7</a>
is amended to contain an additional row,
with ''inline-flex'' in the "Specified Value" column
and ''flex'' in the "Computed Value" column.
<!--
████████ ██ ████████ ██ ██ ████ ████████ ████████ ██ ██ ██████
██ ██ ██ ██ ██ ██ ██ ██ ███ ███ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ████ ████ ██
██████ ██ ██████ ███ ██ ██ ██████ ██ ███ ██ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ████████ ████████ ██ ██ ████ ██ ████████ ██ ██ ██████
-->
<h2 id='flex-items'>
Flex Items</h2>
Loosely speaking, the <a>flex items</a> of a <a>flex container</a>
are boxes representing its in-flow contents.
Each in-flow child of a <a>flex container</a>
becomes a <a>flex item</a>,
and each contiguous run of text that is directly contained inside a <a>flex container</a>
is wrapped in an anonymous <a>flex item</a>.
However, an anonymous flex item that contains only
<a href="https://www.w3.org/TR/CSS2/text.html#white-space-prop">white space</a>
(i.e. characters that can be affected by the 'white-space' property)
is not rendered (just as if it were ''display:none'').
<div class="example">
<p>Examples of flex items:
<pre class="lang-markup">
&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 <a href="https://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">split</a> around blocks -->
&lt;q style="display: block" id=not-an-item>item 4&lt;/q>
item 4
&lt;/span>
&lt;/div>
</pre>
<figure>
<figcaption>Flex items determined from above code block</figcaption>
<a href="examples/flex-item-determination.html">
<object type="image/png" data="images/flex-item-determination.png">
<ol>
<li>Flex item containing <samp>block</samp>.
<li>Flex item containing <samp>float</samp>.
<li>(Anonymous, unstyleable) flex item containing <samp>anonymous item 3</samp>.
<li>Flex item containing three blocks in succession:
<ul>
<li>Anonymous block containing <samp>item 4</samp>.
<li><code>&lt;q></code> element block containing <samp>item 4</samp>.
<li>Anonymous block containing <samp>item 4</samp>.
</ul>
</ol>
</object>
</a>
</figure>
Note that the inter-element white space disappears:
it does not become its own flex item,
even though the inter-element text <em>does</em> get wrapped in an anonymous flex item.
Note also that the anonymous item's box is unstyleable,
since there is no element to assign style rules to.
Its contents will however inherit styles (such as font settings) from the flex container.
</div>
A <a>flex item</a> establishes a new formatting context for its contents.
The type of this formatting context is determined by its 'display' value, as usual.
However, flex items themselves are <dfn>flex-level</dfn> boxes, not block-level boxes:
they participate in their container's flex formatting context,
not in a block formatting context.
<hr>
Note: Authors reading this spec may want to
<a href="#item-margins">skip past the following box-generation and static position details</a>.
The 'display' value of a <a>flex item</a> is <a>blockified</a>:
if the specified 'display' of an in-flow child of an element generating a <a>flex container</a>
is an inline-level value, it computes to its block-level equivalent.
(See <a href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">CSS2.1&sect;9.7</a> [[!CSS21]]
and <a href="https://www.w3.org/TR/css-display/#transformations">CSS Display</a> [[!CSS3-DISPLAY]]
for details on this type of 'display' value conversion.)
Note: Some values of 'display' normally trigger the creation of anonymous boxes around the original box.
If such a box is a <a>flex item</a>,
it is blockified first,
and so anonymous box creation will not happen.
For example, two contiguous <a>flex items</a> with ''display: table-cell''
will become two separate ''display: block'' <a>flex items</a>,
instead of being wrapped into a single anonymous table.
<!--
███ ████████ ██████ ████████ ███████ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ████████ ██████ ████████ ██ ██ ██████
█████████ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ████████ ██████ ██ ███████ ██████
-->
<h3 id='abspos-items'>
Absolutely-Positioned Flex Children</h3>
An absolutely-positioned child of a <a>flex container</a> does not participate in flex layout.
However, it does participate in the <a href="#algo-flex-order">reordering step</a> (see 'order'),
which has an effect on painting order.
The <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">static position</a>
of an absolutely-positioned child of a <a>flex container</a>
is determined such that the child is positioned
as if it were the sole <a>flex item</a> in the <a>flex container</a>,
assuming both the child and the flex container
were fixed-size boxes of their used size.
For this purpose,
a value of ''align-self: auto'' is treated identically to ''align-self/start''.
<div class='example'>
The effect of this is that if you set, for example,
''align-content: center;'' on an absolutely-positioned child of a <a>flex container</a>,
the child’s static position will center it in the <a>flex container's</a> <a>cross axis</a>.
</div>
<div class="note">
The <dfn>static-position rectangle</dfn> is the <a>alignment container</a>
used to determine the static-position offsets of an absolutely-positioned box.
In block layout it corresponds to the position of the “hypothetical box”
described in <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">CSS2.1&sect;10.3.7</a>.
(Since it has no alignment properties,
CSS2.1 always uses a <a>block-start</a> <a>inline-start</a> alignment
of the absolutely-positioned box within the <a>static-position rectangle</a>.)
Note that this definition will eventually move to the CSS Positioning module.
</div>
<h3 id='item-margins'>
Flex Item Margins and Paddings</h3>
The margins of adjacent <a>flex items</a> do not
<a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>.
Percentage margins and paddings on <a>flex items</a> can be resolved against either:
* their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
* the inline axis (left/right/top/bottom percentages all resolve against width)
A User Agent must choose one of these two behaviors.
Note: This variance sucks, but it accurately captures the current state of the world
(no consensus among implementations, and no consensus within the CSSWG).
It is the CSSWG's intention that browsers will converge on one of the behaviors,
at which time the spec will be amended to require that.
Advisement: Authors should avoid using percentages in paddings or margins on <a>flex items</a> entirely,
as they will get different behavior in different browsers.
Auto margins expand to absorb extra space in the corresponding dimension.
They can be used for alignment,
or to push adjacent flex items apart.
See <a href="#auto-margins">Aligning with <span class=css>auto</span> margins</a>.
<h3 id='painting'>
Flex Item Z-Ordering</h3>
<a>Flex items</a> paint exactly the same as inline blocks [[!CSS21]],
except that 'order'-modified document order is used in place of raw document order,
and 'z-index'
values other than ''z-index/auto'' create a stacking context
even if 'position' is ''static''.
Note: Descendants that are positioned outside a flex item still participate
in any stacking context established by the flex item.
<!--
██████ ███████ ██ ██ ███ ████████ ██████ ████████ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ████████ ██████ ██████ ██ ██
██ ██ ██ ██ ██ █████████ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ███████ ████████ ████████ ██ ██ ██ ██████ ████████ ████████
-->
<h3 id='visibility-collapse'>
Collapsed Items</h3>
Specifying ''visibility:collapse'' on a flex item
causes it to become a <dfn lt="collapsed flex item" local-lt="collapsed">collapsed flex item</dfn>,
producing an effect similar to ''visibility:collapse'' on a table-row or table-column:
the collapsed flex item is removed from rendering entirely,
but leaves behind a "strut" that keeps the flex line's cross-size stable.
Thus, if a flex container has only one flex line,
dynamically collapsing or uncollapsing items
may change the <a>flex container</a>'s <a>main size</a>, but
is guaranteed to have no effect on its <a>cross size</a>
and won't cause the rest of the page's layout to "wobble".
Flex line wrapping <em>is</em> re-done after collapsing, however,
so the cross-size of a flex container with multiple lines might or might not change.
Though collapsed flex items aren't rendered,
they do appear in the <a href="https://www.w3.org/TR/CSS2/intro.html#formatting-structure">formatting structure</a>.
Therefore, unlike on ''display:none'' items [[!CSS21]],
effects that depend on a box appearing in the formatting structure
(like incrementing counters or running animations and transitions)
still operate on collapsed items.
<div class="example">
In the following example,
a sidebar is sized to fit its content.
''visibility: collapse'' is used to dynamically hide parts of a navigation sidebar
without affecting its width, even though the widest item (&ldquo;Architecture&rdquo;)
is in a collapsed section.
<figure>
<figcaption>Sample live rendering for example code below</figcaption>
<div id="visibility-collapse-example">
<!-- No, don't look at this source code, look at the other source code. -->
<nav>
<ul>
<li id="nav-about"><a href="#nav-about">About</a>
<ul>
<li><a href="#">History</a>
<li><a href="#">Mission</a>
<li><a href="#">People</a>
</ul>
<li id="nav-projects"><a href="#nav-projects">Projects</a>
<ul>
<li><a href="#">Art</a>
<li><a href="#">Architecture</a>
<li><a href="#">Music</a>
</ul>
<li id="nav-interact"><a href="#nav-interact">Interact</a>
<ul>
<li><a href="#">Blog</a>
<li><a href="#">Forums</a>
<!-- li><a href="#">Events</a> -->
</ul>
</ul>
</nav>
<article>
Hover over the menu to the left:
each section expands to show its sub-items.
In order to keep the sidebar width (and this main area width) stable,
''visibility: collapse'' is used instead of ''display: none''.
This results in a sidebar that is always wide enough for the word “Architecture”,
even though it is not always visible.
</article>
</div>
</figure>
<pre class="lang-css">
@media (min-width: 60em) {
/* <a href="https://www.w3.org/TR/css3-mediaqueries/#width">two column layout only when enough room</a> (relative to default text size) */
div { display: flex; }
#main {
flex: 1; /* <a href="#flexibility">Main takes up all remaining space</a> */
order: 1; /* <a href="#order-property">Place it after (to the right of) the navigation</a> */
min-width: 12em; /* Optimize main content area sizing */
}
}
/* menu items use flex layout so that visibility:collapse will work */
nav > ul > li {
display: flex;
flex-flow: column;
}
/* dynamically collapse submenus when not targetted */
nav > ul > li:not(:target):not(:hover) > ul {
visibility: collapse;
}
</pre>
<pre class="lang-markup">
&lt;div>
&lt;article id="main">
Interesting Stuff to Read
&lt;/article>
&lt;nav>
&lt;ul>
&lt;li id="nav-about">&lt;a href="#nav-about">About&lt;/a>
&hellip;
&lt;li id="nav-projects">&lt;a href="#nav-projects">Projects&lt;/a>
&lt;ul>
&lt;li>&lt;a href="&hellip;">Art&lt;/a>
&lt;li>&lt;a href="&hellip;">Architecture&lt;/a>
&lt;li>&lt;a href="&hellip;">Music&lt;/a>
&lt;/ul>
&lt;li id="nav-interact">&lt;a href="#nav-interact">Interact&lt;/a>
&hellip;
&lt;/ul>
&lt;/nav>
&lt;/div>
&lt;footer>
&hellip;
</pre>
</div>
To compute the size of the strut, flex layout is first performed with all items uncollapsed,
and then re-run with each collapsed item replaced by a strut that maintains
the original cross-size of the item's original line.
See the <a href="#layout-algorithm">Flex Layout Algorithm</a>
for the normative definition of how ''visibility:collapse''
interacts with flex layout.
Note: Using ''visibility:collapse'' on any flex items
will cause the flex layout algorithm to repeat partway through,
re-running the most expensive steps.
It's recommended that authors continue to use ''display:none'' to hide items
if the items will not be dynamically collapsed and uncollapsed,
as that is more efficient for the layout engine.
(Since only part of the steps need to be repeated when 'visibility' is changed,
however, 'visibility: collapse' is still recommended for dynamic cases.)
<!--
██ ██ ████ ██ ██
███ ███ ██ ███ ██ ██ ██
████ ████ ██ ████ ██ ██ ██
██ ███ ██ ██ ██ ██ ██ ███████ █████████
██ ██ ██ ██ ████ ██ ██
██ ██ ██ ██ ███ ██ ██
██ ██ ████ ██ ██
-->
<h3 id="min-size-auto">
Implied Minimum Size of Flex Items</h3>
To provide a more reasonable default minimum size for <a>flex items</a>,
this specification introduces a new ''min-width/auto'' value
as the initial value of the 'min-width' and 'min-height' properties defined in CSS 2.1. [[!CSS21]]
<pre class="propdef partial&q A90C uot;>
Name: min-width, min-height
New values: auto
New initial value: auto
New computed value: the percentage as specified or the absolute length or a keyword
</pre>
<dl dfn-type=value dfn-for="min-width, min-height">
<dt><dfn>auto</dfn>
<dd>
On a <a>flex item</a> whose 'overflow' is ''overflow/visible'' in the <a>main axis</a>,
when specified on the <a>flex item's</a> main-axis min-size property,
specifies an <dfn dfn export>automatic minimum size</dfn>.
In general, the <a>automatic minimum size</a>
is the smaller of its <a>content size</a> and its <a>specified size</a>.
However, if the box has an aspect ratio and no <a>specified size</a>,
its <a>automatic minimum size</a>
is the smaller of its <a>content size</a> and its <a>transferred size</a>.
The <a>content size</a>, <a>specified size</a>, and <a>transferred size</a>
used in this calculation account for the relevant min/max/preferred size properties
so that the <a>automatic minimum size</a> does not interfere with any author-provided constraints,
and are defined below:
<dl>
<dt><dfn dfn noexport>specified size</dfn>
<dd>
If the item’s computed <a>main size property</a> is <a>definite</a>,
then the <a>specified size</a> is that size
(clamped by its <a>max main size property</a> if it's <a>definite</a>).
It is otherwise undefined.
<dt><dfn dfn noexport>transferred size</dfn>
<dd>
If the item has an intrinsic aspect ratio
and its computed <a>cross size property</a> is <a>definite</a>,
then the <a>transferred size</a> is that size
(clamped by its <a lt="min cross size property">min and max cross size properties</a> if they are <a>definite</a>),
converted through the aspect ratio.
It is otherwise undefined.
<dt><dfn dfn noexport>content size</dfn>
<dd>
The <a>content size</a> is the <a>min-content size</a> in the <a>main axis</a>,
clamped, if it has an aspect ratio, by any <a>definite</a> <a lt="min cross size property">min and max cross size properties</a> converted through the aspect ratio,
and then further clamped by the <a>max main size property</a> if that is <a>definite</a>.
</dl>
For the purpose of calculating an intrinsic size of the element
(e.g. the element's <a>min-content size</a>),
this value causes the element's width/height to become indefinite
(even if e.g. its 'width' property specifies a <a>definite</a> size).
Note this means that percentages calculated against this size
will be treated as ''height/auto''.
Otherwise, although this may require an additional layout pass to re-resolve percentages in some cases,
this value
(like the ''min-content'', ''max-content'', and ''fit-content'' values defined in [[CSS3-SIZING]])
does not prevent the resolution of percentage sizes within the item.
Otherwise,
this keyword computes to ''0''
(unless otherwise defined by a future specification).
</dl>
<div class="note" id="min-size-opt">
Note that while a content-based minimum size is often appropriate,
and helps prevent content from overlapping or spilling outside its container,
in some cases it is not:
In particular, if flex sizing is being used for a major content area of a document,
it is better to set an explicit font-relative minimum width such as ''min-width: 12em''.
A content-based minimum width could result in a large table or large image
stretching the size of the entire content area into an overflow zone,
and thereby making lines of text gratuitously long and hard to read.
Note also, when content-based sizing is used on an item with large amounts of content,
the layout engine must traverse all of this content before finding its minimum size,
whereas if the author sets an explicit minimum, this is not necessary.
(For items with small amounts of content, however,
this traversal is trivial and therefore not a performance concern.)
</div>
<h2 id="flow-order">
Ordering and Orientation</h2>
The contents of a flex container can be laid out 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 hacks using the 'float' and 'clear' properties.
This functionality is exposed through the 'flex-direction', 'flex-wrap', and 'order' properties.
Note: The reordering capabilities of flex layout intentionally affect
<em>only the visual rendering</em>,
leaving speech order and navigation based on the source order.
This allows authors to manipulate the visual presentation
while leaving the source order intact for non-CSS UAs and for
linear models such as speech and sequential navigation.
See <a href="#order-accessibility">Reordering and Accessibility</a>
and the <a href="#overview">Flex Layout Overview</a> for examples
that use this dichotomy to improve accessibility.
Advisement:
Authors <em>must not</em> use 'order' or the ''*-reverse'' values of 'flex-flow'/'flex-direction'
as a substitute for correct source ordering,
as that can ruin the accessibility of the document.
<!--
████████ ██ ████████ ██ ██ ████████ ████ ████████ ████████ ██████ ████████ ████ ███████ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██
██████ ██ ██████ ███ ███████ ██ ██ ██ ████████ ██████ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███
██ ████████ ████████ ██ ██ ████████ ████ ██ ██ ████████ ██████ ██ ████ ███████ ██ ██
-->
<h3 id='flex-direction-property'>
Flex Flow Direction: the 'flex-direction' property</h3>
<pre class='propdef'>
Name: flex-direction
Value: row | row-reverse | column | column-reverse
Initial: row
View remainder of file in raw view