CSS Flexible Box Layout Module Level 1
CSS Flexible Box Layout Module Level 1
Editor’s Draft
9 February 2026
More details about this document
This version:
Latest published version:
Implementation Report:
Feedback:
CSSWG Issues Repository
Editors:
Tab Atkins Jr.
Google
Elika J. Etemad / fantasai
Apple
Rossen Atanassov
Microsoft
Former Editors:
Alex Mogilevsky
Microsoft Corporation
L. David Baron
Google
Neil Deakin
Mozilla Corporation
Ian Hickson
formerly of Opera Software
David Hyatt
formerly of Netscape Corporation
Suggest an Edit for this Spec:
GitHub Editor
Issues List:
Test Suite:
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
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. 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.
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
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.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “css-flexbox” in the title, like this:
“[css-flexbox]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
18 August 2025 W3C Process Document
1.
Introduction
This section is not normative.
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
inline layout, designed for laying out text
table layout, designed for laying out 2D data in a tabular format
positioned layout, designed for very explicit positioning without much regard for other elements in the document
This module introduces a new layout mode,
flex layout
which is designed for laying out more complex applications and webpages.
1.1.
Overview
This section is not normative.
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
floats
and
columns
In return it gains simple and powerful tools
for distributing space and aligning content
in ways that web apps and complex web pages often need.
The contents of a flex container:
can be laid out in any
flow direction
(leftwards, rightwards, downwards, or even upwards!)
can have their display order
reversed
or
'order|rearranged' at the style layer
(i.e., visual order can be independent of source and speech order)
can be laid out linearly along a single (
main
) axis or
wrapped
into multiple lines along a secondary (
cross
) axis
can
“flex” their sizes
to respond to the available space
can be
aligned
with respect to their container or each other on the secondary (
cross
can be dynamically
collapsed
or uncollapsed
along the
main axis
while preserving the container’s
cross size
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 are 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
auto
margin
above the purchase button
forces it to the bottom within each entry box,
regardless of the height of that item’s description.
#deals
display
flex
/* Flex layout so items
have equal height
*/
flex-flow: row wrap
/*
Allow items to wrap into multiple lines
*/
.sale-item
display
flex
/* Lay out each item using flex layout */
flex-flow: column
/*
Lay out item's contents vertically
*/
.sale-item > img
order
-1
/* Shift image before other content (in visual order) */
align-self: center
/*
Center the image cross-wise (horizontally)
*/
.sale-item > button
margin-top
auto
/*
Auto top margin pushes button to bottom
*/
section
id
"deals"
section
class
"sale-item"
h1
Computer Starter Kit
h1
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
img
src
"images/computer.jpg"
alt
"You get: a white computer with matching peripherals."
button
BUY NOW
button
section
section
class
"sale-item"
section
section
Computer Starter Kit
This is the best computer money can buy,
if you don’t have much money.
Computer
Monitor
Keyboard
Mouse
Printer
Only capable of printing
ASCII art.
Paper and ink not included.
An example rendering of the code above.
1.2.
Module interactions
This module extends the definition of the
display
property
[CSS2]
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.
The
CSS Box Alignment Module
extends and supersedes the definitions of the alignment properties
justify-content
align-items
align-self
align-content
introduced here.
Tests
flexbox_first-letter.html
(live test)
(source)
flexbox_first-line.html
(live test)
(source)
flexbox-ignores-first-letter.html
(live test)
(source)
1.3.
Value Definitions
This specification follows the
CSS property definition conventions
from
[CSS2]
using the
value definition syntax
from
[CSS-VALUES-3]
Value types not defined in this specification are defined in CSS Values & Units
[CSS-VALUES-3]
Combination with other CSS modules may expand the definitions of these value types.
In addition to the property-specific values listed in their definitions,
all properties defined in this specification
also accept the
CSS-wide keywords
as their property value.
For readability they have not been repeated explicitly.
2.
Flex Layout Box Model and Terminology
flex container
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
flex items
and are laid out using the flex layout model.
Unlike block and inline layout,
whose layout calculations are biased to the
block and inline flow directions
flex layout is biased to the
flex directions
To make it easier to talk about flex layout,
this section defines a set of flex flow–relative terms.
The
flex-flow
value and the
writing mode
determine how these terms map
to physical directions (top/right/bottom/left),
axes (vertical/horizontal), and sizes (width/height).
An illustration of the various directions and sizing terms as applied to a
row
flex container.
main axis
main dimension
The
main axis
of a flex container is the primary axis along which
flex items
are laid out.
It extends in the
main dimension
main-start
main-end
The
flex items
are placed within the container
starting on the
main-start
side
and going toward the
main-end
side.
main size
main size property
The
main size
of a
flex container
or
flex item
refers to its
width
or
height
whichever is in the
main dimension
Its
main size property
is either its
width
or
height
property,
whichever is in the
main dimension
Likewise, its
min
and
max main size properties
are its
min-width
max-width
or
min-height
max-height
properties,
whichever are in the
main dimension
and determine its
min
max main size
In
flex layout
, the
main size
is controlled by the
flex
property
rather than directly by the
main size property
Note:
This means any references to a flex item’s used size in the
main dimension
width
height
inline size
block size
refers to its post-flexing
main size
cross axis
cross dimension
The axis perpendicular to the
main axis
is called the
cross axis
It extends in the
cross dimension
cross-start
cross-end
Flex lines
are filled with items and placed into the container
starting on the
cross-start
side of the flex container
and going toward the
cross-end
side.
cross size
cross size property
The
cross size
of a
flex container
or
flex item
refers to its
width
or
height
whichever is in the
cross dimension
Its
cross size property
is either its
width
or
height
property,
whichever is in the
cross dimension
Likewise, its
min
and
max cross size properties
are its
min-width
max-width
or
min-height
max-height
properties,
whichever are in the
cross dimension
and determine its
min
max cross size
Additional sizing terminology used in this specification
is defined in
CSS Intrinsic and Extrinsic Sizing
[CSS-SIZING-3]
Tests
box-sizing-min-max-sizes-001.html
(live test)
(source)
3.
Flex Containers: the
flex
and
inline-flex
display
values
Name:
display
New values:
flex
inline-flex
Tests
inheritance.html
(live test)
(source)
flex
This value causes an element to generate a
flex container
box
that is
block-level
when placed in
flow layout
Tests
baseline-synthesis-001.html
(live test)
(source)
baseline-synthesis-002.html
(live test)
(source)
baseline-synthesis-003.html
(live test)
(source)
baseline-synthesis-004.html
(live test)
(source)
baseline-synthesis-vert-lr-line-under.html
(live test)
(source)
display-flex-001.htm
(live test)
(source)
dynamic-change-simplified-layout-002.html
(live test)
(source)
dynamic-change-simplified-layout.html
(live test)
(source)
fixedpos-video-in-abspos-quirk-crash.html
(live test)
(source)
flexbox_flex-0-0-0.html
(live test)
(source)
flexbox_flex-0-0-0-unitless.html
(live test)
(source)
flexbox_flex-0-0-1-unitless-basis.html
(live test)
(source)
flexbox_flex-0-0-auto.html
(live test)
(source)
flexbox_flex-0-0-auto-shrink.html
(live test)
(source)
flexbox_flex-0-0.html
(live test)
(source)
flexbox_flex-0-0-N.html
(live test)
(source)
flexbox_flex-0-0-Npercent.html
(live test)
(source)
flexbox_flex-0-0-Npercent-shrink.html
(live test)
(source)
flexbox_flex-0-0-N-shrink.html
(live test)
(source)
flexbox_flex-0-0-N-unitless-basis.html
(live test)
(source)
flexbox_flex-0-1-0.html
(live test)
(source)
flexbox_flex-0-1-0-unitless.html
(live test)
(source)
flexbox_flex-0-1-1-unitless-basis.html
(live test)
(source)
flexbox_flex-0-1-auto.html
(live test)
(source)
flexbox_flex-0-1-auto-shrink.html
(live test)
(source)
flexbox_flex-0-1.html
(live test)
(source)
flexbox_flex-0-1-N.html
(live test)
(source)
flexbox_flex-0-1-Npercent.html
(live test)
(source)
flexbox_flex-0-1-Npercent-shrink.html
(live test)
(source)
flexbox_flex-0-1-N-shrink.html
(live test)
(source)
flexbox_flex-0-1-N-unitless-basis.html
(live test)
(source)
flexbox_flex-0-auto.html
(live test)
(source)
flexbox_flex-0-N-0.html
(live test)
(source)
flexbox_flex-0-N-0-unitless.html
(live test)
(source)
flexbox_flex-0-N-auto.html
(live test)
(source)
flexbox_flex-0-N-auto-shrink.html
(live test)
(source)
flexbox_flex-0-N.html
(live test)
(source)
flexbox_flex-0-N-N.html
(live test)
(source)
flexbox_flex-0-N-Npercent.html
(live test)
(source)
flexbox_flex-0-N-Npercent-shrink.html
(live test)
(source)
flexbox_flex-0-N-N-shrink.html
(live test)
(source)
flexbox_flex-1-0-0.html
(live test)
(source)
flexbox_flex-1-0-0-unitless.html
(live test)
(source)
flexbox_flex-1-0-auto.html
(live test)
(source)
flexbox_flex-1-0-auto-shrink.html
(live test)
(source)
flexbox_flex-1-0.html
(live test)
(source)
flexbox_flex-1-0-N.html
(live test)
(source)
flexbox_flex-1-0-Npercent.html
(live test)
(source)
flexbox_flex-1-0-Npercent-shrink.html
(live test)
(source)
flexbox_flex-1-0-N-shrink.html
(live test)
(source)
flexbox_flex-1-1-0.html
(live test)
(source)
flexbox_flex-1-1-0-unitless.html
(live test)
(source)
flexbox_flex-1-1-auto.html
(live test)
(source)
flexbox_flex-1-1-auto-shrink.html
(live test)
(source)
flexbox_flex-1-1.html
(live test)
(source)
flexbox_flex-1-1-N.html
(live test)
(source)
flexbox_flex-1-1-Npercent.html
(live test)
(source)
flexbox_flex-1-1-Npercent-shrink.html
(live test)
(source)
flexbox_flex-1-1-N-shrink.html
(live test)
(source)
flexbox_flex-1-N-0.html
(live test)
(source)
flexbox_flex-1-N-0-unitless.html
(live test)
(source)
flexbox_flex-1-N-auto.html
(live test)
(source)
flexbox_flex-1-N-auto-shrink.html
(live test)
(source)
flexbox_flex-1-N.html
(live test)
(source)
flexbox_flex-1-N-N.html
(live test)
(source)
flexbox_flex-1-N-Npercent.html
(live test)
(source)
flexbox_flex-1-N-Npercent-shrink.html
(live test)
(source)
flexbox_flex-1-N-N-shrink.html
(live test)
(source)
flexbox_flex-N-0-0.html
(live test)
(source)
flexbox_flex-N-0-0-unitless.html
(live test)
(source)
flexbox_flex-N-0-auto.html
(live test)
(source)
flexbox_flex-N-0-auto-shrink.html
(live test)
(source)
flexbox_flex-N-0.html
(live test)
(source)
flexbox_flex-N-0-N.html
(live test)
(source)
flexbox_flex-N-0-Npercent.html
(live test)
(source)
flexbox_flex-N-0-Npercent-shrink.html
(live test)
(source)
flexbox_flex-N-0-N-shrink.html
(live test)
(source)
flexbox_flex-N-1-0.html
(live test)
(source)
flexbox_flex-N-1-0-unitless.html
(live test)
(source)
flexbox_flex-N-1-auto.html
(live test)
(source)
flexbox_flex-N-1-auto-shrink.html
(live test)
(source)
flexbox_flex-N-1.html
(live test)
(source)
flexbox_flex-N-1-N.html
(live test)
(source)
flexbox_flex-N-1-Npercent.html
(live test)
(source)
flexbox_flex-N-1-Npercent-shrink.html
(live test)
(source)
flexbox_flex-N-1-N-shrink.html
(live test)
(source)
flexbox_flex-N-N-0.html
(live test)
(source)
flexbox_flex-N-N-0-unitless.html
(live test)
(source)
flexbox_flex-N-N-auto.html
(live test)
(source)
flexbox_flex-N-N-auto-shrink.html
(live test)
(source)
flexbox_flex-N-N.html
(live test)
(source)
flexbox_flex-N-N-N.html
(live test)
(source)
flexbox_flex-N-N-Npercent.html
(live test)
(source)
flexbox_flex-N-N-Npercent-shrink.html
(live test)
(source)
flexbox_flex-N-N-N-shrink.html
(live test)
(source)
flexbox_flex-formatting-interop.html
(live test)
(source)
flexbox_generated-flex.html
(live test)
(source)
flexbox_generated.html
(live test)
(source)
flexbox_generated-nested-flex.html
(live test)
(source)
flexbox-iframe-intrinsic-size-001.html
(live test)
(source)
flexbox_item-bottom-float.html
(live test)
(source)
flexbox_item-clear.html
(live test)
(source)
flexbox_item-float.html
(live test)
(source)
flexbox_item-top-float.html
(live test)
(source)
flexbox_item-vertical-align.html
(live test)
(source)
flexbox_block.html
(live test)
(source)
flexbox_box-clear.html
(live test)
(source)
flexbox_display.html
(live test)
(source)
flexbox_fbfc2.html
(live test)
(source)
flexbox_fbfc.html
(live test)
(source)
flexbox_nested-flex.html
(live test)
(source)
flexbox-root-node-001a.html
(live test)
(source)
flexbox-root-node-001b.html
(live test)
(source)
flexbox_stf-fixpos.html
(live test)
(source)
flexbox_stf-float.html
(live test)
(source)
flexbox_stf-inline-block.html
(live test)
(source)
flexbox_stf-table-caption.html
(live test)
(source)
flexbox_stf-table-cell.html
(live test)
(source)
flexbox_stf-table.html
(live test)
(source)
flexbox_stf-table-row-group.html
(live test)
(source)
flexbox_stf-table-row.html
(live test)
(source)
flexbox_stf-table-singleline-2.html
(live test)
(source)
flexbox_stf-table-singleline.html
(live test)
(source)
flexbox_table-fixed-layout.html
(live test)
(source)
flexbox-with-multi-column-property.html
(live test)
(source)
flexbox_computedstyle_display.html
(live test)
(source)
grid-flex-item-001.html
(live test)
(source)
grid-flex-item-002.html
(live test)
(source)
grid-flex-item-003.html
(live test)
(source)
grid-flex-item-004.html
(live test)
(source)
grid-flex-item-005.html
(live test)
(source)
grid-flex-item-006.html
(live test)
(source)
grid-flex-item-007.html
(live test)
(source)
flexbox_interactive_flex-transitions.html (manual test)
(source)
flexbox_interactive_order-transitions-2.html (manual test)
(source)
flexbox_interactive_order-transitions.html (manual test)
(source)
nested-flex-image-loading-invalidates-intrinsic-sizes.html
(live test)
(source)
percentage-margins-001.html
(live test)
(source)
stretch-after-sibling-size-change.html
(live test)
(source)
stretched-child-in-nested-flexbox-001.html
(live test)
(source)
stretched-child-in-nested-flexbox-002.html
(live test)
(source)
stretched-child-in-nested-flexbox-003.html
(live test)
(source)
stretched-child-shrink-on-relayout.html
(live test)
(source)
stretch-flex-item-checkbox-input.html
(live test)
(source)
stretch-flex-item-radio-input.html
(live test)
(source)
stretching-orthogonal-flows.html
(live test)
(source)
table-with-percent-intrinsic-width.html
(live test)
(source)
inline-flex
This value causes an element to generate a
flex container
box
that is
inline-level
when placed in
flow layout
Tests
flexbox_inline.html
(live test)
(source)
flex-inline.html
(live test)
(source)
flexbox_inline-float.html
(live test)
(source)
inline-flexbox-absurd-block-size-crash.html
(live test)
(source)
inline-flexbox-wrap-vertically-width-calculation.html
(live test)
(source)
inline-flex-editing-crash.html
(live test)
(source)
inline-flex-editing-with-updating-text-crash.html
(live test)
(source)
inline-flex-frameset-main-axis-crash.html
(live test)
(source)
inline-flex.html
(live test)
(source)
inline-flex-min-content-height.html
(live test)
(source)
flexbox_computedstyle_display-inline.html
(live test)
(source)
intrinsic-width-orthogonal-writing-mode.html
(live test)
(source)
flex container
establishes a new
flex formatting context
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.
Flex containers
form a containing block for their contents
exactly like block containers do
[CSS2]
The
overflow
property applies to
flex containers
Tests
flexbox-overflow-horiz-001.html
(live test)
(source)
flexbox-overflow-horiz-002.html
(live test)
(source)
flexbox-overflow-horiz-003.html
(live test)
(source)
flexbox-overflow-horiz-004.html
(live test)
(source)
flexbox-overflow-horiz-005.html
(live test)
(source)
flexbox-overflow-padding-001.html
(live test)
(source)
flexbox-overflow-padding-002.html
(live test)
(source)
flexbox-overflow-vert-001.html
(live test)
(source)
flexbox-overflow-vert-002.html
(live test)
(source)
flexbox-overflow-vert-003.html
(live test)
(source)
flexbox-overflow-vert-004.html
(live test)
(source)
flexbox-overflow-vert-005.html
(live test)
(source)
flexbox_rowspan-overflow-automatic.html
(live test)
(source)
flexbox_rowspan-overflow.html
(live test)
(source)
flexbox-safe-overflow-position-001.html
(live test)
(source)
flexbox-safe-overflow-position-002.html
(live test)
(source)
flexbox-safe-overflow-position-003.html
(live test)
(source)
flexbox-safe-overflow-position-004.html
(live test)
(source)
flexbox-safe-overflow-position-005.html
(live test)
(source)
flexbox-safe-overflow-position-006.html
(live test)
(source)
flexbox_width-overflow.html
(live test)
(source)
min-size-auto-overflow-clip.html
(live test)
(source)
negative-overflow-002.html
(live test)
(source)
negative-overflow-003.html
(live test)
(source)
negative-overflow.html
(live test)
(source)
overflow-area-001.html
(live test)
(source)
overflow-area-002.html
(live test)
(source)
overflow-area-003.html
(live test)
(source)
overflow-auto-001.html
(live test)
(source)
overflow-auto-002.html
(live test)
(source)
overflow-auto-003.html
(live test)
(source)
overflow-auto-004.html
(live test)
(source)
overflow-auto-005.html
(live test)
(source)
overflow-auto-006.html
(live test)
(source)
overflow-auto-007.html
(live test)
(source)
overflow-auto-008.html
(live test)
(source)
overflow-top-left.html
(live test)
(source)
padding-overflow.html
(live test)
(source)
text-overflow-on-flexbox-001.html
(live test)
(source)
synthesize-vrl-baseline.html
(live test)
(source)
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:
float
and
clear
do not create floating or clearance of
flex item
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
flex containers
and
flex containers
do not contribute a
first formatted line
or
first letter
to their ancestors.
Tests
align-content-wrap-004.html
(live test)
(source)
align-items-baseline-column-vert-lr-table-item.html
(live test)
(source)
align-items-baseline-vert-lr-column-horz-table-item.html
(live test)
(source)
align-items-baseline-vert-rl-column-horz-table-item.html
(live test)
(source)
flexbox_box-clear.html
(live test)
(source)
flexbox_first-letter.html
(live test)
(source)
flexbox_first-line.html
(live test)
(source)
flexbox-ignores-first-letter.html
(live test)
(source)
flexbox_item-vertical-align.html
(live test)
(source)
flexbox-with-pseudo-elements-001.html
(live test)
(source)
flexbox-with-pseudo-elements-002.html
(live test)
(source)
flexbox-with-pseudo-elements-003.html
(live test)
(source)
flexible-box-float.html
(live test)
(source)
flex-item-vertical-align.html
(live test)
(source)
flex-vertical-align-effect.html
(live test)
(source)
hittest-before-pseudo.html
(live test)
(source)
If an element’s specified
display
is
inline-flex
then its
display
property computes to
flex
in certain circumstances:
the table in
CSS 2.1 Section 9.7
is amended to contain an additional row,
with
inline-flex
in the "Specified Value" column
and
flex
in the "Computed Value" column.
4.
Flex Items
Loosely speaking, the
flex items
of a
flex container
are boxes representing its
in-flow
contents.
Each
in-flow
child of a
flex container
becomes a
flex item
and each child
text sequence
is wrapped in an
anonymous
block container
flex item
However, if the entire
text sequences
contains only
document white space characters
(i.e. characters that can be affected by the
white-space
property)
it is instead not rendered (just as if its
text nodes
were
display:none
).
Tests
anonymous-block.html
(live test)
(source)
anonymous-flex-item-001.html
(live test)
(source)
anonymous-flex-item-002.html
(live test)
(source)
anonymous-flex-item-003.html
(live test)
(source)
anonymous-flex-item-004.html
(live test)
(source)
anonymous-flex-item-005.html
(live test)
(source)
anonymous-flex-item-006.html
(live test)
(source)
canvas-dynamic-change-001.html
(live test)
(source)
column-flex-child-with-max-width.html
(live test)
(source)
flexbox-whitespace-handling-001a.xhtml
(live test)
(source)
flexbox-whitespace-handling-001b.xhtml
(live test)
(source)
flexbox-whitespace-handling-002.xhtml
(live test)
(source)
hittest-anonymous-box.html
(live test)
(source)
percentage-descendant-of-anonymous-flex-item.html
(live test)
(source)
percentage-size-subitems-001.html
(live test)
(source)
whitespace-in-flexitem-001.html
(live test)
(source)
Examples of flex items:
div
style
"display:flex"
div
id
"item1"
block
div
div
id
"item2"
style
"float: left;"
float
div
anonymous item 3
span
item 4
style
"display: block"
id
not-an-item
item 4
item 4
span
div
Flex items determined from above code block
Flex item containing
block
Flex item containing
float
(Anonymous, unstyleable) flex item containing
anonymous item 3
Flex item containing three blocks in succession:
Anonymous block containing
item 4
element block containing
item 4
Anonymous block containing
item 4
Note that the inter-element white space disappears:
it does not become its own flex item,
even though the inter-element text
does
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.
flex item
establishes an independent formatting context
for its contents.
However, flex items themselves are
flex-level
boxes, not block-level boxes:
they participate in their container’s flex formatting context,
not in a block formatting context.
Note:
Authors reading this spec may want to
skip past the following box-generation and static position details
If the
computed
display
value of an element’s nearest ancestor element
(skipping
display:contents
ancestors)
is
flex
or
inline-flex
the element’s own
display
value is
blockified
(See
CSS2.1§9.7
[CSS2]
and
CSS Display 3
§ 2.7 Automatic Box Type Transformations
for details on this type of
display
value conversion.)
Note:
Blockification still occurs even when the
flex
or
inline-flex
element does not end up generating a
flex container
box,
e.g. when it is
replaced
or in a
display: none
subtree.
Note:
Some values of
display
normally trigger the creation of anonymous boxes around the original box.
If such a box is a
flex item
it is blockified first,
and so anonymous box creation will not happen.
For example, two contiguous
flex items
with
display: table-cell
will become two separate
display: block
flex items
instead of being wrapped into a single anonymous table.
In the case of flex items with
display: table
the table wrapper box becomes the
flex item
so the
align-self
property applies to it.
The contents of any caption boxes contribute to the calculation of
the table wrapper box’s min-content and max-content sizes.
However, like
width
and
height
, the
flex
longhands apply to the table box as follows:
the
flex item
’s final size is calculated
by performing layout as if the distance between
the table wrapper box’s edges and the table box’s content edges
were all part of the table box’s border+padding area,
and the table box were the
flex item
Tests
flexbox-table-fixup-001.xhtml
(live test)
(source)
4.1.
Absolutely-Positioned Flex Children
As it is
out-of-flow
an absolutely-positioned child of a
flex container
does not participate in flex layout.
The
cross-axis
edges of the
static-position rectangle
of an absolutely-positioned child of a
flex container
are the
content edges
of the
flex container
The
main-axis
edges of the
static-position rectangle
are where the
margin edges
of the child would be positioned
if it were the sole
flex item
in the
flex container
assuming both the child and the flex container
were fixed-size boxes of their used size.
(For this purpose,
the child’s
auto
margins are treated as zero.)
Tests
abspos-autopos-htb-ltr.html
(live test)
(source)
abspos-autopos-htb-rtl.html
(live test)
(source)
abspos-autopos-vlr-ltr.html
(live test)
(source)
abspos-autopos-vlr-rtl.html
(live test)
(source)
abspos-autopos-vrl-ltr.html
(live test)
(source)
abspos-autopos-vrl-rtl.html
(live test)
(source)
dynamic-align-self-001.html
(live test)
(source)
flex-abspos-staticpos-align-self-safe-002.html
(live test)
(source)
flex-abspos-staticpos-align-self-safe-003.html
(live test)
(source)
abspos-descendent-001.html
(live test)
(source)
flex-abspos-staticpos-align-content-001.html
(live test)
(source)
flex-abspos-staticpos-align-self-001.html
(live test)
(source)
flex-abspos-staticpos-align-self-002.html
(live test)
(source)
flex-abspos-staticpos-align-self-003.html
(live test)
(source)
flex-abspos-staticpos-align-self-004.html
(live test)
(source)
flex-abspos-staticpos-align-self-005.html
(live test)
(source)
flex-abspos-staticpos-align-self-006.html
(live test)
(source)
flex-abspos-staticpos-align-self-007.html
(live test)
(source)
flex-abspos-staticpos-align-self-008.html
(live test)
(source)
flex-abspos-staticpos-align-self-rtl-001.html
(live test)
(source)
flex-abspos-staticpos-align-self-rtl-002.html
(live test)
(source)
flex-abspos-staticpos-align-self-rtl-003.html
(live test)
(source)
flex-abspos-staticpos-align-self-rtl-004.html
(live test)
(source)
flex-abspos-staticpos-align-self-safe-001.html
(live test)
(source)
flex-abspos-staticpos-align-self-vertWM-001.html
(live test)
(source)
flex-abspos-staticpos-align-self-vertWM-002.html
(live test)
(source)
flex-abspos-staticpos-align-self-vertWM-003.html
(live test)
(source)
flex-abspos-staticpos-align-self-vertWM-004.html
(live test)
(source)
flex-abspos-staticpos-fallback-justify-content-001.html
(live test)
(source)
flex-abspos-staticpos-justify-content-001.html
(live test)
(source)
flex-abspos-staticpos-justify-content-002.html
(live test)
(source)
flex-abspos-staticpos-justify-content-003.html
(live test)
(source)
flex-abspos-staticpos-justify-content-004.html
(live test)
(source)
flex-abspos-staticpos-justify-content-005.html
(live test)
(source)
flex-abspos-staticpos-justify-content-006.html
(live test)
(source)
flex-abspos-staticpos-justify-content-007.html
(live test)
(source)
flex-abspos-staticpos-justify-content-008.html
(live test)
(source)
flex-abspos-staticpos-justify-content-rtl-001.html
(live test)
(source)
flex-abspos-staticpos-justify-content-rtl-002.html
(live test)
(source)
flex-abspos-staticpos-justify-content-vertWM-001.html
(live test)
(source)
flex-abspos-staticpos-justify-content-vertWM-002.html
(live test)
(source)
flex-abspos-staticpos-justify-self-001.html
(live test)
(source)
flex-abspos-staticpos-margin-001.html
(live test)
(source)
flex-abspos-staticpos-margin-002.html
(live test)
(source)
flex-abspos-staticpos-margin-003.html
(live test)
(source)
flexbox_absolute-atomic.html
(live test)
(source)
flexbox-abspos-child-001a.html
(live test)
(source)
flexbox-abspos-child-001b.html
(live test)
(source)
flexbox-abspos-child-002.html
(live test)
(source)
flexbox_inline-abspos.html
(live test)
(source)
position-absolute-001.html
(live test)
(source)
position-absolute-002.html
(live test)
(source)
position-absolute-003.html
(live test)
(source)
position-absolute-004.html
(live test)
(source)
position-absolute-005.html
(live test)
(source)
position-absolute-006.html
(live test)
(source)
position-absolute-007.html
(live test)
(source)
position-absolute-008.html
(live test)
(source)
position-absolute-009.html
(live test)
(source)
position-absolute-010.html
(live test)
(source)
position-absolute-011.html
(live test)
(source)
position-absolute-012.html
(live test)
(source)
position-absolute-013.html
(live test)
(source)
position-absolute-014.html
(live test)
(source)
position-absolute-015.html
(live test)
(source)
position-absolute-containing-block-001.html
(live test)
(source)
position-absolute-containing-block-002.html
(live test)
(source)
flex-content-alignment-with-abspos-001.html
(live test)
(source)
dynamic-grid-flex-abspos.html
(live test)
(source)
flexbox_stf-abspos.html
(live test)
(source)
flex-item-position-relative-001.html
(live test)
(source)
The effect of this is that if you set, for example,
align-self: center;
on an absolutely-positioned child of a
flex container
auto offsets on the child will center it in the
flex container’s
cross axis
4.2.
Flex Item Margins and Paddings
The margins of adjacent
flex items
do not
collapse
Percentage margins and paddings on
flex items
like those on
block boxes
are resolved against the
inline size
of their
containing block
e.g. left/right/top/bottom percentages
all resolve against their
containing block
’s
width
in horizontal
writing modes
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
Aligning with
auto
margins
Tests
empty-flex-box-and-margin-collapsing.html
(live test)
(source)
flex-container-margin.html
(live test)
(source)
flexitem-no-margin-collapsing.html
(live test)
(source)
flex-margin-no-collapse.html
(live test)
(source)
negative-margins-001.html
(live test)
(source)
4.3.
Flex Item Z-Ordering
Flex items
paint exactly the same as inline blocks
[CSS2]
except that
order
-modified document order is used in place of raw document order,
and
z-index
values other than
auto
create a stacking context
even if
position
is
static
(behaving exactly as if
position
were
relative
).
Note:
Descendants that are positioned outside a flex item still participate
in any stacking context established by the flex item.
Tests
flexbox-paint-ordering-001.xhtml
(live test)
(source)
flexbox-paint-ordering-002.xhtml
(live test)
(source)
flexbox-paint-ordering-003.html
(live test)
(source)
flex-item-z-ordering-001.html
(live test)
(source)
flex-item-z-ordering-002.html
(live test)
(source)
flexbox-items-as-stacking-contexts-001.xhtml
(live test)
(source)
flexbox-items-as-stacking-contexts-002.html
(live test)
(source)
flexbox-items-as-stacking-contexts-003.html
(live test)
(source)
hittest-overlapping-margin.html
(live test)
(source)
hittest-overlapping-order.html
(live test)
(source)
hittest-overlapping-relative.html
(live test)
(source)
4.4.
Collapsed Items
Specifying
visibility:collapse
on a flex item
causes it to become a
collapsed flex item
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
flex container
’s
main size
, but
is guaranteed to have no effect on its
cross size
and won’t cause the rest of the page’s layout to "wobble".
Flex line wrapping
is
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
formatting structure
Therefore, unlike on
display:none
items
[CSS2]
effects that depend on a box appearing in the formatting structure
(like incrementing counters or running animations and transitions)
still operate on collapsed items.
Tests
flexbox_visibility-collapse.html
(live test)
(source)
flexbox_visibility-collapse-line-wrapping.html
(live test)
(source)
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 (“Architecture”)
is in a collapsed section.
Sample live rendering for example code below
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.
@media
min-width:
60
em
/*
two column layout only when enough room
(relative to default text size) */
div
display
flex
#main
flex
/*
Main takes up all remaining space
*/
order:
/* Place it after (to the right of) the navigation */
min-width:
12
em
/* 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 targeted */
nav > ul > li:not
:target
:not
:hover
> ul
visibility
collapse
div
article
id
"main"
Interesting Stuff to Read
article
nav
ul
li
id
"nav-about"
><
href
"#nav-about"
About
li
id
"nav-projects"
><
href
"#nav-projects"
Projects
ul
li
><
href
"…"
Art
li
><
href
"…"
Architecture
li
><
href
"…"
Music
ul
li
id
"nav-interact"
><
href
"#nav-interact"
Interact
ul
nav
div
footer
To compute the size of the strut, flex layout is first performed with all items uncollapsed,
and then re-run with each
collapsed flex item
replaced by a strut that maintains
the original
cross size
of the item’s original line.
See the
Flex Layout Algorithm
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.)
4.5.
Automatic Minimum Size of Flex Items
Note:
The
auto
keyword,
representing an
automatic minimum size
is the new initial value of the
min-width
and
min-height
properties.
The keyword was previously defined in this specification,
but is now defined in the
CSS Sizing
module.
To provide a more reasonable default
minimum size
for
flex items
the used value of a
main axis
automatic minimum size
on a
flex item
whose
computed
overflow
value is
non-scrollable
is its
content-based minimum size
for
scroll containers
the
automatic minimum size
is zero, as usual.
The
content-based minimum size
of a
flex item
differs depending on whether the
flex item
is
replaced
or not:
For
replaced elements
Use the smaller of the
content size suggestion
and the
transferred size suggestion
(if one exists),
capped by the
specified size suggestion
(if one exists).
For
non-replaced elements
Use the larger of the
content size suggestion
and the
transferred size suggestion
(if one exists),
capped by the
specified size suggestion
(if one exists).
In either case,
the size is clamped by the
maximum
main size
if it’s
definite
Tests
image-items-flake-001.html
(live test)
(source)
The
content size suggestion
specified size suggestion
, and
transferred size suggestion
used in this calculation account for the relevant min/max/preferred size properties
so that the
content-based minimum size
does not interfere with any author-provided constraints,
and are defined below:
specified size suggestion
If the item’s
preferred
main size
is
definite
and not
automatic
then the
specified size suggestion
is that size.
It is otherwise undefined.
transferred size suggestion
If the item has a
preferred aspect ratio
and its
preferred
cross size
is
definite
then the
transferred size suggestion
is that size
(clamped by its
minimum
and
maximum
cross sizes
if they are
definite
),
converted through the aspect ratio.
It is otherwise undefined.
content size suggestion
The
content size suggestion
is the
min-content size
in the
main axis
clamped, if it has a
preferred aspect ratio
by any
definite
minimum
and
maximum
cross sizes
converted through the aspect ratio.
Tests
content-height-with-scrollbars.html
(live test)
(source)
fieldset-as-item-dynamic.html
(live test)
(source)
fieldset-as-item-overflow.html
(live test)
(source)
flex-aspect-ratio-img-column-001.html
(live test)
(source)
flex-aspect-ratio-img-column-002.html
(live test)
(source)
flex-aspect-ratio-img-column-003.html
(live test)
(source)
flex-aspect-ratio-img-column-004.html
(live test)
(source)
flex-aspect-ratio-img-column-005.html
(live test)
(source)
flex-aspect-ratio-img-column-006.html
(live test)
(source)
flex-aspect-ratio-img-column-007.html
(live test)
(source)
flex-aspect-ratio-img-column-008.html
(live test)
(source)
flex-aspect-ratio-img-column-009.html
(live test)
(source)
flex-aspect-ratio-img-column-010.html
(live test)
(source)
flex-aspect-ratio-img-column-011.html
(live test)
(source)
flex-aspect-ratio-img-column-012.html
(live test)
(source)
flex-aspect-ratio-img-column-013.html
(live test)
(source)
flex-aspect-ratio-img-column-014.html
(live test)
(source)
flex-aspect-ratio-img-column-015.html
(live test)
(source)
flex-aspect-ratio-img-column-016.html
(live test)
(source)
flex-aspect-ratio-img-column-017.html
(live test)
(source)
flex-aspect-ratio-img-column-018.html
(live test)
(source)
flex-aspect-ratio-img-row-001.html
(live test)
(source)
flex-aspect-ratio-img-row-002.html
(live test)
(source)
flex-aspect-ratio-img-row-003.html
(live test)
(source)
flex-aspect-ratio-img-row-004.html
(live test)
(source)
flex-aspect-ratio-img-row-005.html
(live test)
(source)
flex-aspect-ratio-img-row-006.html
(live test)
(source)
flex-aspect-ratio-img-row-007.html
(live test)
(source)
flex-aspect-ratio-img-row-008.html
(live test)
(source)
flex-aspect-ratio-img-row-009.html
(live test)
(source)
flex-aspect-ratio-img-row-010.html
(live test)
(source)
flex-aspect-ratio-img-row-011.html
(live test)
(source)
flex-aspect-ratio-img-row-012.html
(live test)
(source)
flex-aspect-ratio-img-row-013.html
(live test)
(source)
flex-aspect-ratio-img-row-014.html
(live test)
(source)
flex-aspect-ratio-img-row-015.html
(live test)
(source)
flex-aspect-ratio-img-row-016.html
(live test)
(source)
flex-aspect-ratio-img-row-017.html
(live test)
(source)
flex-aspect-ratio-img-vert-lr.html
(live test)
(source)
flexbox-definite-cross-size-constrained-percentage.html
(live test)
(source)
flexbox-min-height-auto-001.html
(live test)
(source)
flexbox-min-height-auto-002a.html
(live test)
(source)
flexbox-min-height-auto-002b.html
(live test)
(source)
flexbox-min-height-auto-002c.html
(live test)
(source)
flexbox-min-height-auto-003.html
(live test)
(source)
flexbox-min-height-auto-004.html
(live test)
(source)
flexbox-min-width-auto-001.html
(live test)
(source)
flexbox-min-width-auto-002a.html
(live test)
(source)
flexbox-min-width-auto-002b.html
(live test)
(source)
flexbox-min-width-auto-002c.html
(live test)
(source)
flexbox-min-width-auto-003.html
(live test)
(source)
flexbox-min-width-auto-004.html
(live test)
(source)
flexbox-min-width-auto-005.html
(live test)
(source)
flexbox-min-width-auto-006.html
(live test)
(source)
flex-item-compressible-001.html
(live test)
(source)
flex-item-compressible-002.html
(live test)
(source)
flexitem-stretch-image.html
(live test)
(source)
flexitem-stretch-range.html
(live test)
(source)
flex-minimum-height-flex-items-001.xht
(live test)
(source)
flex-minimum-height-flex-items-002.xht
(live test)
(source)
flex-minimum-height-flex-items-003.xht
(live test)
(source)
flex-minimum-height-flex-items-004.xht
(live test)
(source)
flex-minimum-height-flex-items-005.xht
(live test)
(source)
flex-minimum-height-flex-items-006.xht
(live test)
(source)
flex-minimum-height-flex-items-007.xht
(live test)
(source)
flex-minimum-height-flex-items-008.xht
(live test)
(source)
flex-minimum-height-flex-items-009.html
(live test)
(source)
flex-minimum-height-flex-items-010.html
(live test)
(source)
flex-minimum-height-flex-items-011.xht
(live test)
(source)
flex-minimum-height-flex-items-012.html
(live test)
(source)
flex-minimum-height-flex-items-013.html
(live test)
(source)
flex-minimum-height-flex-items-014.html
(live test)
(source)
flex-minimum-height-flex-items-015.html
(live test)
(source)
flex-minimum-height-flex-items-016.html
(live test)
(source)
flex-minimum-height-flex-items-017.html
(live test)
(source)
flex-minimum-height-flex-items-018.html
(live test)
(source)
flex-minimum-height-flex-items-019.html
(live test)
(source)
flex-minimum-height-flex-items-020.html
(live test)
(source)
flex-minimum-height-flex-items-021.html
(live test)
(source)
flex-minimum-height-flex-items-022.html
(live test)
(source)
flex-minimum-height-flex-items-023.html
(live test)
(source)
flex-minimum-height-flex-items-024.html
(live test)
(source)
flex-minimum-height-flex-items-025.html
(live test)
(source)
flex-minimum-height-flex-items-026.html
(live test)
(source)
flex-minimum-height-flex-items-027.html
(live test)
(source)
flex-minimum-height-flex-items-028.html
(live test)
(source)
flex-minimum-height-flex-items-029.html
(live test)
(source)
flex-minimum-height-flex-items-030.html
(live test)
(source)
flex-minimum-height-flex-items-031.html
(live test)
(source)
flex-minimum-size-001.html
(live test)
(source)
flex-minimum-size-002.html
(live test)
(source)
flex-minimum-size-003.html
(live test)
(source)
flex-minimum-width-flex-items-001.xht
(live test)
(source)
flex-minimum-width-flex-items-002.xht
(live test)
(source)
flex-minimum-width-flex-items-003.xht
(live test)
(source)
flex-minimum-width-flex-items-004.xht
(live test)
(source)
flex-minimum-width-flex-items-005.xht
(live test)
(source)
flex-minimum-width-flex-items-006.xht
(live test)
(source)
flex-minimum-width-flex-items-007.xht
(live test)
(source)
flex-minimum-width-flex-items-008.xht
(live test)
(source)
flex-minimum-width-flex-items-009.html
(live test)
(source)
flex-minimum-width-flex-items-010.html
(live test)
(source)
flex-minimum-width-flex-items-011.html
(live test)
(source)
flex-minimum-width-flex-items-012.html
(live test)
(source)
flex-minimum-width-flex-items-013.html
(live test)
(source)
flex-minimum-width-flex-items-014.html
(live test)
(source)
flex-minimum-width-flex-items-015.html
(live test)
(source)
flex-minimum-width-flex-items-016.html
(live test)
(source)
flexbox_computedstyle_min-auto-size.html
(live test)
(source)
flexbox_computedstyle_min-height-auto.html
(live test)
(source)
flexbox_computedstyle_min-width-auto.html
(live test)
(source)
select-element-zero-height-001.html
(live test)
(source)
select-element-zero-height-002.html
(live test)
(source)
Note:
The
content-based minimum size
is a type of
intrinsic size contribution
and thus the cyclic percentage provisions in
CSS Sizing 3
§ 5.2 Intrinsic Contributions
apply.
For the purpose of calculating an intrinsic size of the box
(e.g. the box’s
min-content size
),
content-based minimum size
causes the box’s size in that axis to become indefinite
(even if e.g. its
width
property specifies a
definite
size).
Note this means that percentages calculated against this size
will
behave as auto
For any purpose
other than
calculating intrinsic sizes,
content-based minimum size
(unlike an explicit
min-content
/etc
minimum size
does not force the box’s size to become indefinite.
However, if a percentage resolved against the box’s size
before
this minimum was applied,
it must be re-resolved against the new size after it is applied.
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.)
Tests
aspect-ratio-intrinsic-size-001.html
(live test)
(source)
aspect-ratio-intrinsic-size-002.html
(live test)
(source)
aspect-ratio-intrinsic-size-003.html
(live test)
(source)
aspect-ratio-intrinsic-size-004.html
(live test)
(source)
aspect-ratio-intrinsic-size-005.html
(live test)
(source)
aspect-ratio-intrinsic-size-006.html
(live test)
(source)
aspect-ratio-intrinsic-size-007.html
(live test)
(source)
aspect-ratio-intrinsic-size-008.html
(live test)
(source)
aspect-ratio-intrinsic-size-009.html
(live test)
(source)
aspect-ratio-intrinsic-size-010.html
(live test)
(source)
aspect-ratio-transferred-max-size.html
(live test)
(source)
flex-item-content-is-min-width-max-content.html
(live test)
(source)
5.
Ordering and Orientation
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
only the visual rendering
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
CSS Display 3
§ 3.1 Reordering and Accessibility
and the
Flex Layout Overview
for examples
that use this dichotomy to improve accessibility.
Authors
must not
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.
5.1.
Flex Flow Direction: the
flex-direction
property
Name:
flex-direction
Value:
row
row-reverse
column
column-reverse
Initial:
row
Applies to:
flex containers
Inherited:
no
Percentages:
n/a
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
The
flex-direction
property specifies how
flex items
are placed in the flex container,
by setting the direction of the flex container’s
main axis
This determines the direction in which flex items are laid out.
row
The flex container’s
main axis
has the same orientation as the
inline axis
of the current
writing mode
The
main-start
and
main-end
directions are equivalent to the
inline-start
and
inline-end
directions, respectively,
of the current
writing mode
Tests
flex-child-percent-basis-resize-1.html
(live test)
(source)
flexbox-flex-basis-content-001a.html
(live test)
(source)
flexbox-flex-basis-content-001b.html
(live test)
(source)
flexbox-flex-direction-row.htm
(live test)
(source)
flexbox_justifycontent-left-001.html
(live test)
(source)
flexbox-writing-mode-010.html
(live test)
(source)
flexbox-writing-mode-011.html
(live test)
(source)
flexbox-writing-mode-012.html
(live test)
(source)
flexbox-writing-mode-016.html
(live test)
(source)
percentage-size.html
(live test)
(source)
row-reverse
Same as
row
except the
main-start
and
main-end
directions are swapped.
Tests
flexbox_direction-row-reverse.html
(live test)
(source)
flexbox-mbp-horiz-001-reverse.xhtml
(live test)
(source)
flexbox-mbp-horiz-001-rtl-reverse.xhtml
(live test)
(source)
multi-line-wrap-with-row-reverse.html
(live test)
(source)
flexbox_justifycontent-right-001.html
(live test)
(source)
flexbox_justifycontent-start.html
(live test)
(source)
flexbox_justifycontent-start-rtl.html
(live test)
(source)
column
The flex container’s
main axis
has the same orientation as the
block axis
of the current
writing mode
The
main-start
and
main-end
directions are equivalent to the
block-start
and
block-end
directions, respectively,
of the current
writing mode
Tests
columns-height-set-via-top-bottom.html
(live test)
(source)
dynamic-bsize-change.html
(live test)
(source)
flexbox_direction-column.html
(live test)
(source)
flexbox_direction-column-reverse.html
(live test)
(source)
flexbox_rtl-flow.html
(live test)
(source)
flex-column-relayout-assert.html
(live test)
(source)
flex-item-max-height-min-content.html
(live test)
(source)
flex-item-transferred-sizes-padding-border-sizing.html
(live test)
(source)
flex-item-transferred-sizes-padding-content-sizing.html
(live test)
(source)
flex-outer-flexbox-column-recalculate-height-on-resize-001.html
(live test)
(source)
image-nested-within-definite-column-flexbox.html
(live test)
(source)
layout-with-inline-svg-001.html
(live test)
(source)
nested-orthogonal-flexbox-relayout.html
(live test)
(source)
percentage-max-width-cross-axis.html
(live test)
(source)
percentage-size.html
(live test)
(source)
column-reverse
Same as
column
except the
main-start
and
main-end
directions are swapped.
Tests
column-reverse-gap.html
(live test)
(source)
flexbox_rtl-direction.html
(live test)
(source)
multi-line-wrap-with-column-reverse.html
(live test)
(source)
Note:
The reverse values do not reverse box ordering:
like
writing-mode
and
direction
[CSS3-WRITING-MODES]
they only change the direction of flow.
Painting order, speech order, and sequential navigation orders
are not affected.
Note:
Depending on the value of
justify-content
the reverse values of
flex-direction
can alter the initial scroll position
on
flex containers
that are also
scroll containers
See
CSS Box Alignment 3
§ 5.3 Alignment Overflow and Scroll Containers
Tests
discrete-no-interpolation.html
(live test)
(source)
change-column-flex-width.html
(live test)
(source)
column-flex-child-with-max-width.html
(live test)
(source)
column-flex-child-with-overflow-scroll.html
(live test)
(source)
cross-axis-scrollbar.html
(live test)
(source)
dynamic-orthogonal-flex-item.html
(live test)
(source)
flexbox-writing-mode-001.html
(live test)
(source)
flexbox-writing-mode-002.html
(live test)
(source)
flexbox-writing-mode-003.html
(live test)
(source)
flexbox-writing-mode-004.html
(live test)
(source)
flexbox-writing-mode-005.html
(live test)
(source)
flexbox-writing-mode-006.html
(live test)
(source)
flexbox-writing-mode-007.html
(live test)
(source)
flexbox-writing-mode-008.html
(live test)
(source)
flexbox-writing-mode-009.html
(live test)
(source)
flexbox-writing-mode-010.html
(live test)
(source)
flexbox-writing-mode-011.html
(live test)
(source)
flexbox-writing-mode-012.html
(live test)
(source)
flexbox-writing-mode-013.html
(live test)
(source)
flexbox-writing-mode-014.html
(live test)
(source)
flexbox-writing-mode-015.html
(live test)
(source)
flexbox-writing-mode-016.html
(live test)
(source)
flexbox-writing-mode-slr.html
(live test)
(source)
flexbox-writing-mode-slr-row-mix.html
(live test)
(source)
flexbox-writing-mode-slr-rtl.html
(live test)
(source)
flexbox-writing-mode-srl.html
(live test)
(source)
flexbox-writing-mode-srl-row-mix.html
(live test)
(source)
flexbox-writing-mode-srl-rtl.html
(live test)
(source)
flexbox_object.html
(live test)
(source)
flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.html
(live test)
(source)
flexbox_computedstyle_flex-direction-column.html
(live test)
(source)
flexbox_computedstyle_flex-direction-column-reverse.html
(live test)
(source)
flexbox_computedstyle_flex-direction-invalid.html
(live test)
(source)
flexbox_computedstyle_flex-direction-row.html
(live test)
(source)
flexbox_computedstyle_flex-direction-row-reverse.html
(live test)
(source)
5.2.
Flex Line Wrapping: the
flex-wrap
property
Name:
flex-wrap
Value:
nowrap
wrap
wrap-reverse
Initial:
nowrap
Applies to:
flex containers
Inherited:
no
Percentages:
n/a
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
The
flex-wrap
property controls whether the flex container is
single-line
or
multi-line
and the direction of the
cross-axis
which determines the direction new lines are stacked in.
nowrap
The flex container is
single-line
wrap
The flex container is
multi-line
wrap-reverse
Same as
wrap
For the values that are not
wrap-reverse
the
cross-start
direction is equivalent to either
the
inline-start
or
block-start
direction of the current
writing mode
(whichever is in the
cross axis
and the
cross-end
direction is the opposite direction of
cross-start
When
flex-wrap
is
wrap-reverse
the
cross-start
and
cross-end
directions
are swapped.
Note:
Depending on the value of
align-content
the
wrap-reverse
value of
flex-wrap
can alter the initial scroll position
on
flex containers
that are also
scroll containers
See
CSS Box Alignment 3
§ 5.3 Alignment Overflow and Scroll Containers
Tests
discrete-no-interpolation.html
(live test)
(source)
flexbox-flex-wrap-default.htm
(live test)
(source)
flexbox-flex-wrap-flexing-002.html
(live test)
(source)
flexbox-flex-wrap-flexing-003.html
(live test)
(source)
flexbox-flex-wrap-flexing.html
(live test)
(source)
flexbox-flex-wrap-horiz-001.html
(live test)
(source)
flexbox-flex-wrap-horiz-002.html
(live test)
(source)
flexbox-flex-wrap-nowrap.htm
(live test)
(source)
flexbox-flex-wrap-vert-001.html
(live test)
(source)
flexbox-flex-wrap-vert-002.html
(live test)
(source)
flexbox-flex-wrap-wrap.htm
(live test)
(source)
flexbox-flex-wrap-wrap-reverse.htm
(live test)
(source)
flexbox_rowspan.html
(live test)
(source)
flexbox_rtl-flow.html
(live test)
(source)
flexbox_rtl-flow-reverse.html
(live test)
(source)
flexbox_rtl-order.html
(live test)
(source)
flex-box-wrap.html
(live test)
(source)
flexbox_wrap.html
(live test)
(source)
flexbox_wrap-long.html
(live test)
(source)
flexbox_wrap-reverse.html
(live test)
(source)
multi-line-wrap-reverse-column-reverse.html
(live test)
(source)
multi-line-wrap-reverse-row-reverse.html
(live test)
(source)
flexbox_computedstyle_flex-wrap-invalid.html
(live test)
(source)
flexbox_computedstyle_flex-wrap-nowrap.html
(live test)
(source)
flexbox_computedstyle_flex-wrap-wrap.html
(live test)
(source)
flexbox_computedstyle_flex-wrap-wrap-reverse.html
(live test)
(source)
multiline-min-preferred-width.html
(live test)
(source)
multiline-reverse-wrap-baseline.html
(live test)
(source)
5.3.
Flex Direction and Wrap: the
flex-flow
shorthand
Name:
flex-flow
Value:
<'flex-direction'>
||
<'flex-wrap'>
Initial:
see individual properties
Applies to:
see individual properties
Inherited:
see individual properties
Percentages:
see individual properties
Computed value:
see individual properties
Animation type:
see individual properties
Canonical order:
per grammar
Tests
box-sizing-001.html
(live test)
(source)
button-column-wrap-crash.html
(live test)
(source)
column-intrinsic-size-aspect-ratio-crash.html
(live test)
(source)
css-flexbox-row.html
(live test)
(source)
css-flexbox-row-reverse.html
(live test)
(source)
css-flexbox-row-reverse-wrap.html
(live test)
(source)
css-flexbox-row-reverse-wrap-reverse.html
(live test)
(source)
css-flexbox-row-wrap.html
(live test)
(source)
css-flexbox-row-wrap-reverse.html
(live test)
(source)
css-flexbox-test1.html
(live test)
(source)
flexbox-flex-direction-column.htm
(live test)
(source)
flexbox-flex-direction-column-percentage-ignored.html
(live test)
(source)
flexbox-flex-direction-column-reverse.htm
(live test)
(source)
flexbox-flex-direction-default.htm
(live test)
(source)
flexbox-flex-direction-row.htm
(live test)
(source)
flexbox-flex-direction-row-reverse.htm
(live test)
(source)
flex-direction-column-001-visual.html (visual test)
(source)
flex-direction-column.html
(live test)
(source)
flex-direction-column-overlap-001.html
(live test)
(source)
flex-direction-column-reverse-001-visual.html (visual test)
(source)
flex-direction-column-reverse-002-visual.html (visual test)
(source)
flex-direction-column-reverse.html
(live test)
(source)
flex-direction.html
(live test)
(source)
flex-direction-modify.html
(live test)
(source)
flex-direction-row-001-visual.html (visual test)
(source)
flex-direction-row-002-visual.html (visual test)
(source)
flex-direction-row-reverse-001-visual.html (visual test)
(source)
flex-direction-row-reverse-002-visual.html (visual test)
(source)
flex-direction-row-reverse.html
(live test)
(source)
flex-direction-row-vertical.html
(live test)
(source)
flex-direction-with-element-insert.html
(live test)
(source)
flexbox-flex-flow-001.html
(live test)
(source)
flexbox-flex-flow-002.html
(live test)
(source)
flexbox_flow-column-reverse-wrap.html
(live test)
(source)
flexbox_flow-column-reverse-wrap-reverse.html
(live test)
(source)
flexbox_flow-column-wrap.html
(live test)
(source)
flexbox_flow-column-wrap-reverse.html
(live test)
(source)
flexbox_flow-row-wrap.html
(live test)
(source)
flexbox_flow-row-wrap-reverse.html
(live test)
(source)
flex-flow-001.html
(live test)
(source)
flex-flow-002.html
(live test)
(source)
flex-flow-003.html
(live test)
(source)
flex-flow-004.html
(live test)
(source)
flex-flow-005.html
(live test)
(source)
flex-flow-006.html
(live test)
(source)
flex-flow-007.html
(live test)
(source)
flex-flow-008.html
(live test)
(source)
flex-flow-009.html
(live test)
(source)
flex-flow-010.html
(live test)
(source)
flex-flow-011.html
(live test)
(source)
flex-flow-012.html
(live test)
(source)
flex-flow-013.html
(live test)
(source)
flex-wrap-002.html
(live test)
(source)
flex-wrap-003.html
(live test)
(source)
flex-wrap-004.html
(live test)
(source)
flex-wrap-005.html
(live test)
(source)
flex-wrap-006.html
(live test)
(source)
flexbox_computedstyle_flex-flow-column.html
(live test)
(source)
flexbox_computedstyle_flex-flow-column-nowrap.html
(live test)
(source)
flexbox_computedstyle_flex-flow-column-reverse.html
(live test)
(source)
flexbox_computedstyle_flex-flow-column-reverse-nowrap.html
(live test)
(source)
flexbox_computedstyle_flex-flow-column-reverse-wrap.html
(live test)
(source)
flexbox_computedstyle_flex-flow-column-wrap.html
(live test)
(source)
flexbox_computedstyle_flex-flow-column-wrap-reverse.html
(live test)
(source)
flexbox_computedstyle_flex-flow-nowrap.html
(live test)
(source)
flexbox_computedstyle_flex-flow-row.html
(live test)
(source)
flexbox_computedstyle_flex-flow-row-nowrap.html
(live test)
(source)
flexbox_computedstyle_flex-flow-row-reverse.html
(live test)
(source)
flexbox_computedstyle_flex-flow-row-reverse-nowrap.html
(live test)
(source)
flexbox_computedstyle_flex-flow-row-reverse-wrap.html
(live test)
(source)
flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html
(live test)
(source)
flexbox_computedstyle_flex-flow-row-wrap.html
(live test)
(source)
flexbox_computedstyle_flex-flow-row-wrap-reverse.html
(live test)
(source)
flexbox_computedstyle_flex-flow-wrap.html
(live test)
(source)
multiline-column-max-height.html
(live test)
(source)
flex-direction-computed.html
(live test)
(source)
flex-direction-invalid.html
(live test)
(source)
flex-direction-valid.html
(live test)
(source)
flex-flow-computed.html
(live test)
(source)
flex-flow-invalid.html
(live test)
(source)
flex-flow-shorthand.html
(live test)
(source)
flex-flow-valid.html
(live test)
(source)
flex-wrap-computed.html
(live test)
(source)
flex-wrap-invalid.html
(live test)
(source)
flex-wrap-valid.html
(live test)
(source)
The
flex-flow
property is a shorthand for setting the
flex-direction
and
flex-wrap
properties,
which together define the flex container’s main and cross axes.
Some examples of valid flows in an English (left-to-right, horizontal writing mode) document:
div
flex-flow
row
/* Initial value. Main-axis is inline, no wrapping.
(Items will either shrink to fit or overflow.) */
div
flex-flow
column wrap
/* Main-axis is block-direction (top to bottom)
and lines wrap in the inline direction (rightwards). */
div
flex-flow
row-reverse wrap-reverse
/* Main-axis is the opposite of inline direction
(right to left). New lines wrap upwards. */
Note that the
flex-flow
directions are
writing mode
sensitive.
In vertical Japanese, for example,
row
flex container lays out its contents from top to bottom,
as seen in this example:
Japanese
flex-flow
row wrap
writing-mode
horizontal-tb
flex-flow
row wrap
writing-mode
vertical-rl
5.4.
Reordering and Accessibility: the
order
property
Flex items
are, by default, displayed and laid out
in the same order as they appear in the source document,
which represents their logical ordering.
This same order is used in rendering to non-visual media
(such as
speech
),
in the default traversal order of sequential navigation modes
(such as cycling through links,
see e.g.
tabindex
[HTML]
),
and when content is represented in non-CSS UAs.
The
order
property can be used to change flex items’ ordering,
laying them out in
order-modified document order
instead,
in order to make their spatial arrangement on the 2D visual canvas
differ from their logical order in linear presentations
such as speech and sequential navigation.
See
CSS Display 3
§ 3 Display Order: the order property
[CSS-DISPLAY-3]
Note:
Since visual perception is two-dimensional and non-linear,
the desired box order is not always the same logical order
used by non-visual media and non-CSS UAs.
Authors
must
use
order
only for visual, not logical, reordering of content.
Style sheets that use
order
to perform logical reordering are non-conforming.
Many web pages have a similar shape in the markup,
with a header on top,
a footer on bottom,
and then a content area and one or two additional columns in the middle.
Generally,
it’s desirable that the content come first in the page’s source code,
before the additional columns.
However, this makes many common designs,
such as simply having the additional columns on the left and the content area on the right,
difficult to achieve.
This has been addressed in many ways over the years,
often going by the name "Holy Grail Layout" when there are two additional columns.
order
makes this trivial.
For example, take the following sketch of a page’s code and desired layout:
header
...
header
main
article
...
article
nav
...
nav
aside
...
aside
main
footer
...
footer
This layout can be easily achieved with flex layout:
main
display
flex
main > article
order
min-width
12
em
flex
main > nav
order
width
200
px
main > aside
order
width
200
px
As an added bonus,
the columns will all be
equal-height
by default,
and the main content will be as wide as necessary to fill the screen.
Additionally,
this can then be combined with media queries to switch to an all-vertical layout on narrow screens:
@media
all and
max-width:
600
px
/* Too narrow to support three columns */
main
flex-flow
column
main > article
main > nav
main > aside
/* Return them to document order */
order:
width
auto
(Further use of multi-line flex containers to achieve even more intelligent wrapping left as an exercise for the reader.)
6.
Flex Lines
Flex items
in a
flex container
are laid out and aligned
within
flex lines
hypothetical containers used for grouping and alignment by the layout algorithm.
A flex container can be either
single-line
or
multi-line
depending on the
flex-wrap
property:
single-line flex container
(i.e. one with
flex-wrap: nowrap
lays out all of its children in a single line,
even if that would cause its contents to overflow.
multi-line flex container
(i.e. one with
flex-wrap: wrap
or
flex-wrap: wrap-reverse
breaks its
flex items
across multiple lines,
similar to how text is broken onto a new line when it gets too wide to fit on the existing line.
When additional lines are created,
they are stacked in the flex container along the
cross axis
according to the
flex-wrap
property.
Every line contains at least one
flex item
unless the flex container itself is completely empty.
This example shows four buttons that do not fit side-by-side horizontally,
and therefore will wrap into multiple lines.
#flex
display
flex
flex-flow
row wrap
width
300
px
.item
width
80
px
div
id
"flex"
div
class
"item"
div
div
class
"item"
div
div
class
"item"
div
div
class
"item"
div
div
Since the container is 300px wide, only three of the items fit onto a single line.
They take up 240px, with 60px left over of remaining space.
Because the
flex-flow
property specifies a
multi-line
flex container
(due to the
wrap
keyword appearing in its value),
the flex container will create an additional line to contain the last item.
An example rendering of the multi-line flex container.
Once content is broken into lines,
each line is laid out independently;
flexible lengths and the
justify-content
and
align-self
properties only consider the items on a single line at a time.
In a
multi-line
flex container
(even one with only a single line),
the
cross size
of each line
is the minimum size necessary to contain the
flex items
on the line
(after alignment due to
align-self
),
and the lines are aligned within the flex container with the
align-content
property.
In a
single-line
flex container
the
cross size
of the line is the
cross size
of the flex container,
and
align-content
has no effect.
The
main size
of a line is always the same as the
main size
of the flex container’s content box.
Tests
align-content-001.htm
(live test)
(source)
align-content-002.htm
(live test)
(source)
align-content-003.htm
(live test)
(source)
align-content-004.htm
(live test)
(source)
align-content-005.htm
(live test)
(source)
align-content-006.htm
(live test)
(source)
align-content-007.htm
(live test)
(source)
flexbox-lines-must-be-stretched-by-default.html
(live test)
(source)
Here’s the same example as the previous,
except that the flex items have all been given
flex: auto
The first line has 60px of remaining space,
and all of the items have the same flexibility,
so each of the three items on that line will receive 20px of extra width,
each ending up 100px wide.
The remaining item is on a line of its own
and will stretch to the entire width of the line, i.e. 300px.
A rendering of the same as above,
but with the items all given
flex: auto
7.
Flexibility
The defining aspect of flex layout is the ability to make the
flex items
“flex”,
altering their width/height to fill the available space in the
main dimension
This is done with the
flex
property.
A flex container distributes free space to its items (proportional to their
flex grow factor
) to fill the container,
or shrinks them (proportional to their
flex shrink factor
) to prevent overflow.
flex item
is
fully inflexible
if both its
flex-grow
and
flex-shrink
values are zero,
and
flexible
otherwise.
Tests
flex-factor-less-than-one.html
(live test)
(source)
7.1.
The
flex
Shorthand
Name:
flex
Value:
none
<'flex-grow'>
<'flex-shrink'>
||
<'flex-basis'>
Initial:
0 1 auto
Applies to:
flex items
Inherited:
no
Percentages:
see individual properties
Computed value:
see individual properties
Animation type:
by computed value type
Canonical order:
per grammar
Tests
flexbox-dyn-resize-001.html
(live test)
(source)
flex-item-max-width-min-content.html
(live test)
(source)
flex-item-min-height-min-content.html
(live test)
(source)
flex-item-min-width-min-content.html
(live test)
(source)
flex-shorthand-calc.html
(live test)
(source)
flex-computed.html
(live test)
(source)
flex-invalid.html
(live test)
(source)
flex-shorthand.html
(live test)
(source)
flex-valid.html
(live test)
(source)
The
flex
property specifies the components of a flexible size:
the
flex factors
grow
and
shrink
and the
flex basis
When a box is a
flex item
flex
is consulted
instead of
the
main size property
to determine the
main size
of the box.
If a box is not a
flex item
flex
has no effect.
Note:
The initial values of the
flex
longhands are equivalent to
flex: 0 1 auto
This differs from their defaults when omitted in the
flex
shorthand
(effectively
1 1 0px
so that the
flex
shorthand can better accommodate
the most common cases
<'flex-grow'>
This
component sets
flex-grow
longhand
and specifies the
flex grow factor
which determines how much the
flex item
will grow
relative to the rest of the
flex items
in the flex container
when positive free space is distributed.
When omitted, it is set to
Tests
flex-grow-interpolation.html
(live test)
(source)
flex-001.htm
(live test)
(source)
flex-003.htm
(live test)
(source)
flex-grow-001.xht
(live test)
(source)
flex-grow-002.html
(live test)
(source)
flex-grow-003.html
(live test)
(source)
flex-grow-004.html
(live test)
(source)
flex-grow-005.html
(live test)
(source)
flex-grow-006.html
(live test)
(source)
flex-grow-007.html
(live test)
(source)
flex-grow-008.html
(live test)
(source)
flexbox_flex-natural.html
(live test)
(source)
flexbox_flex-natural-mixed-basis-auto.html
(live test)
(source)
flexbox_flex-natural-mixed-basis.html
(live test)
(source)
flexbox_flex-natural-variable-auto-basis.html
(live test)
(source)
flexbox_flex-natural-variable-zero-basis.html
(live test)
(source)
flexbox_flex-none.html
(live test)
(source)
flexbox_flex-none-wrappable-content.html
(live test)
(source)
flex-factor-less-than-one.html
(live test)
(source)
flexbox_computedstyle_flex-shorthand-0-auto.html
(live test)
(source)
flexbox_computedstyle_flex-shorthand-auto.html
(live test)
(source)
flexbox_computedstyle_flex-shorthand.html
(live test)
(source)
flexbox_computedstyle_flex-shorthand-initial.html
(live test)
(source)
flexbox_computedstyle_flex-shorthand-invalid.html
(live test)
(source)
flexbox_computedstyle_flex-shorthand-none.html
(live test)
(source)
flexbox_computedstyle_flex-shorthand-number.html
(live test)
(source)
flexbox_computedstyle_flex-grow-0.html
(live test)
(source)
flexbox_computedstyle_flex-grow-invalid.html
(live test)
(source)
flexbox_computedstyle_flex-grow-number.html
(live test)
(source)
flexbox_interactive_flex-grow-transitions.html (manual test)
(source)
flex-grow-computed.html
(live test)
(source)
flex-grow-invalid.html
(live test)
(source)
flex-grow-valid.html
(live test)
(source)
table-item-flex-percentage-min-width.html
(live test)
(source)
table-item-flex-percentage-width.html
(live test)
(source)
Flex values between 0 and 1 have a somewhat special behavior:
when the sum of the flex values on the line is less than 1,
they will take up less than 100% of the free space.
An item’s
flex-grow
value
is effectively a request for some proportion of the free space,
with
meaning “100% of the free space”;
then if the items on the line are requesting more than 100% in total,
the requests are rebalanced to keep the same ratio but use up exactly 100% of it.
However, if the items request
less
than the full amount
(such as three items that are each
flex-grow: .25
then they’ll each get exactly what they request
(25% of the free space to each,
with the final 25% left unfilled).
See
§ 9.7 Resolving Flexible Lengths
for the exact details
of how free space is distributed.
This pattern is required for continuous behavior as
flex-grow
approaches zero
(which means the item wants
none
of the free space).
Without this, a
flex-grow: 1
item would take all of the free space;
but so would a
flex-grow: 0.1
item,
and a
flex-grow: 0.01
item,
etc.,
until finally the value is small enough to underflow to zero
and the item suddenly takes up none of the free space.
With this behavior,
the item instead gradually takes less of the free space
as
flex-grow
shrinks below
smoothly transitioning to taking none of the free space at zero.
Unless this “partial fill” behavior is
specifically
what’s desired,
authors should stick to values ≥ 1;
for example, using
and
is usually better
than using
.33
and
.67
as they’re more likely to behave as intended
if items are added, removed, or line-wrapped.
<'flex-shrink'>
This
component sets
flex-shrink
longhand
and specifies the
flex shrink factor
which determines how much the
flex item
will shrink
relative to the rest of the
flex items
in the flex container
when negative free space is distributed.
When omitted, it is set to
Tests
flex-shrink-interpolation.html
(live test)
(source)
flex-002.htm
(live test)
(source)
flex-004.htm
(live test)
(source)
flex-factor-less-than-one.html
(live test)
(source)
flex-shrink-001.html
(live test)
(source)
flex-shrink-002.html
(live test)
(source)
flex-shrink-003.html
(live test)
(source)
flex-shrink-004.html
(live test)
(source)
flex-shrink-005.html
(live test)
(source)
flex-shrink-006.html
(live test)
(source)
flex-shrink-007.html
(live test)
(source)
flex-shrink-008.html
(live test)
(source)
flex-shrink-large-value-crash.html
(live test)
(source)
flexbox_computedstyle_flex-shrink-0.html
(live test)
(source)
flexbox_computedstyle_flex-shrink-invalid.html
(live test)
(source)
flexbox_computedstyle_flex-shrink-number.html
(live test)
(source)
flexbox_interactive_flex-shrink-transitions.html (manual test)
(source)
flexbox_interactive_flex-shrink-transitions-invalid.html (manual test)
(source)
flex-shrink-computed.html
(live test)
(source)
flex-shrink-invalid.html
(live test)
(source)
flex-shrink-valid.html
(live test)
(source)
table-item-flex-percentage-min-width.html
(live test)
(source)
table-item-flex-percentage-width.html
(live test)
(source)
Note:
The
flex shrink factor
is multiplied by the
flex base size
when distributing negative space.
This distributes negative space in proportion to how much the item is able to shrink,
so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.
Tests
flex-item-max-width-min-content-002.html
(live test)
(source)
<'flex-basis'>
This component sets the
flex-basis
longhand
which specifies the
flex basis
the initial
main size
of the
flex item
before free space is distributed according to the flex factors.
Tests
flex-basis-composition.html
(live test)
(source)
flex-basis-content-crash.html
(live test)
(source)
flex-basis-interpolation.html
(live test)
(source)
dynamic-isize-change-001.html
(live test)
(source)
dynamic-isize-change-002.html
(live test)
(source)
dynamic-isize-change-003.html
(live test)
(source)
dynamic-isize-change-004.html
(live test)
(source)
flex-basis-001.html
(live test)
(source)
flex-basis-002.html
(live test)
(source)
flex-basis-003.html
(live test)
(source)
flex-basis-004.html
(live test)
(source)
flex-basis-005.html
(live test)
(source)
flex-basis-006.html
(live test)
(source)
flex-basis-007.html
(live test)
(source)
flex-basis-008.html
(live test)
(source)
flex-basis-009.html
(live test)
(source)
flex-basis-010.html
(live test)
(source)
flex-basis-011.html
(live test)
(source)
flex-basis-012.html
(live test)
(source)
flex-basis-013.html
(live test)
(source)
flex-basis-intrinsics-001.html
(live test)
(source)
flex-basis-item-margins-001.html
(live test)
(source)
flexbox-flex-basis-content-001a.html
(live test)
(source)
flexbox-flex-basis-content-001b.html
(live test)
(source)
flexbox-flex-basis-content-002a.html
(live test)
(source)
flexbox-flex-basis-content-002b.html
(live test)
(source)
flexbox-flex-basis-content-003a.html
(live test)
(source)
flexbox-flex-basis-content-003b.html
(live test)
(source)
flexbox-flex-basis-content-004a.html
(live test)
(source)
flexbox-flex-basis-content-004b.html
(live test)
(source)
flexbox_flex-basis.html
(live test)
(source)
flexbox_flex-basis-shrink.html
(live test)
(source)
flex-one-sets-flex-basis-to-zero-px.html
(live test)
(source)
flex-shorthand-flex-basis-middle.html
(live test)
(source)
flexbox_computedstyle_flex-basis-0.html
(live test)
(source)
flexbox_computedstyle_flex-basis-0percent.html
(live test)
(source)
flexbox_computedstyle_flex-basis-auto.html
(live test)
(source)
flexbox_computedstyle_flex-basis-percent.html
(live test)
(source)
flexbox_interactive_flex-basis-transitions.html (manual test)
(source)
flex-basis-computed.html
(live test)
(source)
flex-basis-invalid.html
(live test)
(source)
flex-basis-valid.html
(live test)
(source)
table-as-item-percent-width-cell-001.html
(live test)
(source)
<'flex-basis'>
accepts the same values as the
width
and
height
properties
(except that
auto
is treated differently)
plus the
content
keyword:
auto
When specified on a
flex item
, the
auto
keyword
retrieves the value of the
main size property
as the used
flex-basis
If that value is itself
auto
, then the used value is
content
content
Indicates an
automatic size
based on the
flex item
’s content.
(This is typically equivalent to the
max-content size
but with adjustments to handle
preferred aspect ratios
intrinsic sizing constraints,
and orthogonal flows;
see
details
in
§ 9 Flex Layout Algorithm
.)
Note:
This value was not present in the initial release of Flexible Box Layout,
and thus some older implementations will not support it.
The equivalent effect can be achieved by using
auto
together with a main size (
width
or
height
) of
auto
<'width'>
For all other values,
flex-basis
is resolved the same way as for
width
and
height
When omitted from the
flex
shorthand, its specified value is
none
The keyword
none
expands to
0 0 auto
A diagram showing the difference between "absolute" flex
(starting from a basis of zero)
and "relative" flex
(starting from a basis of the item’s content size).
The three items have flex factors of
, and
, respectively:
notice that the item with a flex factor of
grows twice as fast as the others.
A unitless zero that is not already preceded by two flex factors
must be interpreted as a flex factor.
To avoid misinterpretation or invalid declarations,
authors must specify a zero
<'flex-basis'>
component
with a unit or precede it by two flex factors.
7.1.1.
Basic Values of
flex
This section is informative.
The list below summarizes the effects of the four
flex
values
that represent most commonly-desired effects:
flex: initial
Equivalent to
flex: 0 1 auto
. (This is the initial value.)
Sizes the item based on the
width
height
properties.
(If the item’s
main size property
computes to
auto
this will size the flex item based on its contents.)
Makes the flex item inflexible when there is positive free space,
but allows it to shrink to its minimum size when there is insufficient space.
The
alignment abilities
or
auto
margins
can be used to align flex items along the
main axis
flex: auto
Equivalent to
flex: 1 1 auto
Sizes the item based on the
width
height
properties,
but makes them fully flexible, so that they absorb any free space along the
main axis
If all items are either
flex: auto
flex: initial
, or
flex: none
any positive free space after the items have been sized will be distributed evenly to the items with
flex: auto
flex: none
Equivalent to
flex: 0 0 auto
This value sizes the item according to the
width
height
properties,
but makes the flex item
fully inflexible
This is similar to
initial
except that flex items are not allowed to shrink,
even in overflow situations.
flex:
Equivalent to
flex:
Makes the flex item flexible and sets the
flex basis
to zero,
resulting in an item that receives the specified proportion of the free space in the flex container.
If all items in the flex container use this pattern,
their sizes will be proportional to the specified flex factor.
Tests
flexbox_flex-auto.html
(live test)
(source)
flexbox_flex-initial-2.html
(live test)
(source)
flexbox_flex-initial.html
(live test)
(source)
radiobutton-min-size.html
(live test)
(source)
By default, flex items won’t shrink below their minimum content size
(the length of the longest word or fixed-size element).
To change this, set the
min-width
or
min-height
property.
(See
§ 4.5 Automatic Minimum Size of Flex Items
.)
7.2.
Components of Flexibility
Individual components of flexibility can be controlled by independent longhand properties.
Authors are encouraged to control flexibility using the
flex
shorthand
rather than with its longhand properties directly,
as the shorthand correctly resets any unspecified components
to accommodate
common uses
7.2.1.
The
flex-grow
property
Name:
flex-grow
Value:
Initial:
Applies to:
flex items
Inherited:
no
Percentages:
n/a
Computed value:
specified number
Canonical order:
per grammar
Animation type:
by computed value type
Tests
flex-grow-interpolation.html
(live test)
(source)
flex-001.htm
(live test)
(source)
flex-003.htm
(live test)
(source)
flex-grow-001.xht
(live test)
(source)
flex-grow-002.html
(live test)
(source)
flex-grow-003.html
(live test)
(source)
flex-grow-004.html
(live test)
(source)
flex-grow-005.html
(live test)
(source)
flex-grow-006.html
(live test)
(source)
flex-grow-007.html
(live test)
(source)
flex-grow-008.html
(live test)
(source)
flexbox_computedstyle_flex-grow-0.html
(live test)
(source)
flexbox_computedstyle_flex-grow-invalid.html
(live test)
(source)
flexbox_computedstyle_flex-grow-number.html
(live test)
(source)
flexbox_interactive_flex-grow-transitions.html (manual test)
(source)
flex-grow-computed.html
(live test)
(source)
flex-grow-invalid.html
(live test)
(source)
flex-grow-valid.html
(live test)
(source)
Authors are encouraged to control flexibility using the
flex
shorthand
rather than with
flex-grow
directly,
as the shorthand correctly resets any unspecified components
to accommodate
common uses
The
flex-grow
property sets the
flex grow factor
to the provided
Negative values are not allowed.
7.2.2.
The
flex-shrink
property
Name:
flex-shrink
Value:
Initial:
Applies to:
flex items
Inherited:
no
Percentages:
n/a
Computed value:
specified value
Canonical order:
per grammar
Animation type:
number
Tests
flex-shrink-interpolation.html
(live test)
(source)
flex-002.htm
(live test)
(source)
flex-004.htm
(live test)
(source)
flex-shrink-001.html
(live test)
(source)
flex-shrink-002.html
(live test)
(source)
flex-shrink-003.html
(live test)
(source)
flex-shrink-004.html
(live test)
(source)
flex-shrink-005.html
(live test)
(source)
flex-shrink-006.html
(live test)
(source)
flex-shrink-007.html
(live test)
(source)
flex-shrink-008.html
(live test)
(source)
flex-shrink-large-value-crash.html
(live test)
(source)
flexbox_computedstyle_flex-shrink-0.html
(live test)
(source)
flexbox_computedstyle_flex-shrink-invalid.html
(live test)
(source)
flexbox_computedstyle_flex-shrink-number.html
(live test)
(source)
flexbox_interactive_flex-shrink-transitions.html (manual test)
(source)
flexbox_interactive_flex-shrink-transitions-invalid.html (manual test)
(source)
flex-shrink-computed.html
(live test)
(source)
flex-shrink-invalid.html
(live test)
(source)
flex-shrink-valid.html
(live test)
(source)
Authors are encouraged to control flexibility using the
flex
shorthand
rather than with
flex-shrink
directly,
as the shorthand correctly resets any unspecified components
to accommodate
common uses
The
flex-shrink
property sets the
flex shrink factor
to the provided
Negative values are not allowed.
7.2.3.
The
flex-basis
property
Name:
flex-basis
Value:
content
<'width'>
Initial:
auto
Applies to:
flex items
Inherited:
no
Percentages:
relative to the
flex container’s
inner
main size
Computed value:
specified keyword or a computed
value
Canonical order:
per grammar
Animation type:
by computed value type
Tests
flex-basis-composition.html
(live test)
(source)
flex-basis-content-crash.html
(live test)
(source)
flex-basis-interpolation.html
(live test)
(source)
dynamic-isize-change-001.html
(live test)
(source)
dynamic-isize-change-002.html
(live test)
(source)
dynamic-isize-change-003.html
(live test)
(source)
dynamic-isize-change-004.html
(live test)
(source)
flex-basis-001.html
(live test)
(source)
flex-basis-002.html
(live test)
(source)
flex-basis-003.html
(live test)
(source)
flex-basis-004.html
(live test)
(source)
flex-basis-005.html
(live test)
(source)
flex-basis-006.html
(live test)
(source)
flex-basis-007.html
(live test)
(source)
flex-basis-008.html
(live test)
(source)
flex-basis-009.html
(live test)
(source)
flex-basis-010.html
(live test)
(source)
flex-basis-011.html
(live test)
(source)
flex-basis-012.html
(live test)
(source)
flex-basis-013.html
(live test)
(source)
flex-basis-intrinsics-001.html
(live test)
(source)
flex-basis-item-margins-001.html
(live test)
(source)
flexbox-flex-basis-content-001a.html
(live test)
(source)
flexbox-flex-basis-content-001b.html
(live test)
(source)
flexbox-flex-basis-content-002a.html
(live test)
(source)
flexbox-flex-basis-content-002b.html
(live test)
(source)
flexbox-flex-basis-content-003a.html
(live test)
(source)
flexbox-flex-basis-content-003b.html
(live test)
(source)
flexbox-flex-basis-content-004a.html
(live test)
(source)
flexbox-flex-basis-content-004b.html
(live test)
(source)
flexbox_flex-basis.html
(live test)
(source)
flexbox_flex-basis-shrink.html
(live test)
(source)
flex-one-sets-flex-basis-to-zero-px.html
(live test)
(source)
flex-shorthand-flex-basis-middle.html
(live test)
(source)
flexbox_computedstyle_flex-basis-0.html
(live test)
(source)
flexbox_computedstyle_flex-basis-0percent.html
(live test)
(source)
flexbox_computedstyle_flex-basis-auto.html
(live test)
(source)
flexbox_computedstyle_flex-basis-percent.html
(live test)
(source)
flexbox_interactive_flex-basis-transitions.html (manual test)
(source)
flex-basis-computed.html
(live test)
(source)
flex-basis-invalid.html
(live test)
(source)
flex-basis-valid.html
(live test)
(source)
Authors are encouraged to control flexibility using the
flex
shorthand
rather than with
flex-basis
directly,
as the shorthand correctly resets any unspecified components
to accommodate
common uses
The
flex-basis
property sets the
flex basis
It accepts the same values as the
width
and
height
property, plus
content
For all values other than
auto
and
content
(defined above),
flex-basis
is resolved the same way as
width
in horizontal writing modes
[CSS2]
except that if a value would resolve to
auto
for
width
it instead resolves to
content
for
flex-basis
For example, percentage values of
flex-basis
are resolved against
the flex item’s containing block (i.e. its
flex container
);
and if that containing block’s size is
indefinite
the used value for
flex-basis
is
content
As another corollary,
flex-basis
determines the size of the content box,
unless otherwise specified
such as by
box-sizing
[CSS3UI]
8.
Alignment
After a flex container’s contents have finished their flexing
and the dimensions of all flex items are finalized,
they can then be aligned within the flex container.
The
margin
properties can be used to align items in a manner similar to, but more powerful than, what margins can do in block layout.
Flex items
also respect the alignment properties from
CSS Box Alignment
which allow easy keyword-based alignment of items in both the
main axis
and
cross axis
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.
Note:
While the alignment properties are defined in
CSS Box Alignment
[CSS-ALIGN-3]
Flexible Box Layout reproduces the definitions of the relevant ones here
so as to not create a normative dependency that may slow down advancement of the spec.
These properties apply only to flex layout
until
CSS Box Alignment Level 3
is finished
and defines their effect for other layout modes.
Additionally, any new values defined in the Box Alignment module
will apply to Flexible Box Layout;
in other words, the Box Alignment module, once completed,
will supersede the definitions here.
Tests
baseline-outside-flex-item.html
(live test)
(source)
fieldset-baseline-alignment.html
(live test)
(source)
8.1.
Aligning with
auto
margins
This section is non-normative.
The normative definition of how margins affect flex items is in the
Flex Layout Algorithm
section.
Auto margins on flex items have an effect very similar to auto margins in block flow:
During calculations of flex bases and flexible lengths, auto margins are treated as
Prior to alignment via
justify-content
and
align-self
any positive free space is distributed to auto margins in that dimension.
Overflowing boxes ignore their auto margins and overflow in the
end
direction.
Tests
auto-height-column-with-border-and-padding.html
(live test)
(source)
auto-height-with-flex.html
(live test)
(source)
auto-margins-001.html
(live test)
(source)
auto-margins-002.html
(live test)
(source)
auto-margins-003.html
(live test)
(source)
flexbox-margin-auto-horiz-001.xhtml
(live test)
(source)
flexbox-margin-auto-horiz-002.xhtml
(live test)
(source)
flexbox_margin-auto.html
(live test)
(source)
flexbox_margin-auto-overflow.html
(live test)
(source)
Note:
If free space is distributed to auto margins,
the alignment properties will have no effect in that dimension
because the margins will have stolen all the free space
left over after flexing.
One use of
auto
margins in the main axis is to separate flex items into distinct "groups".
The following example shows how to use this to reproduce a common UI pattern -
a single bar of actions with some aligned on the left and others aligned on the right.
Sample rendering of the code below.
About
Projects
Interact
nav > ul
display
flex
nav > ul > #login
margin-left
auto
nav
ul
li
><
href
/about
About
li
><
href
/projects
Projects
li
><
href
/interact
Interact
li
id
"login"
><
href
/login
ul
nav
The figure below illustrates the difference in cross-axis alignment in overflow situations between
using
auto
margins
and using the
alignment properties
About
Authoritarianism
Blog
About
Authoritarianism
Blog
The items in the figure on the left are centered with margins,
while those in the figure on the right are centered with
align-self
If this column flex container was placed against the left edge of the page,
the margin behavior would be more desirable,
as the long item would be fully readable.
In other circumstances,
the true centering behavior might be better.
8.2.
Axis Alignment: the
justify-content
property
Name:
justify-content
Value:
flex-start
flex-end
center
space-between
space-around
Initial:
flex-start
Applies to:
flex containers
Inherited:
no
Percentages:
n/a
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
Tests
dynamic-isize-change-001.html
(live test)
(source)
dynamic-isize-change-002.html
(live test)
(source)
dynamic-isize-change-003.html
(live test)
(source)
dynamic-isize-change-004.html
(live test)
(source)
flexbox_justifycontent-center.html
(live test)
(source)
flexbox_justifycontent-center-overflow.html
(live test)
(source)
flexbox_justifycontent-end.html
(live test)
(source)
flexbox_justifycontent-end-rtl.html
(live test)
(source)
flexbox_justifycontent-flex-end.html
(live test)
(source)
flexbox_justifycontent-flex-start.html
(live test)
(source)
flexbox-justify-content-horiz-001a.xhtml
(live test)
(source)
flexbox-justify-content-horiz-001b.xhtml
(live test)
(source)
flexbox-justify-content-horiz-002.xhtml
(live test)
(source)
flexbox-justify-content-horiz-003.xhtml
(live test)
(source)
flexbox-justify-content-horiz-004.xhtml
(live test)
(source)
flexbox-justify-content-horiz-005.xhtml
(live test)
(source)
flexbox-justify-content-horiz-006.xhtml
(live test)
(source)
flexbox_justifycontent-left-001.html
(live test)
(source)
flexbox_justifycontent-left-002.html
(live test)
(source)
flexbox_justifycontent-right-001.html
(live test)
(source)
flexbox_justifycontent-right-002.html
(live test)
(source)
flexbox_justifycontent-rtl-001.html
(live test)
(source)
flexbox_justifycontent-rtl-002.html
(live test)
(source)
flexbox_justifycontent-spacearound.html
(live test)
(source)
flexbox_justifycontent-spacearound-negative.html
(live test)
(source)
flexbox_justifycontent-spacearound-only.html
(live test)
(source)
flexbox_justifycontent-spacebetween.html
(live test)
(source)
flexbox_justifycontent-spacebetween-negative.html
(live test)
(source)
flexbox_justifycontent-spacebetween-only.html
(live test)
(source)
flexbox_justifycontent-start.html
(live test)
(source)
flexbox_justifycontent-start-rtl.html
(live test)
(source)
flexbox_justifycontent-stretch.html
(live test)
(source)
flexbox-justify-content-vert-001a.xhtml
(live test)
(source)
flexbox-justify-content-vert-001b.xhtml
(live test)
(source)
flexbox-justify-content-vert-002.xhtml
(live test)
(source)
flexbox-justify-content-vert-003.xhtml
(live test)
(source)
flexbox-justify-content-vert-004.xhtml
(live test)
(source)
flexbox-justify-content-vert-005.xhtml
(live test)
(source)
flexbox-justify-content-vert-006.xhtml
(live test)
(source)
flexbox-justify-content-wmvert-001.xhtml
(live test)
(source)
flexbox-justify-content-wmvert-002.html
(live test)
(source)
flexbox-justify-content-wmvert-003.html
(live test)
(source)
flexbox_margin.html
(live test)
(source)
flexbox_margin-left-ex.html
(live test)
(source)
flexbox_computedstyle_justify-content-center.html
(live test)
(source)
flexbox_computedstyle_justify-content-flex-end.html
(live test)
(source)
flexbox_computedstyle_justify-content-flex-start.html
(live test)
(source)
flexbox_computedstyle_justify-content-space-around.html
(live test)
(source)
flexbox_computedstyle_justify-content-space-between.html
(live test)
(source)
justify-content-001.htm
(live test)
(source)
justify-content-002.htm
(live test)
(source)
justify-content-003.htm
(live test)
(source)
justify-content-004.htm
(live test)
(source)
justify-content-005.htm
(live test)
(source)
justify-content-006.html
(live test)
(source)
justify-content-007.html
(live test)
(source)
justify-content_center.html (visual test)
(source)
justify-content_flex-end.html (visual test)
(source)
justify-content_flex-start.html (visual test)
(source)
justify-content-sideways-001.html
(live test)
(source)
justify-content_space-around.html (visual test)
(source)
justify-content_space-between-001.html (visual test)
(source)
justify-content_space-between-002.html
(live test)
(source)
scrollbars-auto.html
(live test)
(source)
scrollbars.html
(live test)
(source)
scrollbars-no-margin.html
(live test)
(source)
The
justify-content
property aligns
flex items
along the
main axis
of the current line of the flex container.
This is done
after
any flexible lengths and any
auto margins
have been resolved.
Typically it helps distribute extra free space leftover when either
all the
flex items
on a line are inflexible,
or are flexible but have reached their maximum size.
It also exerts some control over the alignment of items when they overflow the line.
flex-start
Flex items
are packed toward the start of the line.
The
main-start
margin edge of the first
flex item
on the line
is placed flush with the
main-start
edge of the line,
and each subsequent
flex item
is placed flush with the preceding item.
Tests
flexbox_justifycontent-start.html
(live test)
(source)
flexbox_justifycontent-start-rtl.html
(live test)
(source)
flex-end
Flex items
are packed toward the end of the line.
The
main-end
margin edge of the last
flex item
is placed flush with the
main-end
edge of the line,
and each preceding
flex item
is placed flush with the subsequent item.
Tests
css-box-justify-content.html
(live test)
(source)
flexbox_justifycontent-end.html
(live test)
(source)
flexbox_justifycontent-end-rtl.html
(live test)
(source)
flexbox_justifycontent-flex-end.html
(live test)
(source)
center
Flex items
are packed toward the center of the line.
The
flex items
on the line are placed flush with each other
and aligned in the center of the line,
with equal amounts of space between the
main-start
edge of the line and the first item on the line
and between the
main-end
edge of the line and the last item on the line.
(If the leftover free-space is negative,
the
flex items
will overflow equally in both directions.)
Tests
flexbox_justifycontent-center.html
(live test)
(source)
flexbox_justifycontent-center-overflow.html
(live test)
(source)
space-between
Flex items
are evenly distributed in the line.
If the leftover free-space is negative
or there is only a single
flex item
on the line,
this value falls back to
safe flex-start
Otherwise,
the
main-start
margin edge of the first
flex item
on the line
is placed flush with the
main-start
edge of the line,
the
main-end
margin edge of the last
flex item
on the line
is placed flush with the
main-end
edge of the line,
and the remaining
flex items
on the line are distributed
so that the spacing between any two adjacent items is the same.
Tests
flexbox_justifycontent-spacebetween.html
(live test)
(source)
flexbox_justifycontent-spacebetween-negative.html
(live test)
(source)
flexbox_justifycontent-spacebetween-only.html
(live test)
(source)
space-around
Flex items
are evenly distributed in the line,
with half-size spaces on either end.
If the leftover free-space is negative or
there is only a single
flex item
on the line,
this value falls back to
safe center
Otherwise, the
flex items
on the line are distributed
such that the spacing between any two adjacent
flex items
on the line is the same,
and the spacing between the first/last
flex items
and the
flex container
edges
is half the size of the spacing between
flex items
Tests
flexbox-column-row-gap-001.html
(live test)
(source)
flexbox-column-row-gap-002.html
(live test)
(source)
flexbox-column-row-gap-003.html
(live test)
(source)
flexbox-column-row-gap-004.html
(live test)
(source)
flexbox_columns-flexitems-2.html
(live test)
(source)
flexbox_columns-flexitems.html
(live test)
(source)
flexbox_justifycontent-spacearound.html
(live test)
(source)
flexbox_justifycontent-spacearound-negative.html
(live test)
(source)
flexbox_justifycontent-spacearound-only.html
(live test)
(source)
An illustration of the five
justify-content
keywords and their effects on a flex container with three colored items.
8.3.
Cross-axis Alignment: the
align-items
and
align-self
properties
Name:
align-items
Value:
flex-start
flex-end
center
baseline
stretch
Initial:
stretch
Applies to:
flex containers
Inherited:
no
Percentages:
n/a
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
Tests
align-items-007.html
(live test)
(source)
align-items-008.html
(live test)
(source)
align-items-009.html
(live test)
(source)
align-items-baseline-column-horz.html
(live test)
(source)
align-items-baseline-column-vert.html
(live test)
(source)
align-items-baseline-column-vert-lr-flexbox-item.html
(live test)
(source)
align-items-baseline-column-vert-lr-grid-item.html
(live test)
(source)
align-items-baseline-column-vert-lr-items.html
(live test)
(source)
align-items-baseline-column-vert-lr-table-item.html
(live test)
(source)
align-items-baseline-column-vert-rl-flexbox-item.html
(live test)
(source)
align-items-baseline-column-vert-rl-grid-item.html
(live test)
(source)
align-items-baseline-column-vert-rl-items.html
(live test)
(source)
align-items-baseline-column-vert-rl-table-item.html
(live test)
(source)
align-items-baseline-overflow-non-visible.html
(live test)
(source)
align-items-baseline-row-horz.html
(live test)
(source)
align-items-baseline-row-vert.html
(live test)
(source)
align-items-baseline-vert-lr-column-horz-flexbox-item.html
(live test)
(source)
align-items-baseline-vert-lr-column-horz-grid-item.html
(live test)
(source)
align-items-baseline-vert-lr-column-horz-items.html
(live test)
(source)
align-items-baseline-vert-lr-column-horz-table-item.html
(live test)
(source)
align-items-baseline-vert-rl-column-horz-flexbox-item.html
(live test)
(source)
align-items-baseline-vert-rl-column-horz-grid-item.html
(live test)
(source)
align-items-baseline-vert-rl-column-horz-items.html
(live test)
(source)
align-items-baseline-vert-rl-column-horz-table-item.html
(live test)
(source)
multiline-align-self.html
(live test)
(source)
column-flex-child-with-max-width.html
(live test)
(source)
dynamic-stretch-change.html
(live test)
(source)
flexbox_align-items-baseline.html
(live test)
(source)
flexbox_align-items-center-2.html
(live test)
(source)
flexbox_align-items-center-3.html
(live test)
(source)
flexbox_align-items-center.html
(live test)
(source)
flexbox-align-items-center-nested-001.html
(live test)
(source)
flexbox_align-items-flexend-2.html
(live test)
(source)
flexbox_align-items-flexend.html
(live test)
(source)
flexbox_align-items-flexstart-2.html
(live test)
(source)
flexbox_align-items-flexstart.html
(live test)
(source)
flexbox_align-items-stretch-2.html
(live test)
(source)
flexbox_align-items-stretch-3.html
(live test)
(source)
flexbox_align-items-stretch-4.html
(live test)
(source)
flexbox_align-items-stretch.html
(live test)
(source)
flexbox_computedstyle_align-items-baseline.html
(live test)
(source)
flexbox_computedstyle_align-items-center.html
(live test)
(source)
flexbox_computedstyle_align-items-flex-end.html
(live test)
(source)
flexbox_computedstyle_align-items-flex-start.html
(live test)
(source)
flexbox_computedstyle_align-items-invalid.html
(live test)
(source)
flexbox_computedstyle_align-items-stretch.html
(live test)
(source)
position-relative-percentage-top-001.html
(live test)
(source)
position-relative-percentage-top-002.html
(live test)
(source)
position-relative-percentage-top-003.html
(live test)
(source)
relayout-align-items.html
(live test)
(source)
stretch-input-in-column.html
(live test)
(source)
stretch-requires-computed-auto-size.html
(live test)
(source)
table-as-item-stretch-cross-size-2.html
(live test)
(source)
table-as-item-stretch-cross-size-3.html
(live test)
(source)
table-as-item-stretch-cross-size-4.html
(live test)
(source)
table-as-item-stretch-cross-size-5.html
(live test)
(source)
table-as-item-stretch-cross-size.html
(live test)
(source)
Name:
align-self
Value:
auto
flex-start
flex-end
center
baseline
stretch
Initial:
auto
Applies to:
flex items
Inherited:
no
Percentages:
n/a
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
Tests
align-self-006.html (visual test)
(source)
align-self-010.html (visual test)
(source)
align-self-013.html
(live test)
(source)
align-self-014.html
(live test)
(source)
align-self-015.html
(live test)
(source)
align-self-016.html
(live test)
(source)
flexbox_align-self-auto.html
(live test)
(source)
flexbox-align-self-baseline-compatability.html
(live test)
(source)
flexbox-align-self-baseline-horiz-001a.xhtml
(live test)
(source)
flexbox-align-self-baseline-horiz-001b.xhtml
(live test)
(source)
flexbox-align-self-baseline-horiz-002.xhtml
(live test)
(source)
flexbox-align-self-baseline-horiz-003.xhtml
(live test)
(source)
flexbox-align-self-baseline-horiz-004.xhtml
(live test)
(source)
flexbox-align-self-baseline-horiz-005.xhtml
(live test)
(source)
flexbox-align-self-baseline-horiz-006.xhtml
(live test)
(source)
flexbox-align-self-baseline-horiz-007.xhtml
(live test)
(source)
flexbox-align-self-baseline-horiz-008.xhtml
(live test)
(source)
flexbox_align-self-baseline.html
(live test)
(source)
flexbox_align-self-center.html
(live test)
(source)
flexbox_align-self-flexend.html
(live test)
(source)
flexbox_align-self-flexstart.html
(live test)
(source)
flexbox-align-self-horiz-001-block.xhtml
(live test)
(source)
flexbox-align-self-horiz-001-table.xhtml
(live test)
(source)
flexbox-align-self-horiz-002.xhtml
(live test)
(source)
flexbox-align-self-horiz-003.xhtml
(live test)
(source)
flexbox-align-self-horiz-004.xhtml
(live test)
(source)
flexbox-align-self-horiz-005.xhtml
(live test)
(source)
flexbox_align-self-stretch.html
(live test)
(source)
flexbox-align-self-stretch-vert-001.html
(live test)
(source)
flexbox-align-self-stretch-vert-002.html
(live test)
(source)
flexbox-align-self-vert-001.xhtml
(live test)
(source)
flexbox-align-self-vert-002.xhtml
(live test)
(source)
flexbox-align-self-vert-003.xhtml
(live test)
(source)
flexbox-align-self-vert-004.xhtml
(live test)
(source)
flexbox-align-self-vert-rtl-001.xhtml
(live test)
(source)
flexbox-align-self-vert-rtl-002.xhtml
(live test)
(source)
flexbox-align-self-vert-rtl-003.xhtml
(live test)
(source)
flexbox-align-self-vert-rtl-004.xhtml
(live test)
(source)
flexbox-align-self-vert-rtl-005.xhtml
(live test)
(source)
flexbox_computedstyle_align-self-baseline.html
(live test)
(source)
flexbox_computedstyle_align-self-center.html
(live test)
(source)
flexbox_computedstyle_align-self-flex-end.html
(live test)
(source)
flexbox_computedstyle_align-self-flex-start.html
(live test)
(source)
flexbox_computedstyle_align-self-invalid.html
(live test)
(source)
flexbox_computedstyle_align-self-stretch.html
(live test)
(source)
Flex items
can be aligned in the
cross axis
of the current line of the flex container,
similar to
justify-content
but in the perpendicular direction.
align-items
sets the default alignment for all of the flex container’s
items
including anonymous
flex items
align-self
allows this default alignment to be overridden for individual
flex items
(For anonymous flex items,
align-self
always matches the value of
align-items
on their associated flex container.)
If either of the
flex item’s
cross-axis margins are
auto
align-self
has no effect.
Values have the following meanings:
auto
Defers
cross-axis
alignment control
to the value of
align-items
on the parent box.
(This is the initial value of
align-self
.)
Tests
align-self-007.html
(live test)
(source)
align-self-008.html
(live test)
(source)
align-self-009.html
(live test)
(source)
align-self-011.html
(live test)
(source)
align-self-012.html
(live test)
(source)
flex-start
The
cross-start
margin edge of the
flex item
is placed flush with the
cross-start
edge of the line.
Tests
align-items-002.htm
(live test)
(source)
align-items-006.html
(live test)
(source)
align-self-001.html
(live test)
(source)
flex-end
The
cross-end
margin edge of the
flex item
is placed flush with the
cross-end
edge of the line.
Tests
align-items-003.htm
(live test)
(source)
align-self-002.html
(live test)
(source)
center
The
flex item
’s margin box is centered in the
cross axis
within the line.
(If the
cross size
of the flex line is less than that of the
flex item
it will overflow equally in both directions.)
Tests
align-items-001.htm
(live test)
(source)
align-self-003.html
(live test)
(source)
baseline
The
flex item
participates in baseline alignment
all participating
flex items
on the line
are aligned such that their baselines align,
and the item with the largest distance between its baseline and its
cross-start
margin edge
is placed flush against the
cross-start
edge of the line.
If the item does not have a baseline in the necessary axis,
then one is
synthesized
from the
flex item
’s border box.
Tests
align-items-004.htm
(live test)
(source)
align-baseline.html
(live test)
(source)
dynamic-baseline-change.html
(live test)
(source)
dynamic-baseline-change-nested.html
(live test)
(source)
stretch
If the
cross size property
of the
flex item
computes to
auto
and neither of the
cross-axis
margins are
auto
the
flex item
is
stretched
Its used value is the length necessary to make the
cross size
of the item’s margin box as close to the same size as the line as possible,
while still respecting the constraints imposed by
min-height
min-width
max-height
max-width
Note:
If the flex container’s height is constrained
this value may cause the contents of the
flex item
to overflow the item.
The
cross-start
margin edge of the
flex item
is placed flush with the
cross-start
edge of the line.
Tests
align-items-005.htm
(live test)
(source)
align-self-004.html
(live test)
(source)
align-self-005.html
(live test)
(source)
css-flexbox-height-animation-stretch.html (manual test)
(source)
An illustration of the five
align-items
keywords and their effects on a flex container with four colored items.
8.4.
Packing Flex Lines: the
align-content
property
Name:
align-content
Value:
flex-start
flex-end
center
space-between
space-around
stretch
Initial:
stretch
Applies to:
multi-line
flex containers
Inherited:
no
Percentages:
n/a
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
The
align-content
property aligns a flex container’s lines within the flex container
when there is extra space in the
cross-axis
similar to how
justify-content
aligns individual items within the
main-axis
Note, this property has no effect on a
single-line
flex container
Values have the following meanings:
flex-start
Lines are packed toward the start of the flex container.
The
cross-start
edge of the first line in the flex container
is placed flush with the
cross-start
edge of the flex container,
and each subsequent line is placed flush with the preceding line.
flex-end
Lines are packed toward the end of the flex container.
The
cross-end
edge of the last line
is placed flush with the
cross-end
edge of the flex container,
and each preceding line is placed flush with the subsequent line.
center
Lines are packed toward the center of the flex container.
The lines in the flex container are placed flush with each other
and aligned in the center of the flex container,
with equal amounts of space
between the
cross-start
content edge of the flex container
and the first line in the flex container,
and between the
cross-end
content edge of the flex container
and the last line in the flex container.
(If the leftover free-space is negative,
the lines will overflow equally in both directions.)
space-between
Lines are evenly distributed in the flex container.
If the leftover free-space is negative
or there is only a single
flex line
in the flex container,
this value falls back to
safe flex-start
Otherwise,
the
cross-start
edge of the first line in the flex container
is placed flush with the
cross-start
content edge of the flex container,
the
cross-end
edge of the last line in the flex container
is placed flush with the
cross-end
content edge of the flex container,
and the remaining lines in the flex container are distributed
so that the spacing between any two adjacent lines is the same.
space-around
Lines are evenly distributed in the flex container,
with half-size spaces on either end.
If the leftover free-space is negative
this value falls back to
safe center
Otherwise, the lines in the flex container are distributed
such that the spacing between any two adjacent lines is the same,
and the spacing between the first/last lines and the
flex container
edges
is half the size of the spacing between
flex lines
stretch
Lines stretch to take up the remaining space.
If the leftover free-space is negative,
this value falls back to
flex-start
Otherwise,
the free-space is split equally between all of the lines,
increasing their cross size.
Note:
Only
multi-line
flex containers
ever have free space in the
cross-axis
for lines to be aligned in,
because in a
single-line
flex container
the sole line automatically stretches to fill the space.
An illustration of the
align-content
keywords and their effects on a
multi-line
flex container.
Tests
align-content_center.html
(live test)
(source)
align-content_flex-end.html
(live test)
(source)
align-content_flex-start.html
(live test)
(source)
align-content-horiz-001a.html
(live test)
(source)
align-content-horiz-001b.html
(live test)
(source)
align-content-horiz-002.html
(live test)
(source)
align-content_space-around.html
(live test)
(source)
align-content_space-between.html
(live test)
(source)
align-content_stretch.html
(live test)
(source)
align-content-vert-001a.html
(live test)
(source)
align-content-vert-001b.html
(live test)
(source)
align-content-vert-002.html
(live test)
(source)
align-content-wmvert-001.html
(live test)
(source)
align-content-wrap-001.html
(live test)
(source)
align-content-wrap-002.html
(live test)
(source)
align-content-wrap-003.html
(live test)
(source)
align-content-wrap-004.html
(live test)
(source)
align-content-wrap-005.html
(live test)
(source)
flex-align-content-center.html
(live test)
(source)
flex-align-content-end.html
(live test)
(source)
flex-align-content-space-around.html
(live test)
(source)
flex-align-content-space-between.html
(live test)
(source)
flex-align-content-start.html
(live test)
(source)
flexbox_align-content-center.html
(live test)
(source)
flexbox_align-content-flexend.html
(live test)
(source)
flexbox_align-content-flexstart.html
(live test)
(source)
flexbox_align-content-spacearound.html
(live test)
(source)
flexbox_align-content-spacebetween.html
(live test)
(source)
flexbox_align-content-stretch-2.html
(live test)
(source)
flexbox_align-content-stretch.html
(live test)
(source)
flexbox_computedstyle_align-content-center.html
(live test)
(source)
flexbox_computedstyle_align-content-flex-end.html
(live test)
(source)
flexbox_computedstyle_align-content-flex-start.html
(live test)
(source)
flexbox_computedstyle_align-content-space-around.html
(live test)
(source)
flexbox_computedstyle_align-content-space-between.html
(live test)
(source)
8.5.
Flex Container Baselines
In order for a
flex container
to itself
participate in baseline alignment
(e.g. when the
flex container
is itself a
flex item
in an outer
flex container
),
it needs to submit the position of the baselines that will best represent its contents.
To this end,
the baselines of a flex container are determined as follows
(after reordering with
order
and taking
flex-direction
into account):
first/last
main-axis baseline set
When the
inline axis
of the
flex container
matches its
main axis
its baselines are determined as follows:
If any of the
flex items
on the flex container’s
startmost
endmost
flex line
participate in baseline alignment
the flex container’s first/last
main-axis baseline set
is
generated
from
the shared
alignment baseline
of those
flex items
Otherwise, if the flex container has at least one
flex item
the flex container’s first/last
main-axis baseline set
is
generated
from
the
alignment baseline
of the
startmost
endmost
flex item
(If that item has no
alignment baseline
parallel to the flex container’s
main axis
then one is first
synthesized
from its border edges.)
Otherwise, the flex container has no first/last main-axis
baseline set
and one is
synthesized
if needed
according to the rules of its
alignment context
first/last
cross-axis baseline set
When the
inline axis
of the
flex container
matches its
cross axis
its baselines are determined as follows:
If the flex container has at least one
flex item
the flex container’s first/last
cross-axis baseline set
is
generated
from
the
alignment baseline
of the
startmost
endmost
flex item
(If that item has no
alignment baseline
parallel to the flex container’s
cross axis
then one is first
synthesized
from its border edges.)
Otherwise, the flex container has no first/last cross-axis
baseline set
and one is
synthesized
if needed
according to the rules of its
alignment context
When calculating the baseline according to the above rules,
if the box contributing a baseline has an
overflow
value that allows scrolling,
the box must be treated as being in its initial scroll position
for the purpose of determining its baseline.
When
determining the baseline of a table cell
a flex container provides a baseline just as a line box or table-row does.
[CSS2]
See
CSS Writing Modes 3
§ 4.1 Introduction to Baselines
and
CSS Box Alignment 3
§ 9 Baseline Alignment Details
for more information on baselines.
Tests
flex-align-baseline-001.html
(live test)
(source)
flex-align-baseline-002.html
(live test)
(source)
flex-align-baseline-003.html
(live test)
(source)
flex-align-baseline-004.html
(live test)
(source)
flex-align-baseline-005.html
(live test)
(source)
flex-align-baseline-006.html
(live test)
(source)
flex-align-baseline-007.html
(live test)
(source)
flex-align-baseline-column-rtl-direction.html
(live test)
(source)
flex-align-baseline-column-vert-lr-rtl-wrap-reverse.html
(live test)
(source)
flex-align-baseline-column-vert-rl-rtl-wrap-reverse.html
(live test)
(source)
flex-align-baseline-fieldset-001.html
(live test)
(source)
flex-align-baseline-fieldset-002.html
(live test)
(source)
flex-align-baseline-fieldset-003.html
(live test)
(source)
flex-align-baseline-flex-001.html
(live test)
(source)
flex-align-baseline-flex-002.html
(live test)
(source)
flex-align-baseline-flex-003.html
(live test)
(source)
flex-align-baseline-flex-004.html
(live test)
(source)
flex-align-baseline-grid-001.html
(live test)
(source)
flex-align-baseline-grid-002.html
(live test)
(source)
flex-align-baseline-grid-003.html
(live test)
(source)
flex-align-baseline-multicol-001.html
(live test)
(source)
flex-align-baseline-multicol-002.html
(live test)
(source)
flex-align-baseline-multicol-003.html
(live test)
(source)
flex-align-baseline-overflow-001.html
(live test)
(source)
flex-align-baseline-overflow-002.html
(live test)
(source)
flex-align-baseline-overflow-003.html
(live test)
(source)
flex-align-baseline-table-001.html
(live test)
(source)
flex-align-baseline-table-002.html
(live test)
(source)
flex-align-baseline-table-003.html
(live test)
(source)
flexbox-baseline-align-self-baseline-horiz-001.html
(live test)
(source)
flexbox-baseline-align-self-baseline-vert-001.html
(live test)
(source)
flexbox-baseline-empty-001a.html
(live test)
(source)
flexbox-baseline-empty-001b.html
(live test)
(source)
flexbox-baseline-multi-item-horiz-001a.html
(live test)
(source)
flexbox-baseline-multi-item-horiz-001b.html
(live test)
(source)
flexbox-baseline-multi-item-vert-001a.html
(live test)
(source)
flexbox-baseline-multi-item-vert-001b.html
(live test)
(source)
flexbox-baseline-multi-line-horiz-001.html
(live test)
(source)
flexbox-baseline-multi-line-horiz-002.html
(live test)
(source)
flexbox-baseline-multi-line-horiz-003.html
(live test)
(source)
flexbox-baseline-multi-line-horiz-004.html
(live test)
(source)
flexbox-baseline-multi-line-vert-001.html
(live test)
(source)
flexbox-baseline-multi-line-vert-002.html
(live test)
(source)
flexbox-baseline-nested-001.html
(live test)
(source)
flexbox-baseline-single-item-001a.html
(live test)
(source)
flexbox-baseline-single-item-001b.html
(live test)
(source)
9.
Flex Layout Algorithm
This section contains normative algorithms
detailing the exact layout behavior of a flex container and its contents.
The algorithms here are written 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.
Note:
This section is mainly intended for implementors.
Authors writing web pages should generally be served well by the individual property descriptions,
and do not need to read this section unless they have a deep-seated urge to understand arcane details of CSS layout.
The following sections define the algorithm for laying out a flex container and its contents.
Note:
Flex layout works with the
flex items
in
order-modified document order
not their original document order.
Tests
flexbox-basic-block-horiz-001v.xhtml
(live test)
(source)
flexbox-basic-block-horiz-001.xhtml
(live test)
(source)
flexbox-basic-block-vert-001v.xhtml
(live test)
(source)
flexbox-basic-block-vert-001.xhtml
(live test)
(source)
flexbox-basic-canvas-horiz-001v.xhtml
(live test)
(source)
flexbox-basic-canvas-horiz-001.xhtml
(live test)
(source)
flexbox-basic-canvas-vert-001v.xhtml
(live test)
(source)
flexbox-basic-canvas-vert-001.xhtml
(live test)
(source)
flexbox-basic-fieldset-horiz-001.xhtml
(live test)
(source)
flexbox-basic-fieldset-vert-001.xhtml
(live test)
(source)
flexbox-basic-iframe-horiz-001.xhtml
(live test)
(source)
flexbox-basic-iframe-vert-001.xhtml
(live test)
(source)
flexbox-basic-img-horiz-001.xhtml
(live test)
(source)
flexbox-basic-img-vert-001.xhtml
(live test)
(source)
flexbox-basic-textarea-horiz-001.xhtml
(live test)
(source)
flexbox-basic-textarea-vert-001.xhtml
(live test)
(source)
flexbox-basic-video-horiz-001.xhtml
(live test)
(source)
flexbox-basic-video-vert-001.xhtml
(live test)
(source)
flexbox-dyn-resize-001.html
(live test)
(source)
flexbox-mbp-horiz-001-rtl.xhtml
(live test)
(source)
flexbox-mbp-horiz-001.xhtml
(live test)
(source)
flexbox-mbp-horiz-002a.xhtml
(live test)
(source)
flexbox-mbp-horiz-002b.xhtml
(live test)
(source)
flexbox-mbp-horiz-002v.xhtml
(live test)
(source)
flexbox-mbp-horiz-003-reverse.xhtml
(live test)
(source)
flexbox-mbp-horiz-003v.xhtml
(live test)
(source)
flexbox-mbp-horiz-003.xhtml
(live test)
(source)
flexbox-mbp-horiz-004.xhtml
(live test)
(source)
flexbox-sizing-horiz-001.xhtml
(live test)
(source)
flexbox-sizing-horiz-002.xhtml
(live test)
(source)
flexbox-sizing-vert-001.xhtml
(live test)
(source)
flexbox-sizing-vert-002.xhtml
(live test)
(source)
percentage-max-height-001.html
(live test)
(source)
percentage-max-height-002.html
(live test)
(source)
percentage-max-height-003.html
(live test)
(source)
percentage-max-height-004.html
(live test)
(source)
percentage-max-height-005.html
(live test)
(source)
percent-height-flex-items-cross-sizes-with-mutations.html
(live test)
(source)
table-as-item-auto-min-width.html
(live test)
(source)
table-as-item-change-cell.html
(live test)
(source)
table-as-item-fixed-min-width-2.html
(live test)
(source)
table-as-item-fixed-min-width-3.html
(live test)
(source)
table-as-item-fixed-min-width.html
(live test)
(source)
table-as-item-narrow-content-2.html
(live test)
(source)
table-as-item-narrow-content.html
(live test)
(source)
table-as-item-specified-height.html
(live test)
(source)
table-as-item-specified-width.html
(live test)
(source)
table-as-item-specified-width-vertical.html
(live test)
(source)
9.1.
Initial Setup
Generate anonymous flex items
as described in
§ 4 Flex Items
9.2.
Line Length Determination
Determine the available main and cross space for the flex items.
For each dimension,
if that dimension of the
flex container
’s content box is a
definite size
, use that;
if that dimension of the
flex container
is being sized under a
min
or
max-content constraint
the available space in that dimension is that constraint;
otherwise, subtract the
flex container
’s margin, border, and padding
from the space available to the flex container in that dimension
and use that value.
This might result in an infinite value.
For example, the
available space
to a flex item in a
floated
auto
-sized
flex container
is:
the width of the
flex container
’s containing block minus the
flex container
’s margin, border, and padding in the horizontal dimension
infinite in the vertical dimension
Determine the
flex base size
and
hypothetical main size
of each item:
Tests
image-as-flexitem-size-001.html
(live test)
(source)
image-as-flexitem-size-001v.html
(live test)
(source)
image-as-flexitem-size-002.html
(live test)
(source)
image-as-flexitem-size-002v.html
(live test)
(source)
image-as-flexitem-size-003.html
(live test)
(source)
image-as-flexitem-size-003v.html
(live test)
(source)
image-as-flexitem-size-004.html
(live test)
(source)
image-as-flexitem-size-004v.html
(live test)
(source)
image-as-flexitem-size-005.html
(live test)
(source)
image-as-flexitem-size-005v.html
(live test)
(source)
image-as-flexitem-size-006.html
(live test)
(source)
image-as-flexitem-size-006v.html
(live test)
(source)
image-as-flexitem-size-007.html
(live test)
(source)
image-as-flexitem-size-007v.html
(live test)
(source)
item-with-table-with-infinite-max-intrinsic-width.html
(live test)
(source)
multiline-min-max.html
(live test)
(source)
orthogonal-writing-modes-and-intrinsic-sizing.html
(live test)
(source)
svg-root-as-flex-item-001.html
(live test)
(source)
svg-root-as-flex-item-002.html
(live test)
(source)
svg-root-as-flex-item-003.html
(live test)
(source)
svg-root-as-flex-item-004.html
(live test)
(source)
svg-root-as-flex-item-005.html
(live test)
(source)
svg-root-as-flex-item-006.html
(live test)
(source)
table-as-item-min-height-1.html
(live test)
(source)
table-as-item-wide-content.html
(live test)
(source)
table-with-infinite-max-intrinsic-width.html
(live test)
(source)
If the item has a
definite
used
flex basis
that’s the
flex base size
If the flex item has ...
preferred aspect ratio
a used
flex basis
of
content
, and
definite
cross size
then the
flex base size
is calculated from
its
used
cross size
and the
flex item
’s aspect ratio.
If the used
flex basis
is
content
or depends on its
available space
and the flex container is being sized under a min-content or max-content constraint
(e.g. when performing
automatic table layout
[CSS2]
),
size the item under that constraint.
The
flex base size
is the item’s resulting
main size
Otherwise,
if the used
flex basis
is
content
or depends on its
available space
the available main size is infinite,
and the flex item’s inline axis is parallel to the main axis,
lay the item out using
the rules for a box in an orthogonal flow
[CSS3-WRITING-MODES]
The
flex base size
is the item’s max-content
main size
Note:
This case occurs, for example,
in an English document (horizontal
writing mode
containing a column flex container
containing a vertical Japanese (vertical
writing mode
flex item
Otherwise,
size the item into the
available space
using its used
flex basis
in place of its
main size
treating a value of
content
as
max-content
If a
cross size
is needed to determine the
main size
(e.g. when the
flex item
’s
main size
is in its block axis,
or when it has a
preferred aspect ratio
and the
flex item
’s cross size is
auto
and not
definite
in this calculation use
fit-content
as the
flex item
’s
cross size
The
flex base size
is the item’s resulting
main size
Tests
css-flexbox-img-expand-evenly.html
(live test)
(source)
fit-content-item-001.html
(live test)
(source)
fit-content-item-002.html
(live test)
(source)
fit-content-item-003.html
(live test)
(source)
fit-content-item-004.html
(live test)
(source)
flexbox-vert-lr-with-img.html
(live test)
(source)
flex-container-max-content-001.html
(live test)
(source)
flex-container-min-content-001.html
(live test)
(source)
flex-height-min-content.html
(live test)
(source)
When determining the
flex base size
the item’s min and max
main sizes
are ignored
(no clamping occurs).
Furthermore, the sizing calculations that floor the content box size at zero
when applying
box-sizing
are also ignored.
(For example, an item with a specified size of zero,
positive padding, and
box-sizing: border-box
will have an outer
flex base size
of zero—and hence a negative inner
flex base size
.)
The
hypothetical main size
is the item’s
flex base size
clamped according to its
used
min and max
main sizes
(and flooring the content box size at zero).
Tests
text-as-flexitem-size-001.html
(live test)
(source)
Determine the
main size
of the flex container
using the rules of the formatting context in which it participates.
The
automatic block size
of a
block-level
flex container
is its
max-content size
The Block Layout spec should define this equivalency, but it doesn’t exist yet.
9.3.
Main Size Determination
Collect flex items into flex lines:
If the flex container is
single-line
collect all the flex items into a single flex line.
Otherwise,
starting from the first uncollected item,
collect consecutive items one by one
until the first time that the
next
collected item
would not fit into the flex container’s
inner
main size
(or until a forced break is encountered,
see
§ 10 Fragmenting Flex Layout
).
If the very first uncollected item wouldn’t fit,
collect just it into the line.
For this step,
the size of a flex item is its
outer
hypothetical main size
(Note: This can be negative.)
Repeat until all flex items have been collected into flex lines.
Note that the "collect as many" line will collect zero-sized flex items
onto the end of the previous line
even if the last non-zero item exactly "filled up" the line.
Resolve the flexible lengths
of all the flex items
to find their used
main size
. See
§ 9.7 Resolving Flexible Lengths
Tests
flexbox_quirks_body.html
(live test)
(source)
ortho-table-item-001.html
(live test)
(source)
percentage-heights-000.html
(live test)
(source)
percentage-heights-001.html
(live test)
(source)
percentage-heights-002.html
(live test)
(source)
percentage-heights-003.html
(live test)
(source)
percentage-heights-004.html
(live test)
(source)
percentage-heights-005.html
(live test)
(source)
percentage-heights-006.html
(live test)
(source)
percentage-heights-007.html
(live test)
(source)
percentage-heights-008.html
(live test)
(source)
percentage-heights-009.html
(live test)
(source)
percentage-heights-010.html
(live test)
(source)
percentage-heights-011.html
(live test)
(source)
percentage-heights-012.html
(live test)
(source)
percentage-heights-013.html
(live test)
(source)
percentage-heights-014.html
(live test)
(source)
percentage-heights-015.html
(live test)
(source)
percentage-heights-016.html
(live test)
(source)
percentage-heights-017.html
(live test)
(source)
percentage-heights-018.html
(live test)
(source)
percentage-heights-019.html
(live test)
(source)
9.4.
Cross Size Determination
Determine the
hypothetical cross size
of each item
by performing layout as if it were an
in-flow
block-level box
with the used
main size
and the given available space,
treating
auto
as
fit-content
Tests
canvas-contain-size.html
(live test)
(source)
Calculate the cross size of each flex line.
If the flex container is
single-line
and has a
definite
cross size
the
cross size
of the
flex line
is the
flex container
’s inner
cross size
Otherwise,
for each flex line:
Collect all the flex items whose inline-axis is parallel to the main-axis,
whose
align-self
is
baseline
and whose cross-axis margins are both non-
auto
Find the largest of the distances between each item’s baseline and its hypothetical outer cross-start edge,
and the largest of the distances between each item’s baseline and its hypothetical outer cross-end edge,
and sum these two values.
Among all the items not collected by the previous step,
find the largest outer
hypothetical cross size
The used
cross size
of the
flex line
is the largest of the numbers found in the previous two steps and zero.
If the flex container is
single-line
then clamp the line’s cross-size to be within
the container’s computed min and max cross sizes.
Note that if CSS 2.1’s definition of min/max-width/height applied more generally,
this behavior would fall out automatically.
Tests
flexbox-single-line-clamp-1.html
(live test)
(source)
flexbox-single-line-clamp-2.html
(live test)
(source)
flexbox-single-line-clamp-3.html
(live test)
(source)
flex-item-contains-size-layout-001.html
(live test)
(source)
flex-item-contains-strict.html
(live test)
(source)
layout-algorithm_algo-cross-line-001.html
(live test)
(source)
layout-algorithm_algo-cross-line-002.html
(live test)
(source)
Handle 'align-content: stretch'.
If the flex container has a
definite
cross size
align-content
is
stretch
and the sum of the flex lines' cross sizes is less than the flex container’s inner cross size,
increase the cross size of each flex line by equal amounts
such that the sum of their cross sizes exactly equals the flex container’s inner cross size.
Collapse
visibility:collapse
items.
If any flex items have
visibility: collapse
note the
cross size
of the line they’re in as the item’s
strut size
and restart layout from the beginning.
In this second layout round,
when
collecting items into lines
treat the collapsed items as having zero
main size
For the rest of the algorithm following that step,
ignore the collapsed items entirely
(as if they were
display:none
except that after
calculating the cross size of the lines
if any line’s cross size is less than
the largest
strut size
among all the collapsed items in the line,
set its cross size to that
strut size
Skip this step in the second layout round.
Tests
flexbox-collapsed-item-baseline-001.html
(live test)
(source)
flexbox-collapsed-item-horiz-001.html
(live test)
(source)
flexbox-collapsed-item-horiz-002.html
(live test)
(source)
flexbox-collapsed-item-horiz-003.html
(live test)
(source)
Determine the used cross size of each flex item.
If a flex item’s
cross size
depends on the available space
in the
cross axis
recalculate its cross size using the
flex line’s
cross size
(rather than the
flex container’s
) as the available space.
Otherwise,
the used cross size is the item’s
hypothetical cross size
If the flex item’s
cross size
changed as a result,
redo layout for its contents,
treating this used size as its definite cross size
so that percentage-sized children can be resolved.
Tests
table-as-item-cross-size.html
(live test)
(source)
Note:
This step does not affect the
main size
of the flex item,
even if it has a
preferred aspect ratio
Tests
flex-item-and-percentage-abspos.html
(live test)
(source)
9.5.
Main-Axis Alignment
Distribute any remaining free space.
For each flex line:
If the remaining free space is positive
and at least one main-axis margin on this line is
auto
distribute the free space equally among these margins.
Otherwise, set all
auto
margins to zero.
Align the items along the main-axis per
justify-content
9.6.
Cross-Axis Alignment
Resolve cross-axis
auto
margins.
If a flex item has
auto
cross-axis margins:
If its outer cross size
(treating those
auto
margins as zero)
is less than the cross size of its flex line,
distribute the difference in those sizes equally
to the
auto
margins.
Otherwise,
if the
block-start
or
inline-start
margin (whichever is in the cross axis)
is
auto
, set it to zero.
Set the opposite margin so that the outer cross size of the item
equals the cross size of its flex line.
Align all flex items along the cross-axis
per
align-self
if neither of the item’s cross-axis margins are
auto
Determine the flex container’s used cross size
using the rules of the
formatting context
in which it participates.
If a content-based
cross size
is needed,
use the sum of the
flex lines
cross sizes
Align all flex lines
per
align-content
9.7.
Resolving Flexible Lengths
To resolve the flexible lengths of the items within a flex line:
Determine the used flex factor
Sum the outer hypothetical main sizes of all items on the line.
If the sum is less than the flex container’s inner
main size
use the flex grow factor for the rest of this algorithm;
otherwise, use the flex shrink factor.
Each item in the flex line has a
target main size
initially set to its
flex base size
Each item is initially
unfrozen
and may become
frozen
Note:
An item’s
target main size
doesn’t change after freezing.
Size inflexible items.
Freeze,
setting its
target main size
to its
hypothetical main size
any item that has a flex factor of zero
if using the
flex grow factor
any item that has a
flex base size
greater than its
hypothetical main size
if using the
flex shrink factor
any item that has a
flex base size
smaller than its
hypothetical main size
Calculate
initial free space
Sum the outer sizes of all items on the line,
and subtract this from the flex container’s inner
main size
For frozen items, use their outer
target main size
for other items, use their outer
flex base size
Loop:
Check for flexible items.
If all the flex items on the line are frozen, exit this loop.
Calculate the
remaining free space
as for
initial free space
, above.
If the sum of the unfrozen flex items’ flex factors is less than one,
multiply the
initial free space
by this sum.
If the magnitude of this value is less than the magnitude of the
remaining free space
use this as the
remaining free space
If the
remaining free space
is non-zero,
distribute it proportional to the flex factors
If using the
flex grow factor
For every unfrozen item on the line,
find the ratio of the item’s flex grow factor
to the sum of the flex grow factors of all unfrozen items on the line.
Set the item’s
target main size
to its
flex base size
plus a fraction of the
remaining free space
proportional to the ratio.
If using the
flex shrink factor
For every unfrozen item on the line,
multiply its flex shrink factor by its inner
flex base size
and note this as its
scaled flex shrink factor
Find the ratio of the item’s
scaled flex shrink factor
to the sum of the
scaled flex shrink factors
of all unfrozen items on the line.
Set the item’s
target main size
to its
flex base size
minus a fraction of the absolute value of the
remaining free space
proportional to the ratio.
Note this may result in a negative inner
main size
it will be corrected in the next step.
Fix min/max violations.
Clamp each non-frozen item’s
target main size
by
its
used
min and max
main sizes
and floor its content-box size at zero.
If the item’s
target main size
was made smaller by this,
it’s a max violation.
If the item’s
target main size
was made larger by this,
it’s a min violation.
Freeze over-flexed items.
The total violation is the sum of the adjustments from the previous step
∑(clamped size - unclamped size)
If the total violation is:
Zero
Freeze all items.
Positive
Freeze all the items with min violations.
Negative
Freeze all the items with max violations.
Note:
This freezes at least one item,
ensuring that the loop makes progress and eventually terminates.
Return to the start of this loop.
Set each item’s used
main size
to its
target main size
Tests
item-with-max-height-and-scrollbar.html
(live test)
(source)
item-with-max-height-and-scrollbar.html
(live test)
(source)
max-width-violation.html
(live test)
(source)
relayout-image-load.html
(live test)
(source)
table-as-item-inflexible-in-column-1.html
(live test)
(source)
table-as-item-inflexible-in-column-2.html
(live test)
(source)
table-as-item-inflexible-in-row-1.html
(live test)
(source)
table-as-item-inflexible-in-row-2.html
(live test)
(source)
9.8.
Definite and Indefinite Sizes
Although CSS Sizing
[CSS-SIZING-3]
defines
definite
and
indefinite
lengths,
Flexbox has several additional cases where a length can be considered
definite
If the
flex container
has a
definite
main size
then the post-flexing
main sizes
of its
flex items
are treated as
definite
If a
flex item’s
flex basis
is
definite
then its post-flexing
main size
is also
definite
If a
single-line
flex container
has a definite
cross size
the
automatic
preferred
outer
cross size
of any
stretched
flex items
is the flex container’s inner
cross size
(clamped to the
flex item
’s min and max
cross size
and is considered
definite
Once the cross size of a flex line has been determined,
the cross sizes of items in auto-sized flex containers
are also considered definite for the purpose of layout;
see
step 11
Tests
flexbox-definite-cross-size-constrained-percentage.html
(live test)
(source)
flexbox-definite-sizes-001.html
(live test)
(source)
flexbox-definite-sizes-002.html
(live test)
(source)
flexbox-definite-sizes-003.html
(live test)
(source)
flexbox-definite-sizes-004.html
(live test)
(source)
flexbox-definite-sizes-005.html
(live test)
(source)
flexbox-definite-sizes-006.html
(live test)
(source)
height-percentage-with-dynamic-container-size.html
(live test)
(source)
percentage-widths-001.html
(live test)
(source)
position-fixed-001.html
(live test)
(source)
stretch-obeys-min-max-001.html
(live test)
(source)
stretch-obeys-min-max-002.html
(live test)
(source)
stretch-obeys-min-max-003.html
(live test)
(source)
Note:
This means that within
flex layout
“definite” sizes can require performing layout.
This was done to allow percentages inside of
flex items
to resolve where authors expected them to resolve.
9.9.
Intrinsic Sizes
The
intrinsic sizing
of a
flex container
is used
to produce various types of content-based automatic sizing,
such as shrink-to-fit logical widths (which use the
fit-content
formula)
and content-based logical heights (which use the
max-content size
).
For these computations,
auto
margins on flex items are treated as
See
[CSS-SIZING-3]
for a definition of the terms in this section.
Tests
flexbox-gap-position-absolute.html
(live test)
(source)
gap-001-lr.html
(live test)
(source)
gap-001-ltr.html
(live test)
(source)
gap-001-rl.html
(live test)
(source)
gap-001-rtl.html
(live test)
(source)
gap-002-lr.html
(live test)
(source)
gap-002-ltr.html
(live test)
(source)
gap-002-rl.html
(live test)
(source)
gap-002-rtl.html
(live test)
(source)
gap-003-lr.html
(live test)
(source)
gap-003-ltr.html
(live test)
(source)
gap-003-rl.html
(live test)
(source)
gap-003-rtl.html
(live test)
(source)
gap-004-lr.html
(live test)
(source)
gap-004-ltr.html
(live test)
(source)
gap-004-rl.html
(live test)
(source)
gap-004-rtl.html
(live test)
(source)
gap-005-lr.html
(live test)
(source)
gap-005-ltr.html
(live test)
(source)
gap-005-rl.html
(live test)
(source)
gap-005-rtl.html
(live test)
(source)
gap-006-lr.html
(live test)
(source)
gap-006-ltr.html
(live test)
(source)
gap-006-rl.html
(live test)
(source)
gap-006-rtl.html
(live test)
(source)
gap-007-lr.html
(live test)
(source)
gap-007-ltr.html
(live test)
(source)
gap-007-rl.html
(live test)
(source)
gap-007-rtl.html
(live test)
(source)
gap-008-ltr.html
(live test)
(source)
gap-009-ltr.html
(live test)
(source)
gap-010-ltr.html
(live test)
(source)
gap-011.html
(live test)
(source)
gap-012.html
(live test)
(source)
gap-013.html
(live test)
(source)
gap-014.html
(live test)
(source)
gap-015.html
(live test)
(source)
gap-016.html
(live test)
(source)
gap-017.html
(live test)
(source)
gap-018.html
(live test)
(source)
gap-019.html
(live test)
(source)
gap-020.html
(live test)
(source)
gap-021.html
(live test)
(source)
auto-min-size-001.html
(live test)
(source)
col-wrap-001.html
(live test)
(source)
col-wrap-002.html
(live test)
(source)
col-wrap-003.html
(live test)
(source)
col-wrap-004.html
(live test)
(source)
col-wrap-005.html
(live test)
(source)
col-wrap-006.html
(live test)
(source)
col-wrap-007.html
(live test)
(source)
col-wrap-008.html
(live test)
(source)
col-wrap-009.html
(live test)
(source)
col-wrap-010.html
(live test)
(source)
col-wrap-011.html
(live test)
(source)
col-wrap-012.html
(live test)
(source)
col-wrap-013.html
(live test)
(source)
col-wrap-014.html
(live test)
(source)
col-wrap-015.html
(live test)
(source)
col-wrap-016.html
(live test)
(source)
col-wrap-017.html
(live test)
(source)
col-wrap-018.html
(live test)
(source)
col-wrap-019.html
(live test)
(source)
col-wrap-020.html
(live test)
(source)
col-wrap-crash.html
(live test)
(source)
row-001.html
(live test)
(source)
row-002.html
(live test)
(source)
row-003.html
(live test)
(source)
row-004.html
(live test)
(source)
row-005.html
(live test)
(source)
row-006.html
(live test)
(source)
row-007.html
(live test)
(source)
row-008.html
(live test)
(source)
row-compat-001.html
(live test)
(source)
row-use-cases-001.html
(live test)
(source)
row-wrap-001.html
(live test)
(source)
multiline-shrink-to-fit.html
(live test)
(source)
svg-no-natural-size-grandchild.html
(live test)
(source)
9.9.1.
Flex Container Intrinsic Main Sizes
The
max-content
main size
of a
flex container
is, theoretically, the smallest size the
flex container
can take
such that when flex layout is run with that container size,
each
flex item
ends up at least as large as
its
max-content contribution
to the extent allowed by the items’ flexibility.
The
min-content
main size
of a
flex container
is, theoretically, the smallest size the
flex container
can take
such that no items overflow it,
and no item’s contents overflow the item—setting aside the cases in which the boxes layouts are
defined
to overflow
(for example with negative margins or percentage sizes that add up to more than 100%).
Tests
flex-container-max-content-001.html
(live test)
(source)
flex-container-min-content-001.html
(live test)
(source)
For the min-content size of a multi-line flex container,
see
§ 9.9.1.3 Multi-line Min-content Algorithm
For max-content sizes and for single-line min-content sizes,
an implementation is conformant to CSS Flexible Box Layout
if it conforms to either the Ideal Algorithm or the Web-compatible Algorithm,
as defined below.
9.9.1.1.
Ideal Algorithm: Max-content Size and Min-content Single-line Size
Note:
The following algorithm calculates the
flex container
’s ideal
intrinsic
main sizes
However, because it was not implemented correctly initially,
and existing content became dependent on the (unfortunately consistent) incorrect implemented behavior,
it is not Web-compatible
Implementers and the CSS Working Group are investigating to what extent
Web browser implementations can safely approach this behavior,
and further experimentation is welcome.
Considering only non-
collapsed
flex items
For each
flex item
subtract its outer
flex base size
from its
max-content contribution
size.
If that result is positive,
divide it by the item’s
flex grow factor
if the
flex grow factor
is ≥ 1,
or multiply it by the
flex grow factor
if the
flex grow factor
is < 1;
if the result is negative,
divide it by the item’s
scaled flex shrink factor
(if dividing by zero, treat the result as negative infinity).
This is the item’s
desired flex fraction
Place all
flex items
into lines of infinite length.
Within each line,
find the greatest (most positive)
desired flex fraction
among all the
flex items
This is the line’s
chosen flex fraction
If the
chosen flex fraction
is positive,
and the sum of the line’s
flex grow factors
is less than 1,
divide the
chosen flex fraction
by that sum.
If the
chosen flex fraction
is negative,
and the sum of the line’s
flex shrink factors
is less than 1,
multiply the
chosen flex fraction
by that sum.
Add each item’s
flex base size
to the product of its
flex grow factor
scaled flex shrink factor
, if shrinking)
and the
chosen flex fraction
then clamp that result by the
max main size
floored by the
min main size
The
flex container
’s
max-content size
is
the largest sum (among all the lines)
of the afore-calculated sizes of all items within a single line.
The
min-content
main size
of a
single-line
flex container
is calculated identically to the
max-content
main size
except that the
flex items
min-content contributions
are used
instead of their
max-content contributions
Implications of this algorithm when the sum of flex is less than 1
The above algorithm is designed to give the correct behavior for two cases in particular,
and make the
flex container’s
size continuous as you transition between the two:
If all items are inflexible,
the
flex container
is sized to the sum of their
flex base size
(An inflexible
flex base size
basically substitutes for a
width
height
which, when specified, is what a
max-content contribution
is based on in Block Layout.)
When all items are flexible with
flex factors
≥ 1,
the
flex container
is sized to the sum of the
max-content contributions
of its items
(or perhaps a slightly larger size,
so that every flex item is
at least
the size of its
max-content contribution
but also has the correct ratio of its size to the size of the other items,
as determined by its flexibility).
For example, if a
flex container
has a single
flex item
with
flex-basis: 100px;
but a max-content size of
200px
then when the item is
flex-grow: 0
, the
flex container
(and
flex item
) is
100px
wide,
but when the item is
flex-grow: 1
or higher, the
flex container
(and flex item) is
200px
wide.
There are several possible ways to make the overall behavior continuous between these two cases,
but all of them have drawbacks.
We chose one we feel has the least bad implications;
unfortunately, it "double-applies" the flexibility in cases with
flex factors
that are < 1.
In the above example, if the item has
flex-grow: .5
then the
flex container
ends up
150px
wide,
but the item then sizes normally into that available space,
ending up
125px
wide.
Even more involved notes on the specific behavior chosen
Principles:
Don’t explode any sizes, whether growing or shrinking, as inputs approach zero.
When flex factors are all >=1, return the minimum size necessary for every item to be >= max-content size.
Items with a zero flex shouldn’t affect the sizes at all.
Keep it continuous over variance of flex factors and item sizes.
Keep sizing variance as linear as possible with respect to linear changes to any input variable (size, flex factor).
When the sum of flex factors is >=1, return the minimum size necessary for every item to be >= max-content size.
To get these all to work together,
we have to apply some correction when either flex factors
or the sum of flex factors on a line
is < 1.
For shrink our behavior is somewhat easier;
since the explosive case of 0 shrink
results in a negative infinity desired fraction
which we’ll never choose (since we always take the largest),
we can just apply the correction at the line level,
giving us double-application only when the sum is < 1.
For positives it’s more complicated.
0 grow naively explodes into *positive* infinity,
which we’d choose,
so we need to apply the correction at the individual item level.
We do that by multiplying the space by the factor when factor is <1.
Leaving it at that would result in a double-application for items < 1
but sum >= 1,
but a *triple*-application when the sum is < 1.
To avoid *that* ridiculousness,
we apply a *reverse* correction when the sum is 1,
dividing by the sum instead.
This leaves us with a double correction in all cases for items with factors < 1.
We can’t eliminate the double-applications entirely
without giving up other, more important principles
(in particular, principle 3 —try to come up with rules that don’t double-apply
when you have two items with
flex-grow: .5
but also don’t give a
flex-grow: 0
item any power
over a
flex-grow: 1
sibling;
you can’t, as far as we can tell.)
9.9.1.2.
Web-compatible Intrinsic Sizing Algorithm: Max-content Size and Min-content Single-line Size
Note:
The following algorithm has been demonstrated to be Web-compatible.
It may be altered in the future to bring it closer to the ideal algorithm above,
if possible.
For the
max-content size
of a
flex container
take the sum of the
max-content contributions
of all the non-
collapsed
flex items
in the
flex container
For the
min-content size
of a
single-line
container,
take the sum of the
min-content contributions
of all the non-
collapsed
flex items
in the
flex container
9.9.1.3.
Multi-line Min-content Algorithm
For a
multi-line
container,
the
min-content
main size
is simply the largest
min-content contribution
of all the non-
collapsed
flex items
in the
flex container
9.9.2.
Flex Container Intrinsic Cross Sizes
The
min-content
max-content
cross size
of a
single-line
flex container
is the largest
min-content contribution
max-content contribution
(respectively)
of its
flex items
For a
multi-line
flex container
the behavior depends on whether it’s a row or column flexbox:
row
multi-line
flex container
cross size
The
min-content
max-content
cross size
is the sum of the flex line cross sizes
resulting from sizing the flex container
under a
cross-axis
min-content constraint
max-content constraint
(respectively).
column
multi-line
flex container
cross size
The
min-content
cross size
is the largest
min-content contribution
among all of its
flex items
Note:
This heuristic effectively assumes a single flex line,
in order to guarantee that the
min-content size
is smaller than the
max-content size
If the flex container has a height constraint,
this will result in overflow,
but if the
flex container
is also a
scroll container
it will at least be large enough to fit
any given column entirely within its
scrollport
The
max-content
cross size
is the sum of the
flex line
cross sizes
resulting from sizing the
flex container
under a
cross-axis
max-content constraint
using the largest
max-content
cross-size contribution among the
flex items
as the
available space
in the
cross axis
for each of the
flex items
during layout.
Note:
This heuristic gives a reasonable approximation
of the size that the
flex container
should be,
with each
flex item
laid out at its
max-content contribution
or larger,
and each
flex line
no larger than its largest
flex item
It’s not a
perfect
fit in some cases,
but doing it completely correct is insanely expensive,
and this works reasonably well.
Tests
flexbox_width-change-and-relayout-children.html
(live test)
(source)
table-as-flex-item-max-content.html
(live test)
(source)
table-as-item-flex-cross-size.html
(live test)
(source)
9.9.3.
Flex Item Intrinsic Size Contributions
The
main-size
min-content contribution
of a
flex item
is the larger of its
outer
min-content size
and outer
preferred size
if that is not an
automatic size
The
main-size
max-content contribution
of a
flex item
is the larger of its
outer
max-content size
and outer
preferred size
if that is not an
automatic size
For this purpose,
each contribution
is capped by the item’s
flex base size
if the item is not growable,
floored by the item’s
flex base size
if the item is not shrinkable,
and then further clamped by the item’s
min
max main size
10.
Fragmenting Flex Layout
Flex containers can break across pages
between items,
between lines of items (in
multi-line
mode),
and inside items.
The
break-*
properties apply to flex containers as normal for block-level or inline-level boxes.
This section defines how they apply to flex items
and the contents of flex items.
See the
CSS Fragmentation Module
for more context
[CSS3-BREAK]
The following breaking rules refer to the
fragmentation container
as the “page”.
The same rules apply in any other
fragmentation context
(Substitute “page” with the appropriate
fragmentation container
type as needed.)
For readability, in this section the terms "row" and "column" refer to the relative orientation
of the
flex container
with respect to the block flow direction of the
fragmentation context
rather than to that of the
flex container
itself.
The exact layout of a fragmented flex container
is not defined in this level of Flexible Box Layout.
However, breaks inside a flex container are subject to the following rules
(interpreted using
order-modified document order
):
In a row flex container,
the
break-before
and
break-after
values on flex items
are propagated to the flex line.
The
break-before
values on the first line
and the
break-after
values on the last line
are propagated to the flex container.
Note:
Break propagation
(like
text-decoration
propagation)
does not affect
computed values
In a column flex container,
the
break-before
values on the first item
and the
break-after
values on the last item
are propagated to the flex container.
Forced breaks on other items are applied to the item itself.
A forced break inside a flex item effectively increases the size of its contents;
it does not trigger a forced break inside sibling items.
In a row flex container,
Class A break opportunities
occur between sibling flex lines,
and
Class C break opportunities
occur between the first/last flex line and the flex container’s content edges.
In a column flex container,
Class A break opportunities
occur between sibling flex items,
and
Class C break opportunities
occur between the first/last flex items on a line and the flex container’s content edges.
[CSS3-BREAK]
When a flex container is continued after a break,
the space available to its
flex items
(in the block flow direction of the fragmentation context)
is reduced by the space consumed by flex container fragments on previous pages.
The space consumed by a flex container fragment is
the size of its content box on that page.
If as a result of this adjustment the available space becomes negative,
it is set to zero.
If the first fragment of the flex container is not at the top of the page,
and none of its flex items fit in the remaining space on the page,
the entire fragment is moved to the next page.
When breaking a
multi-line
column flex container,
the UA may organize each fragment into its own “stack” of flex lines—just like each fragment of a multi-column container
has its own row of column boxes—in order to ensure that content presented on earlier pages
corresponds to content earlier in the box order.
Aside from the rearrangement of items imposed by the previous point,
UAs should attempt to minimize distortion of the flex container
with respect to unfragmented flow.
Tests
flexbox_interactive_break-after-column-item.html (manual test)
(source)
flexbox_interactive_break-after-column-lastitem.html (manual test)
(source)
flexbox_interactive_break-after-container.html (manual test)
(source)
flexbox_interactive_break-after-item.html (manual test)
(source)
flexbox_interactive_break-after-line.html (manual test)
(source)
flexbox_interactive_break-after-line-order.html (manual test)
(source)
flexbox_interactive_break-after-multiline.html (manual test)
(source)
flexbox_interactive_break-before-column-firstitem.html (manual test)
(source)
flexbox_interactive_break-before-column-item.html (manual test)
(source)
flexbox_interactive_break-before-container.html (manual test)
(source)
flexbox_interactive_break-before-item.html (manual test)
(source)
flexbox_interactive_break-before-multiline.html (manual test)
(source)
flexbox_interactive_break-natural.html (manual test)
(source)
10.1.
Sample Flex Fragmentation Algorithm
This informative section presents a possible fragmentation algorithm for flex containers.
Implementors are encouraged to improve on this algorithm and
provide feedback to the CSS Working Group
This algorithm assumes that pagination always proceeds only in the forward direction;
therefore, in the algorithms below, alignment is mostly ignored prior to pagination.
Advanced layout engines may be able to honor alignment across fragments.
single-line
column flex container
Run the flex layout algorithm (without regards to pagination)
through
Cross Sizing Determination
Lay out as many consecutive flex items or item fragments as possible
(but at least one or a fragment thereof),
starting from the first,
until there is no more room on the page
or a forced break is encountered.
If the previous step ran out of room
and the free space is positive,
the UA may reduce the distributed free space on this page
(down to, but not past, zero)
in order to make room for the next unbreakable flex item or fragment.
Otherwise,
the item or fragment that does not fit is pushed to the next page.
The UA should pull up if more than 50% of the fragment would have fit in the remaining space
and should push otherwise.
If there are any flex items or fragments not laid out by the previous steps,
rerun the flex layout algorithm
from
Line Length Determination
through
Cross Sizing Determination
with the next page’s size
and
all
the contents (including those already laid out),
and return to the previous step,
but starting from the first item or fragment not already laid out.
For each fragment of the flex container,
continue the flex layout algorithm
from
Main-Axis Alignment
to its finish.
It is the intent of this algorithm that column-direction
single-line
flex containers
paginate very similarly to block flow.
As a test of the intent,
a flex container with
justify-content:start
and no flexible items
should paginate identically to
a block with
in-flow
children with same content,
same used size and same used margins.
multi-line
column flex container
Run the flex layout algorithm
with
regards to pagination
(limiting the flex container’s maximum line length to the space left on the page)
through
Cross Sizing Determination
Lay out as many flex lines as possible
(but at least one)
until there is no more room in the flex container
in the cross dimension
or a forced break is encountered:
Lay out as many consecutive flex items as possible
(but at least one),
starting from the first,
until there is no more room on the page
or a forced break is encountered.
Forced breaks
within
flex items are ignored.
If this is the first flex container fragment,
this line contains only a single flex item
that is larger than the space left on the page,
and the flex container is not at the top of the page already,
move the flex container to the next page
and restart flex container layout entirely.
If there are any flex items not laid out by the first step,
rerun the flex layout algorithm
from
Main Sizing Determination
through
Cross Sizing Determination
using only the items not laid out on a previous line,
and return to the previous step,
starting from the first item not already laid out.
If there are any flex items not laid out by the previous step,
rerun the flex layout algorithm
from
Line Sizing Determination
through
Cross Sizing Determination
with the next page’s size
and only the items not already laid out,
and return to the previous step,
but starting from the first item not already laid out.
For each fragment of the flex container,
continue the flex layout algorithm
from
Main-Axis Alignment
to its finish.
A shortcoming of this sample algorithm is that
if a flex item does not entirely fit on a single page,
it will
not
be paginated in
multi-line
column flex containers.
single-line
row flex container
Run the entire flex layout algorithm (without regards to pagination),
except treat any
align-self
other than
flex-start
or
baseline
as
flex-start
If an unbreakable item doesn’t fit within the space left on the page,
and the flex container is not at the top of the page,
move the flex container to the next page
and restart flex container layout entirely.
For each item,
lay out as much of its contents as will fit in the space left on the page,
and fragment the remaining content onto the next page,
rerunning the flex layout algorithm
from
Line Length Determination
through
Main-Axis Alignment
into the new page size
using
all
the contents (including items completed on previous pages).
Any flex items that fit entirely into previous fragments
still take up space in the main axis in later fragments.
For each fragment of the flex container,
rerun the flex layout algorithm
from
Cross-Axis Alignment
to its finish.
For all fragments besides the first,
treat
align-self
and
align-content
as being
flex-start
for all item fragments and lines.
If any item,
when aligned according to its original
align-self
value
into the combined
cross size
of all the flex container fragments,
would fit entirely within a single flex container fragment,
it may be shifted into that fragment
and aligned appropriately.
multi-line
row flex container
Run the flex layout algorithm (without regards to pagination),
through
Cross Sizing Determination
Lay out as many flex lines as possible
(but at least one),
starting from the first,
until there is no more room on the page
or a forced break is encountered.
If a line doesn’t fit on the page,
and the line is not at the top of the page,
move the line to the next page
and restart the flex layout algorithm entirely,
using only the items in and following this line.
If a flex item itself causes a forced break,
rerun the flex layout algorithm
from
Main Sizing Determination
through
Main-Axis Alignment
using only the items on this and following lines,
but with the item causing the break automatically starting a new line
in the
line breaking step
then continue with this step.
Forced breaks
within
flex items are ignored.
If there are any flex items not laid out by the previous step,
rerun the flex layout algorithm
from
Line Length Determination
through
Main-Axis Alignment
with the next page’s size
and only the items not already laid out.
Return to the previous step,
but starting from the first line not already laid out.
For each fragment of the flex container,
continue the flex layout algorithm
from
Cross Axis Alignment
to its finish.
Appendix A: Axis Mappings
This appendix is non-normative.
Axis Mappings for
ltr
horizontal-tb
Writing Mode
(e.g. English)
flex-flow
main axis
start
end
cross axis
start
end
row
nowrap
wrap
horizontal
left
right
vertical
top
bottom
row-reverse
nowrap
wrap
right
left
row
wrap-reverse
left
right
bottom
top
row-reverse
wrap-reverse
right
left
column
nowrap
wrap
vertical
top
bottom
horizontal
left
right
column-reverse
nowrap
wrap
bottom
top
column
wrap-reverse
top
bottom
right
left
column-reverse
wrap-reverse
bottom
top
Axis Mappings for
rtl
horizontal-tb
Writing Mode
(e.g. Farsi)
flex-flow
main axis
main-start
main-end
cross axis
cross-start
cross-end
row
nowrap
wrap
horizontal
right
left
vertical
top
bottom
row-reverse
nowrap
wrap
left
right
row
wrap-reverse
right
left
bottom
top
row-reverse
wrap-reverse
left
right
column
nowrap
wrap
vertical
top
bottom
horizontal
right
left
column-reverse
nowrap
wrap
bottom
top
column
wrap-reverse
top
bottom
left
right
column-reverse
wrap-reverse
bottom
top
Axis Mappings for
ltr
vertical-rl
Writing Mode
(e.g. Japanese)
flex-flow
main axis
start
end
cross axis
start
end
row
nowrap
wrap
vertical
top
bottom
horizontal
right
left
row-reverse
nowrap
wrap
bottom
top
row
wrap-reverse
top
bottom
left
right
row-reverse
wrap-reverse
bottom
top
column
nowrap
wrap
vertical
right
left
horizontal
top
bottom
column-reverse
nowrap
wrap
left
right
column
wrap-reverse
right
left
bottom
top
column-reverse
wrap-reverse
left
right
Appendix B:
-webkit-
Legacy Properties
This appendix is normative.
These aliases are
deprecated
and authors
should not
use them
unless their content needs to support actively-used legacy UAs.
For compatibility with general Web content,
UAs that are Web browsers must and other UAs may
implement the following
legacy name aliases
Alias
Standard
-webkit-align-content
align-content
-webkit-align-items
align-items
-webkit-align-self
align-self
-webkit-flex
flex
-webkit-flex-basis
flex-basis
-webkit-flex-direction
flex-direction
-webkit-flex-flow
flex-flow
-webkit-flex-grow
flex-grow
-webkit-flex-shrink
flex-shrink
-webkit-flex-wrap
flex-wrap
-webkit-justify-content
justify-content
-webkit-order
order
Tests
flexbox_width-wrapping-column.html
(live test)
(source)
webkit-aliases.html
(live test)
(source)
webkit-box-vertical-writing-mode.html
(live test)
(source)
Acknowledgments
Thanks for feedback and contributions to
Erik Anderson,
Christian Biesinger,
Tony Chang,
Phil Cupp,
Arron Eicholz,
James Elmore,
Andrew Fedoniouk,
Brian Heuston,
Shinichiro Hamaji,
Daniel Holbert,
Ben Horst,
John Jansen,
Brad Kemper,
Kang-hao Lu,
Markus Mielke,
Peter Moulder,
Robert O’Callahan,
Christoph Päper,
Ning Rogers,
Peter Salas,
Elliott Sprehn,
Morten Stenshorne,
Christian Stockwell,
Ojan Vafai,
Eugene Veselov,
Greg Whitworth,
Boris Zbarsky.
Changes
This section documents the changes since previous publications.
Changes since the
14 October 2025 CRD
Defined the web-compatible intrinsic sizing algo in
§ 9.9.1.2 Web-compatible Intrinsic Sizing Algorithm: Max-content Size and Min-content Single-line Size
Issue 8884
Clarified that the used cross size of an item is recalculated
with the line’s cross size as its available space.
Issue 11784
Changes since the
19 November 2018 CR
Disposition of Comments
is available.
Significant changes include:
Identify parts of
§ 9.9.1 Flex Container Intrinsic Main Sizes
as ideal but not Web-compatible,
and mark a refined Web-compatible algorithm as an ongoing investigation.
Issue 8884
Fix errors in the flexing rules in
§ 9.9.1 Flex Container Intrinsic Main Sizes
to closer match the actual layout algorithm
and avoid dividing by zero or exploding sizes as inputs approach zero.
Issue 7189
Reform the
cross-size intrinsic sizing rules
for column wrap flex containers to yield better results.
(Issue
6777
Use the
content edges
of the
flex container
for determining the
static-position rectangle
of flex container children,
rather than doing extra layout work.
This will result in ignoring
align-content
on the flex container,
but allow
align-self
on the box itself to still take effect.
Issue 5843
7596
Correctly ignore
auto
preferred sizes
in both min
and
max size contribution calculations.
(It was accidentally omitted from the max,
though it shows up correctly
in the
changelog
...)
Issue 6455
Moved the
order
property definition to
[CSS-DISPLAY-3]
See
§ 5.4 Reordering and Accessibility: the order property
for remaining explanation.
Issue 5865
Made
main size
always
definite
for
flex items
with a
definite
flex basis
to match implementations.
Issue 4311
If the
flex container
has a
definite
main size
then the post-flexing
main sizes
of its
flex items
are treated as
definite
flex item
’s post-flexing
main size
is treated as
definite
even though it can rely on the
indefinite
sizes
of any flex items in the same line
If a
flex item’s
flex basis
is
definite
then its post-flexing
main size
is also
definite
Note: The main size of a
fully inflexible
item
with a
definite
flex basis
is, by definition,
definite
Note: This means that within
flex layout
“definite” sizes can require performing layout.
This was done to allow percentages inside of
flex items
to resolve where authors expected them to resolve.
Made the re-arrangement of
flex items
into independent
stacks of flex lines on each page optional,
and identified shortcomings in the sample algorithm.
6855
Updated value syntax in property definition tables
to use newer
CSS bracketed range notation
reflecting the prose restrictions on negative values.
(Editorial.)
Updated aspect ratio terminology to use the term
preferred aspect ratio
and clarify any uses that are specific to
replaced elements
in order to accommodate forthcoming
aspect-ratio
property.
Define interaction of
aspect-ratio
and the
automatic minimum size
by applying its effect to the
transferred size suggestion
and excluding it from the definiteness of the
specified size suggestion
(Issues
6069
and
6794
changeset A
and
changeset B
Pin
automatic minimum size
conditional on
computed value
of
overflow
rather than on being a
scroll container
to avoid cases such as
replaced elements
whose computed
scrollable overflow values
resolve to
non-scrollable
used values
7714
Clarify that the rule exempting
content-based minimum sizes
from making an item’s size to be indefinite
is limited to
auto
, and does not affect other intrinsic sizing keywords.
Issue 6457
Explicitly excluded
collapsed flex items
from the
intrinsic main size calculations
Issue 5985
The
max-content
main size
of a
flex container
is the smallest size the
flex container
can take
while maintaining the
max-content contributions
of its
flex items
insofar as allowed by the items’ own flexibility.
Considering only non-
collapsed
flex items
However, for a
multi-line
container,
it is simply the largest
min-content contribution
of all the
non-
collapsed
flex items
in the
flex container
Clarified that the
flex base size
calculations
rely on the
used
cross size
Issue 3736
… then the flex base size is calculated from
its
used
inner cross size
and the flex item’s intrinsic aspect ratio.
Slightly restructured the prose in
§ 9.7 Resolving Flexible Lengths
to fix errors.
Issue 5179
Clarified that “performing layout” means using the block-level layout rules.
Issue 5188
Determine the hypothetical cross size of each item
by performing layout
as if it were an
in-flow
block-level box
with the used
main size
and the
given
available space …
Rewrote flex-contain cross-sizing step
to depend on the rules of whatever formatting context it’s in,
rather than assuming block-layout rules.
Issue 5190
Determine the flex container’s used cross size
using the rules of the
formatting context
in which it participates.
If a content-based
cross size
is needed,
use the sum of the
flex lines
cross sizes
If the cross size property is a
definite
size,
use that,
clamped by the used min and max
cross sizes
of the
flex container
Otherwise,
use the sum of the flex lines' cross sizes,
clamped by the used min and max
cross sizes
of the
flex container
Removed explicit mention of which box to use for calculating aspect-ratio,
to allow for behavior introduced by the new
aspect-ratio
property in
[css-sizing-4]
Issue 5246
then the flex base size is calculated from
its used
inner
cross size
and the flex item’s intrinsic aspect ratio.
Clarified that the
content-based minimum size
of a flex item
is a type of
intrinsic size contribution
and thus impacted by associated rules in
[CSS-SIZING-3]
Issue 5665
Note: The
content-based minimum size
is a type of
intrinsic size contribution
and thus the provisions in
CSS Sizing 3
§ 5.2 Intrinsic Contributions
apply.
Made the fallback alignment (in case of negative free space)
for the
space-*
keywords apply
safe
Issue 10154
Redrafted the definition of
content-based minimum size
for easier reading. (Editorial)
Added
Appendix B: -webkit- Legacy Properties
to document
-webkit-
aliases of flex layout properties
that are necessary for Web-compat.
Issue 5634
Rephrased blockification rules in terms of
computed values
Issue 4065
Various minor editorial fixes and clarifications,
Changes since the 16 October 2017 CR
Disposition of Comments
is also available.
Removed the option for flex-item block-axis margins and paddings
to be resolved against the block dimension;
they must be resolved against the inline dimension, as for blocks.
Issue 2085
Floored
flex item
’s
min-content contribution
by their
preferred size
Issue 2353
and cleaned up associated wording to be more precise.
The main-size
min-content contribution
of a
flex item
is the larger of its
outer
min-content size
and outer
preferred size
(its
width
height
as appropriate)
if that is not
auto
clamped by its
flex base size
as a maximum (if it is not growable)
and/or as a minimum (if it is not shrinkable),
and then further clamped by its
min
max main size properties
The main-size
max-content contribution
of a
flex item
is the larger of its
outer
max-content size
and
outer
specified
preferred
size
(its
width
height
as appropriate
if that is
definite
not
auto
clamped by its
flex base size
as a maximum (if it is not growable)
and/or as a minimum (if it is not shrinkable),
and then further clamped by its
min
max main size properties
Added some (effectively informative) prose and a cross-reference
to more clearly define
flex-basis: content
Indicates
automatic sizing
an
automatic size
based on the
flex item
’s content.
(It is typically equivalent to the
max-content size
but with adjustments to handle aspect ratios,
intrinsic sizing constraints,
and orthogonal flows;
see
details
in
§ 9 Flex Layout Algorithm
.)
Moved the definition of the
auto
keyword for
min-width
and
min-height
to
[CSS-SIZING-3]
The definition of what an
automatic minimum size
for flex items is remains here.
Issue 1920
Issue 2103
Altered the computation of
auto
in
min-width
and
min-height
such that it always computes to itself—although its
resolved value
remains zero on CSS2 display types.
Issue 2230
Issue 2248
Clarified that min/max clamping is according to the
used value
of the min/max size properties—which in the case of tables with
auto
layout,
is floored by the table’s
min-content size
Issue 2442
Clarified that break propagation does not affect computed values
and that
order-modified document order
is used.
Issue 2614
The exact layout of a fragmented flex container
is not defined in this level of Flexible Box Layout.
However, breaks inside a flex container are subject to the following rules
(interpreted using
order-modified document order
In a row flex container,
the
break-before
and
break-after
values on flex items
are propagated to the flex line.
The
break-before
values on the first line
and the
break-after
values on the last line
are propagated to the flex container.
Note:
Break propagation
(like
text-decoration
propagation)
does not affect
computed values
Clarified that if the
automatic minimum size
resolves directly to zero rather than being a
content-based minimum size
it does not cause indefiniteness.
For the purpose of calculating an intrinsic size of the element
(e.g. the element’s
min-content size
),
this value
a content-based minimum size
causes the element’s size in that axis to become indefinite
(even if e.g. its
width
property specifies a
definite
size).
Editorial improvements to the
automatic minimum size
Issue 2385
Some minor editorial fixes and clarifications,
including updates to vocabulary to match updates to other CSS modules.
Changes since the 26 May 2016 CR
Disposition of Comments
is also available.
Substantive Changes and Bugfixes
To allow flex factors to actually represent absolute ratios of flex item sizes
as was originally intended (see various examples),
removed the flooring of content-box sizes at zero
for the purpose of finding the item’s
flex base size
since this type of ratio requires a
flex base size
of zero,
which would otherwise only be possible if margins, borders, and padding are also all zero.
(The flooring remains in effect,
alongside the min and max size constraints,
in calculating the hypothetical and final sizes of the item.)
Issue 316
When determining the
flex base size
the item’s min and max main size properties are ignored
(no clamping occurs).
Furthermore, the sizing calculations that floor the content box size at zero
when applying
box-sizing
are also ignored.
(For example, an item with a specified size of zero,
positive padding, and
box-sizing: border-box
will have an outer
flex base size
of zero—and hence a negative inner
flex base size
.)
The
hypothetical main size
is the item’s
flex base size
clamped according to its min and max main size properties
(and flooring the content box size at zero)
Fix min/max violations.
Clamp each non-frozen item’s
target main size
by its min and max main size properties
and floor its content-box size at zero
If the item’s
target main size
was made smaller by this,
it’s a max violation.
If the item’s
target main size
was made larger by this,
To prevent empty flex items in shrink-to-fit containers
from collapsing to zero even when given a specified size,
the specified size is now accounted for in calculating
its
max-content contribution
in
§ 9.9.3 Flex Item Intrinsic Size Contributions
Issue 1435
The
main-size
max-content contribution
of a
flex item
is
the larger of
its
outer
max-content size
and specified size (its
width
height
as appropriate, if that is
definite
clamped by its
flex base size
as a maximum (if it is not growable)
and/or as a minimum (if it is not shrinkable),
and then further clamped by its
min
max main size properties
Since at least two implementations ended up
allowing percentages inside flex items with indefinite flex basis to resolve anyway,
removed the condition requiring definite flex basis.
Issue 1679
If
flex item
has a
definite
flex basis
and
the
flex container
has a
definite
main size
its
flex item
’s
post-flexing main size is treated as
definite
(even though it might technically rely on the
sizes of
indefinite
siblings to resolve its flexed main size
the
indefinite
sizes of any flex items in the same line).
For ease of implementation,
auto
value of
align-self
now computes to itself always.
See
related previous change
requiring this computation for absolutely-positioned elements.
Issue 440
Issue 644
Computed value:
auto
computes to parent’s
align-items
value; otherwise
as specified
On absolutely positioned elements,
a value of
auto
computes to itself.
On all other elements, a value of
auto
for
align-self
computes to the value of
align-items
on the element’s parent,
or
stretch
if the element has no parent.
Change
flex items
in orthogonal flows and
flex items
without a baseline
to both synthesize their alignment baseline from the
flex item
’s border box.
Issue 373
Fix main/cross error in definition of
cross-axis baseline set
Issue 792
Otherwise, the flex container has no first/last
main
cross
-axis baseline set…
Restore accidentally-deleted text about tables as flex items.
See
anonymous box change
Issue 547
In the case of flex items with
display: table
the table wrapper box becomes the
flex item
and the
order
and
align-self
properties apply to it.
The contents of any caption boxes contribute to the calculation of
the table wrapper box’s min-content and max-content sizes.
However, like
width
and
height
, the
flex
longhands apply to the table box as follows:
the
flex item
’s final size is calculated
by performing layout as if the distance between
the table wrapper box’s edges and the table box’s content edges
were all part of the table box’s border+padding area,
and the table box were the
flex item
Clarified that auto margins are treated as zero
for the purpose of calculating a absolutely-positioned flex container child’s static position.
Issue 665
For this purpose,
a value of
align-self: auto
is treated identically to
start
and
auto
margins are treated as zero
When clamping by the
max main size property
in the
calculation of the flex container’s intrinsic size
be sure to floor by the
min main size property
Issue 361
Within each line,
find the largest
max-content flex fraction
among all the
flex items
Add each item’s
flex base size
to the product of its
flex grow factor
(or
scaled flex shrink factor
, if the chosen
max-content flex fraction
was negative)
and the chosen
max-content flex fraction
then clamp that result
ing item size according to
by
the max
and min
main size propert
ies
Added missing edits for
change
that made
order
not apply to absolutely-positioned children of a flex container.
Issue 1439
Applies to:
flex items
and absolutely-positioned children of
flex containers
The
order
property controls the order in which
children of a flex container
flex items
appear within the flex container,
by assigning them to ordinal groups.
Absolutely-positioned children of a
flex container
are treated as having
order: 0
for the purpose of determining their painting order relative to
flex items
Unless otherwise specified by a future specification,
this property has no effect on boxes that are not
children of a
flex container
flex items
Take
flex-direction
into account when determining first/last baseline of the flex container.
Issue 995
To this end,
the baselines of a flex container are determined as follows
(after reordering with
order
and taking
flex-direction
into account
):
If any of the
flex items
on the flex container’s
first/last
startmost/endmost
flex line
participate in baseline alignment
the flex container’s first/last
main-axis baseline set
Otherwise, if the flex container has at least one
flex item
the flex container’s first/last
main-axis baseline set
is
generated
from
the
alignment baseline
of the
first/last
startmost/endmost
flex item
Otherwise, the flex container has no first/last main-axis
baseline set
, …
If the flex container has at least one
flex item
the flex container’s first/last
cross-axis baseline set
is
generated
from
the
alignment baseline
of the
first/last
startmost/endmost
flex item
Define
align-content: space-between
handling of a single
flex line
as equivalent to
start
Issue 718
Lines are evenly distributed in the flex container.
If the leftover free-space is negative
or there is only a single
flex line
in the flex container,
this value is identical to
flex-start
Fixed error in
axis mapping table
Issue 205
Restored definition of the
automatic minimum size
of boxes with neither
specified size
nor aspect ratio,
which was lost in earlier
rewrite
Issue 671
Clarifications
Made sure that
main size
and
cross size
are defined
for
flex containers
as well as for
flex items
Issue 981
Tweaked final clarifying sentence of note about spatial navigation.
Issue 1677
User agents, including browsers, accessible technology, and extensions,
may offer spatial navigation features.
This section does not preclude respecting the
order
property
when determining element ordering in such spatial navigation modes;
indeed it would need to be considered for such a feature to work.
However a UA that uses
order
in determining sequential navigation,
but does not otherwise account for spatial relationships among elements
(as expressed by the various layout features of CSS including and not limited to flex layout),
is non-conforming.
But
order
is not the only (or even the primary) CSS property
that would need to be considered for such a spatial navigation feature.
A well-implemented spatial navigation feature would need to consider
all the layout features of CSS that modify spatial relationships.
Miscellaneous trivial editorial improvements.
Changes since the 1 March 2016 CR
Disposition of Comments
is also available.
Substantive Changes and Bugfixes
Define how percentages are handled when calculating intrinsic
automatic minimum sizes
Issue 3
For the purpose of calculating an intrinsic size of the element
(e.g. the element’s
min-content size
),
this value causes the element’s size in that axis to become indefinite
(even if e.g. its
width
property specifies a
definite
size).
Note this means that percentages calculated against this size
will be treated as
auto
Nonetheless,
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
[CSS-SIZING-3]
does not prevent the resolution of percentage sizes within the item.
Switched
definite
and
indefinite
to refer to the (more correct) definitions in
[CSS-SIZING-3]
instead of defining them inline in this module.
Issue 10
Abspos children of a flexbox no longer respond to the
order
property.
Issue 12
Updated
§ 8.5 Flex Container Baselines
to account for
baseline sets
and
last-baseline alignment
Issue 13
))
Clarifications
Clarify that spatial navigation modes are allowed to handle
order
Issue 1
User agents, including browsers, accessible technology, and extensions,
may offer spatial navigation features.
This section does not preclude respecting the
order
property
when determining element ordering in such spatial navigation modes;
indeed it would need to be considered for such a feature to work.
However a UA that uses
order
in determining sequential navigation,
but does not otherwise account for spatial relationships among elements
(as expressed by the various layout features of CSS including and not limited to flex layout),
is non-conforming.
Cross-reference an additional case of definiteness in
§ 9.8 Definite and Indefinite Sizes
Issue 2
Once the cross size of a flex line has been determined,
items in auto-sized flex containers are also considered
definite for the purpose of layout; see
step 11
Improve wording for how unresolveable percentage
flex basis
values
transmute to
content
Issue 6
For all values other than
auto
and
content
(defined above),
flex-basis
is resolved the same way as
width
in horizontal writing modes
[CSS2]
except that if a value would resolve to
auto
for
width
it instead resolves to
content
for
flex-basis
For example, percentage values of
flex-basis
are resolved against
the flex item’s containing block (i.e. its
flex container
);
and if that containing block’s size is
indefinite
the result is the same as a
main size
of
auto
(which in this case is treated as
content
the used value for
flex-basis
is
content
Clarify that inflexible items with a
definite
flex basis
have a
definite size
Issue 8
Issue 11
flex item
is
fully inflexible
if both its
flex-grow
and
flex-shrink
values are zero,
and
flexible
otherwise.
The main size of a
fully inflexible
item with a
definite
flex basis
is, by definition,
definite
Reworded definition of the
auto
value to be easier to understand.
Issue 9
On a
flex item
whose
overflow
is
visible
in the
main axis
when specified on the
flex item’s
main-axis min-size property,
the following table gives the minimum size …
specifies an
automatic minimum size
In general, the
automatic minimum size
… defined below:
Slightly reworded the section on determining the static position of absolutely-positioned children to be clearer.
Adjusted format of Animatable lines to be clearer about animating keywords.
Miscellaneous trivial editorial improvements.
Changes since the 14 May 2015 LCWD
Disposition of Comments
is also available.
Substantive Changes and Bugfixes
Revert
flex
shorthand
change
of omitted
flex-basis
back to
since that was a hacky way of solving an intrinsic size problem,
and isn’t needed (and gives bad results)
given a correct implementation of
§ 9.9 Intrinsic Sizes
Issue 13
When omitted from the
flex
shorthand, its specified value is
flex:
Equivalent to
flex:
Changed
flex item determination
to operate on each element directly,
and not on its anonymous wrapper box, if any.
Issue 6
float
and
clear
have no effect on a
flex item
float
and
clear
do not create floating or clearance of
flex item
and do not take it out-of-flow.
However, the
float
property can still affect box generation
by influencing the
display
property’s computed value.
Some values of
display
trigger the creation of anonymous boxes around the original box.
It’s the outermost box—the direct child of the
flex container
box—that
becomes a
flex item
For example, given two contiguous child elements with
display: table-cell
the
anonymous table wrapper box generated around them
[CSS2]
becomes the
flex item
In the case of flex items with
display: table
the table wrapper box becomes the
flex item
and the
order
and
align-self
properties apply to it.
The contents of any caption boxes contribute to the calculation of
the table wrapper box’s min-content and max-content sizes.
However, like
width
and
height
, the
flex
longhands apply to the table box as follows:
the
flex item
’s final size is calculated
by performing layout as if the distance between
the table wrapper box’s edges and the table box’s content edges
were all part of the table box’s border+padding area,
and the table box were the
flex item
Note: Some values of
display
normally trigger the creation of anonymous boxes around the original box.
If such a box is a
flex item
it is blockified first,
and so anonymous box creation will not happen.
For example, two contiguous
flex items
with
display: table-cell
will become two separate
display: block
flex items
instead of being wrapped into a single anonymous table.
Defined that any size adjustment imposed by a box’s
min-width: auto
is consulted when percentage-sizing any of its contents.
Issue 3
In order to prevent cycling sizing,
the
auto
value of
min-height
and
max-height
does not factor into the percentage size resolution of the box’s contents.
For example, a percentage-height block whose flex item parent has
height: 120em; min-height: auto
will size itself against
height: 120em
regardless of the impact
that
min-height
might have on the used size of the flex item.
Although this may require an additional layout pass to re-resolve percentages in some cases,
the
auto
value of
min-width
and
min-height
(like the
min-content
max-content
, and
fit-content
values defined in
[CSS-SIZING-3]
does not prevent the resolution of percentage sizes within the item.
Correct intrinsic sizing rules to handle inflexible items.
Issue 1
The main-size
min-content
max-content contribution
of a
flex item
is its outer
hypothetical main size
when sized under a
min-content
max-content constraint
(respectively)
The
main-size
min-content
max-content contribution
of a
flex item
is its
outer
min-content
max-content size
clamped by its
flex base size
as a maximum (if it is not growable)
and/or as a minimum (if it is not shrinkable),
and then further clamped by its
min
max main size properties
Correct errors in
flex container
main-axis intrinsic sizing.
Issue 1
The
max-content
main size
of a
flex container
is the smallest size the
flex container
can take
while maintaining the
max-content contributions
of its
flex items
For each
flex item
subtract its
outer
flex base size
from its
max-content contribution
size
then divide by its
flex grow factor
, floored at 1,
or by its
scaled flex shrink factor
(if the result was negative,
flooring the
flex shrink factor
at 1 if necessary)
If that result is not zero, divide it by (if the result was positive) its
flex grow factor
floored at 1,
or (if the result was negative) by its
scaled flex shrink factor
, having floored the
flex shrink factor
at 1.
This is the item’s
max-content flex fraction
Correct errors in
flex container
cross-axis intrinsic sizing,
and specify commonly-implemented min-content sizing heuristic for multi-line column flex containers.
Issue 12
The
min-content
cross size
and
max-content
cross size
of a flex container
are the
cross size
of the flex container
after performing layout into the given available
main-axis
space and infinite available
cross-axis
space.
The
min-content
max-content
cross size
of a
single-line
flex container
is the largest
min-content contribution
max-content contribution
(respectively)
of its
flex items
For a
multi-line
flex container
the
min-content
max-content
cross size
is the sum of the flex line cross sizes
resulting from sizing the flex container under a
cross-axis
min-content constraint
max-content constraint
(respectively).
However, if the
flex container
is
flex-flow: column wrap;
then it’s sized by first finding the largest
min-content
max-content
cross-size contribution among the
flex items
(respectively),
then using that size as the
available space
in the
cross axis
for each of the
flex items
during layout.
This heuristic for
column wrap
flex containers
gives a reasonable approximation of the size that the
flex container
should be,
with each flex item ending up as min(
item’s own max-content
maximum min-content among all items
),
and each
flex line
no larger than its largest
flex item
It’s not a
perfect
fit in some cases,
but doing it completely correct is insanely expensive,
and this works reasonably well.
Add explicit conformance criteria on authoring tools
to keep presentation and DOM order in sync
unless author explicitly indicates a desire to make them out-of-sync.
Issue 8
In order to preserve the author’s intended ordering in all presentation modes,
authoring tools—including WYSIWYG editors as well as Web-based authoring aids—must reorder the underlying document source
and not use
order
to perform reordering
unless the author has explicitly indicated that the underlying
document order (which determines speech and navigation order) should be
out-of-sync
with the visual order.
For example, a tool might offer both drag-and-drop reordering of flex items
as well as handling of media queries for alternate layouts per screen size range.
Since most of the time, reordering should affect all screen ranges
as well as navigation and speech order,
the tool would perform drag-and-drop reordering at the DOM layer.
In some cases, however, the author may want different visual orderings per screen size.
The tool could offer this functionality by using
order
together with media queries,
but also tie the smallest screen size’s ordering to the underlying DOM order
(since this is most likely to be a logical linear presentation order)
while using
order
to determine the visual presentation order in other size ranges.
This tool would be conformant, whereas a tool that only ever used
order
to handle drag-and-drop reordering
(however convenient it might be to implement it that way)
would be non-conformant.
Defined that an
align-self
or
justify-self
value of
auto
computes to itself on absolutely-positioned elements,
for consistency with future extensions of these properties in
[CSS-ALIGN-3]
Issue 5
On absolutely positioned elements,
a value of
auto
computes to itself.
On all other elements, a
value of
auto
for
align-self
computes to the value of
align-items
on the element’s parent,
or
stretch
if the element has no parent.
Revert change to make percentage margins and padding relative to their own axes;
instead allow both behaviors.
Issue 11
Issue 16
Percentage margins and paddings on
flex items
are always resolved against their respective dimensions;
unlike blocks, they do not always resolve against the inline dimension of their containing block.
Percentage margins and paddings on
flex items
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.
Authors should avoid using percentages in paddings or margins on
flex items
entirely,
as they will get different behavior in different browsers.
Handle min/max constraints in sizing flex items.
Determine the available main and cross space for the flex items.
For each dimension,
if that dimension of the
flex container
’s content box is a
definite size
, use that;
if that dimension of the
flex container
is being sized under a
min
or
max-content constraint
the available space in that dimension is that constraint;
otherwise, subtract the
flex container
’s margin, border, and padding
from the space available to the flex container in that dimension
and use that value.
Correct negation in flex container fragmentation rule:
previous definition implied
break-inside: avoid
behavior in all cases.
Issue 5
If the first fragment of the flex container is not at the top of the page,
and
some
none
of its flex items
don’t
fit in the remaining space on the page,
the entire fragment is moved to the next page.
Clarifications
Miscellaneous minor editorial improvements and fixes to errors in examples.
Changes since the 25 September 2014 LCWD
Disposition of Comments
is also available.
Substantive Changes and Bugfixes
Reverted
flex-basis: auto
to its original meaning.
Added
flex-basis: content
keyword to explicitly specify automatic content-based sizing.
(Issue
10
Made applicability of
align-content
depend on wrappability rather than number of resulting flex lines.
(Issue
When a flex container has multiple lines,
In a
multi-line
flex container
(even one with only a single line),
the
cross size
of each line is the minimum size necessary [...]
When a flex container (even a
multi-line
one) has only one line,
In a
single-line
flex container
the
cross size
of the line is the
cross size
of the flex container,
and
align-content
has no effect.
Note, this property has no effect
when the flex container has only a single line.
on a
single-line
flex container
Only
flex containers with multiple lines
multi-line
flex containers
ever have free space in the
cross-axis
for lines to be aligned in,
because in a
flex container with a single line
single-line
flex container
the sole line automatically stretches to fill the space.
If the flex container
has only one
flex line
(even if it’s a
multi-line
flex container
is
single-line
and has a
definite
cross size
the
cross size
of the
flex line
is the
flex container
’s inner
cross size
If the flex container
has only one flex line
(even if it’s a multi-line flex container),
is
single-line
then clamp the line’s
cross size
to be within the container’s computed min and max cross-size properties.
Removed text that asserted forced breaking behavior,
replaced with reference to fragmentation section.
This resolves a conflict in the spec.
(Issue
18
collect consecutive items one by one
until the first time that the next collected item would not fit into the flex container’s inner main size,
or until a forced break is encountered
, see
§ 10 Fragmenting Flex Layout
[...]
A break is forced wherever the CSS2.1
page-break-before
page-break-after
[CSS2]
or the CSS3
break-before
break-after
[CSS3-BREAK]
properties specify a fragmentation break.
Change the
flex shrink factor
to multiply by the
inner
(not outer)
flex base size
(Issue
For every unfrozen item on the line,
multiply its flex shrink factor by its
outer
inner
flex base size,
and note this as its
scaled flex shrink factor
Add back in missing “n” in “neither”...
(Issue
If the
cross size property
of the
flex item
computes to
auto
and
either of the
cross-axis
margins are
auto
the
flex item
is
stretched
Specify that the
flex container
’s
main size
must also be
definite
for a flex item’s flexed main size to be
definite
(Issue
20
[If] ... the
flex item
has a
definite
flex basis
and the
flex container
has a
definite
main size
the
flex item’s
main size
must be treated as
definite
...
Remove the requirement that the
flex basis
be
content
for the
specified size
to be defined.
The specified size should always win if it is smaller than the intrinsic size.
This is particularly important to maintain author expectations for,
e.g.
(Issue
25
If the item’s
computed
flex-basis
is
content
and its
computed
main size property
is
definite
then the
specified size
is that size
Remove the requirement that anonymous block creation (for things like
display: table-cell
occur
before
flex item
blockification.
(Instead, all children now blockify immediately,
consistent with abspos/float behavior.)
Clarifications
Clarify that
flex base size
is unclamped.
(Issue
21
When determining the
flex base size
the item’s min and max main size properties are ignored
(no clamping occurs).
The
hypothetical main size
is the item’s
flex base size
clamped according to its min and max main size properties.
Restored normative status of note about table wrapper boxes normative;
it had been accidentally changed in the previous draft.
(Issue
Removed references to
display
property longhands,
since they will be removed from CSS Display Level 3.
Change wording to not imply an unnecessary layout pass.
(Issue
22
Otherwise,
lay out
size
the item into the
available space
using its used
flex basis
in place of its
main size
treating a value of
content
as
max-content
Renamed “clamped size” to “specified size” in the definition of
height: auto
Various trivial fixes.
Changes since the 25 March 2014 LCWD
Disposition of Comments
is also available.
Substantive Changes and Bugfixes
The following significant changes were made since the
25 March 2014 Last Call Working Draft
Fixed errors (missing negation, unspecified axis) in definition of
min-width: auto
(Issues
11
18
30
On a
flex item
whose
overflow
is
not
visible
in the
main axis
Expanded and rewrote definition of
min-width: auto
to add special handling of items with intrinsic ratios.
(Issues
16
and
28
On a
flex item
whose
overflow
is not
visible
the following table gives the minimum size:
[see table]
this keyword specifies as the minimum size the smaller of:
the
min-content size
, or
the computed
width
height
, if that value is
definite
Adjusted
min-width: auto
to only apply the computed main size as a minimum
in cases where the flex basis was retrieved from the main size property.
(Issue
19
… is defined if
the item’s computed flex-basis is
auto
and
its computed main size property is definite …
Defined that any size adjustment imposed by a box’s
min-width: auto
is not consulted when percentage-sizing any of its contents.
(Issue
27
This change was later reverted with an
opposite definition
In order to prevent cycling sizing,
the
auto
value of
min-height
and
max-height
does not factor into the percentage size resolution of the box’s contents.
For example, a percentage-height block whose flex item parent has
height: 120em; min-height: auto
will size itself against
height: 120em
regardless of the impact
that
min-height
might have on the used size of the flex item.
Introduced extra
main-size
keyword to
flex-basis
so that “lookup from main-size property” and “automatic sizing” behaviors
could each be explicitly specified.
(Issue
20
This change was later reverted with an alternative proposal solving the same problem
by instead introducing the
content
keyword.
Defined
flex items
with a
definite
flex basis
to also be
definite
in the
main axis
allowing resolution of percentage-sized children
even when the item itself is flexible.
(Issue
26
If a percentage is going to be resolved against a flex item’s main size,
and the flex item has a definite flex basis,
the main size must be treated as definite for the purpose of resolving the percentage,
and the percentage must resolve against the flexed main size of the flex item
(that is, after the layout algorithm below has been completed for the flex item’s flex container,
and the flex item has acquired its final size).
Clamp a single line flexbox’s line
cross size
to the container’s own min/max,
even when the container’s size is indefinite.
(Issue
The used
cross size
of the
flex line
is
the largest of the numbers found in the previous two steps
and zero.
If the flex container has only one flex line
(even if it’s a multi-line flex container),
then clamp the line’s
cross size
to be within the container’s computed min and max cross-size properties.
Note that if CSS 2.1’s definition of min/max-width/height applied more generally,
this behavior would fall out automatically.
Fixed various errors in the new
Resolving Flexible Lengths
section
(see
March 2014 rewrite to create continuity between
flex: 0
and
flex: 1
and reverted the editorial structure to match the old Candidate Recommendation.
(Issues
10
15
Fixed
max-content sizing of flex containers
to account for flexing behavior
by normalizing per flex fraction rather than merely summing the max-content sizes of the flex items.
(Issue
39
Updated
flex
property to accept animations always,
now that the discontinuity between 0 and non-0 values has been
fixed
(Issue
Clarifications
The following significant changes were made since the
25 March 2014 Last Call Working Draft
Clarified how the static position of an absolutely-positioned child of a flex container
is calculated by introducing an explanation of the effect more closely tied
with CSS2.1 concepts and terminology.
(Issue
12
Its
The
static position
of an absolutely-positioned child of a flex container
is
calculated by first doing full flex layout without the absolutely-positioned children,
then positioning each absolutely-positioned child
determined such that the child is positioned
as if it were the sole flex item in the flex container,
assuming both the child and the flex container were fixed-size boxes of their used size.
In other words, the static position of an absolutely positioned child of a flex container
is determined
after flex layout
by setting the child’s
static-position rectangle
to the flex container’s content box,
then aligning the absolutely positioned child within this rectangle
according to the
justify-content
value of the flex container and the
align-self
value of the child itself.
Clarified application of
order
to absolutely-positioned children of the
flex container
(Note, this behavior was later
rescinded
.)
An absolutely-positioned child of a flex container does not participate in flex layout
beyond the reordering step
However, it does participate in the reordering step (see
order
),
which has an effect in their painting order.
The order property controls the order in which
flex items
children of a flex container
appear within their flex container…
Unless otherwise specified by a future specification,
this property has no effect on boxes that are not
flex items
children of a flex container
Note: Absolutely-positioned children of a flex container
do not participate in flex layout, but are reordered
together with any flex item children.
Clarified what a
stretched
flex item is
for the purposes of special behavior (like definiteness).
(Issue
25
If the
cross size
property of the flex item computes to auto,
and either of the cross-axis margins are auto, the flex item is stretched. Its
its
used value …
Changes since the 18 September 2012 Candidate Recommendation
Disposition of Comments
is also available.
Substantive Changes and Bugfixes
The following significant changes were made since the
18 September 2012 Candidate Recommendation
Changed the behavior of the new
auto
initial value of
min-width
min-height
to
Take into account whether
overflow
is
visible
since when
overflow
is explicitly handled, it is confusing (and unnecessary)
to force enough size to show all the content.
Take into account the specified
width
height
so that the implied minimum is never greater than the specified size.
Compute to itself (not to
min-content
) on flex items,
since they are no longer equivalent (due to above changes).
Issue 19
auto
When used as the value of a flex item’s min main size property,
this keyword indicates a minimum of the min-content size,
to help ensure that the item is large enough to fit its contents.
It is intended that this will compute to the
min-content
keyword
when the specification defining it (
[CSS-SIZING-3]
) is sufficiently mature.
On a
flex item
whose
overflow
is not
visible
this keyword specifies as the minimum size the smaller of:
the
min-content size
, or
the computed
width
height
, if that value is
definite
Specified that percentage margins/paddings on flex items
are resolved against their respective dimensions,
not the inline dimension of the containing block like blocks do.
Issue 16
Percentage margins and paddings on
flex items
are always resolved against their respective dimensions;
unlike blocks, they do not always resolve against
the inline dimension of their containing block.
Pass definiteness of a single-line flex container’s size through to any stretched items.
Issue 3
As a special case for handling stretched
flex items
if a
single-line
flex container
has a definite
cross size
the outer
cross size
of any
flex items
with
align-self: stretch
is the flex container’s inner
cross size
(clamped to the
flex item
’s min and max
cross size
and is considered
definite
Allow percentages inside a stretched auto-height flex item to resolve by requiring a relayout pass.
Issue 3
If the flex item has
align-self: stretch
, redo layout for its contents,
treating this used size as its definite
cross size
so that percentage-sized children can be resolved.
Note that this step does not affect the main size of the flex item,
even if it has an intrinsic aspect ratio.
Allow intrinsic aspect ratios to inform the
main-size calculation.
Issue 8
If the flex item has ...
an intrinsic aspect ratio,
flex basis
of
auto
, and
a definite
cross size
then the
flex base size
is calculated from its inner
cross size
and the
flex item
’s intrinsic aspect ratio.
Define
hypothetical main size
when the
main size
depends on the
cross size
Issue 23
If a
cross size
is needed to determine the
main size
(e.g. when the
flex item
’s
main size
is in its block axis)
and the
flex item
’s
cross size
is
auto
and not
definite
in this calculation use
fit-content
as the
flex item
’s
cross size
Defined the
intrinsic sizes of flex containers.
Determine the main size of the flex container
using its main size property.
In this calculation, the min content main size of the flex container
is the maximum of the flex container’s items' min-content size contributions,
and the max content main size of the flex container
is the sum of the flex container’s items' max-content size contributions.
The min-content/max-content main size contribution of an item is
its outer hypothetical main size
when sized under a min-content/max-content constraint (respectively).
For this computation, ‘auto’ margins on flex items are treated as ‘0’.
The
max-content
main size
of a
flex container
is the sum of the flex container’s items'
max-content contributions
in the
main axis
The
min-content
main size
of a
single-line
flex container
is the sum of the flex container’s items'
min-content contributions
in the
main axis
for a
multi-line
container,
it is the largest of those contributions.
The
min-content
cross size
and
max-content
cross size
of a flex container
are the
cross size
of the flex container
after performing layout into the given available
main-axis
space
and infinite available
cross-axis
space.
The main-size
min-content
max-content contribution
of a
flex item
is its outer
hypothetical main size
when sized under a
min-content
max-content constraint
(respectively).
See
[CSS-SIZING-3]
for a definition of the terms in this section.
Correct an omission in the flex-line size determination,
so a
single-line
flexbox will size to its contents
if it doesn’t have a definite size.
If the flex container has only one
flex line
(even if it’s a
multi-line
flex container
and has a
definite
cross size
the
cross size
of the
flex line
is the
flex container
’s inner
cross size
Flex lines have their size floored at 0.
Issue 2
The used
cross size
of the
flex line
is the
larger
largest
of the numbers found in the previous two steps
and zero
Flex items paint like inline blocks rather than blocks.
Issue 18
Flex items
paint exactly the same as
block-level elements in the normal flow
inline blocks
[CSS2]
An omitted
flex-basis
component of the
flex
shorthand
now resolves to
0%
instead of
0px
Because percentages resolved against indefinite sizes behave as
auto
this gives better behavior in shrink-wrapped flex containers.
Issue 20
When omitted from the
flex
shorthand, its specified value is
0%
the length zero
flex:
Equivalent to
flex:
0px
0%
Note: This change was
reverted
Defined that an unresolvable percentage
flex base size
is treated as
auto
percentage values of
flex-basis
are resolved against
the flex item’s containing block, i.e. its flex container,
and if that containing block’s size is
indefinite
the result is
undefined
the same as a
main size
of
auto
Simplified the static position of abspos children of
flex containers
to be consistent with Grid Layout.
Issue 6
An absolutely-positioned child of a
flex container
does not participate in flex layout
beyond the reordering step.
However, if both
left
and
right
or both
top
and
bottom
are
auto
then the used value of those properties
are computed from its static position, as follows:
If both
left
and
right
are
auto
the
flex item
must be positioned so that
its
main-start
or
cross-start
edge
(whichever is in the horizontal axis)
is aligned with the
static position
If both
top
and
bottom
are
auto
the
flex item
must be positioned so that
its
main-start
or
cross-start
edge
(whichever is in the vertical axis)
is aligned with the
static position
In the
main axis
If there is a subsequent in-flow
flex item
on the same
flex line
the
static position
is the outer
main-start
edge of that
flex item
Otherwise, if there is a preceding in-flow
flex item
on the same
flex line
the
static position
is the outer
main-end
edge of that
flex item
Otherwise, the
static position
is determined
by the value of
justify-content
on the
flex container
as if the
static position
were represented by a zero-sized flex item.
In the
cross axis
If there is a preceding in-flow
flex item
the
static position
is the
cross-start
edge of the
flex line
that item is in.
Otherwise, the
static position
is the
cross-start
edge
of the first
flex line
The static position is intended to more-or-less match the position of
an anonymous 0×0 in-flow
flex-start
-aligned
flex item that participates in flex layout,
the primary difference being that any packing spaces due to
justify-content: space-around
or
justify-content: space-between
are suppressed around the hypothetical item:
between it and the next item if there is a real item after it,
else between it and the previous item (if any) if there isn’t.
Its static position is calculated by first doing full flex layout
without the absolutely-positioned children,
then positioning each absolutely-positioned child
as if it were the sole
flex item
in the
flex container
assuming both the child and the
flex container
were fixed size boxes of their used size.
For example, by default, the static position of
an absolutely positioned child aligns it to the main-start/cross-start corner,
corresponding to the default values of
justify-content
and
align-content
on the
flex container
Setting
justify-content:center
on the
flex container
, however,
would center it in the main axis.
Changed algorithm for
resolving flexible lengths
to make behavior continuous as the sum of the flex factors approaches zero.
(No change for a sum ≥ 1.)
Issue 30
Replaces
this section
with
this one
Clarifications
The following significant clarifications were also made:
Absolutely positioned children of a flex container are no longer called "flex items" (to avoid terminology confusion). (??)
Name:
order
Applies to:
flex items
and absolutely-positioned children of
flex containers
Re-order the flex items
and absolutely positioned flex container children
according to their
order
Clarified that
float
still affects the computed
display
(which may affect box-fixup rules that run prior to flex item determination).
Issue 7
float
and
clear
have no effect on a
flex item
and do not take it out-of-flow.
However, the
float
property can still affect box generation
by influencing the
display
property’s computed value.
Clarify what is meant by “white space”. (
Issue 26
However, an anonymous flex item that contains only
white space
(i.e. characters that can be affected by the
white-space
property)
is not rendered, as if it were
display:none
Clarified that table anonymous box generation occurs
in place of computed value conversion for internal table elements.
Clarified interaction of flex item determination with
display-inside
display-outside
(the new longhands of
display
defined in the
CSS Display Module Level 3
).
If the specified
display-outside
of an in-flow child of an element that generates a
flex container
is
inline-level
it computes to
block-level
(This effectively converts any inline
display
values to their block equivalents.)
Note: This change was
reverted
Clarified that
overflow
applies to flex containers.
Clarified that
::first-line
and
::first-letter
pseudo-elements
do not apply to flex containers (because they are not block containers).
Clarify that
stretch
checks for the
computed
value of the cross-size property being
auto
which means that percentage
cross sizes
that behave as
auto
(because they don’t resolve against definite sizes) aren’t stretched.
Issue 5
stretch
If the
cross size property
of the
flex item
is
computes to
auto
its used value is …
Determine the used cross size of each flex item.
If a flex item has
align-self: stretch
its
computed
cross size property is
auto
and …
Clarify that the rules of the formatting context are used for determining the flex container’s main size.
Determine the main size of the flex container
using
the rules of the formatting context in which it participates
its main size property
Clarified that
order
-modified document order is used instead of raw document order when painting.
(This was already stated in the
order
section, but not in the section explicitly about painting order.)
Clarified line-breaking to precisely handle negatively-sized flex items and zero-size items at the end of a line.
Issue 1
Otherwise,
starting from the first uncollected item,
collect
consecutive items one by one
until the first time that the
next
collected item
would not fit into the flex container’s inner main size,
or until a forced break is encountered.
If the very first uncollected item wouldn’t fit,
collect just it into the line
as many consecutive flex items as will fit
or until a forced break is encountered
(but collect at least one)
into the flex container’s inner main size into a flex line
Note that
items with zero main size will never start a line
unless they’re the very first items in the flex container,
or they’re preceded by a forced break.
The "collect as many" line will collect
them
zero-sized flex items
onto the end of the previous line
even if the last non-zero item exactly "filled up" the line.
Clarified that flex container cross sizes are still clamped by the flex container’s min/max properties.
Issue 24
If the cross size property is a
definite
size,
use that,
clamped by the min and max cross size properties of the
flex container
Otherwise,
use the sum of the flex lines' cross sizes,
clamped by the min and max cross size properties of the
flex container
Privacy Considerations
No new privacy considerations have been reported on this specification.
Security Considerations
No new security considerations have been reported on this specification.
Tests
the order property, now in css-display-3
order-interpolation.html
(live test)
(source)
flexbox-anonymous-items-001.html
(live test)
(source)
flexbox_order-abspos-space-around.html
(live test)
(source)
flexbox_order-box.html
(live test)
(source)
flexbox-order-from-lowest.html (visual test)
(source)
flexbox_order.html
(live test)
(source)
flexbox_order-noninteger-invalid.html
(live test)
(source)
flexbox-order-only-flexitems.html
(live test)
(source)
flexible-order.html
(live test)
(source)
flex-item-z-ordering-001.html
(live test)
(source)
flex-item-z-ordering-002.html
(live test)
(source)
flex-order.html
(live test)
(source)
flexbox_computedstyle_order.html
(live test)
(source)
flexbox_computedstyle_order-inherit.html
(live test)
(source)
flexbox_computedstyle_order-integer.html
(live test)
(source)
flexbox_computedstyle_order-invalid.html
(live test)
(source)
flexbox_computedstyle_order-negative.html
(live test)
(source)
order-001.htm (visual test)
(source)
order-abs-children-painting-order-different-container.html
(live test)
(source)
order-abs-children-painting-order.html
(live test)
(source)
order-with-column-reverse.html
(live test)
(source)
order-with-row-reverse.html
(live test)
(source)
order-painting.html
(live test)
(source)
order_value.html
(live test)
(source)
order-computed.html
(live test)
(source)
order-invalid.html
(live test)
(source)
order-valid.html
(live test)
(source)
print stuff
break-nested-float-in-flex-item-001-print.html
(live test)
(source)
break-nested-float-in-flex-item-002-print.html
(live test)
(source)
flexbox-break-request-horiz-001a.html
(live test)
(source)
flexbox-break-request-horiz-001b.html
(live test)
(source)
flexbox-break-request-horiz-002a.html
(live test)
(source)
flexbox-break-request-horiz-002b.html
(live test)
(source)
flexbox-break-request-vert-001a.html
(live test)
(source)
flexbox-break-request-vert-001b.html
(live test)
(source)
flexbox-break-request-vert-002a.html
(live test)
(source)
flexbox-break-request-vert-002b.html
(live test)
(source)
inline-flexbox-vertical-rl-image-flexitem-crash-print.html
(live test)
(source)
non-specific crashers
contain-size-layout-abspos-flex-container-crash.html
(live test)
(source)
frame-flex-item-crash.html
(live test)
(source)
frameset-crash.html
(live test)
(source)
grandchild-span-height.html
(live test)
(source)
min-height-min-content-crash.html
(live test)
(source)
mixed-containing-blocks-crash.html
(live test)
(source)
negative-available-size-crash.html
(live test)
(source)
negative-flex-margins-crash.html
(live test)
(source)
negative-flex-rounding-crash.html
(live test)
(source)
negative-item-margins-002-crash.html
(live test)
(source)
negative-item-margins-crash.html
(live test)
(source)
orthogonal-flex-item-crash.html
(live test)
(source)
position-absolute-scrollbar-freeze.html
(live test)
(source)
position-relative-with-scrollable-with-abspos-crash.html
(live test)
(source)
relayout-input.html
(live test)
(source)
remove-out-of-flow-child-crash.html
(live test)
(source)
zero-content-size-with-scrollbar-crash.html
(live test)
(source)
need quirks mode
fixed-table-layout-with-percentage-width-in-flex-item.html
(live test)
(source)
percentage-size-quirks-002.html
(live test)
(source)
percentage-size-quirks.html
(live test)
(source)
quirks-auto-block-size-with-percentage-item.html
(live test)
(source)
css box 3 tests
percentage-padding-001.html
(live test)
(source)
percentage-padding-002.html
(live test)
(source)
percentage-padding-003.html
(live test)
(source)
percentage-padding-004.html
(live test)
(source)
percentage-padding-005.html
(live test)
(source)
unsure/nonspecific
remove-wrapped-001.html
(live test)
(source)
remove-wrapped-002.html
(live test)
(source)
scrollbars-auto-min-content-sizing.html
(live test)
(source)
select-element-multiple.html
(live test)
(source)
shrinking-column-flexbox.html
(live test)
(source)
table-as-item-large-intrinsic-size.html
(live test)
(source)
table-with-float-paint.html
(live test)
(source)
align-content-rounding.html
(live test)
(source)
anonymous-flex-item-restyle.html
(live test)
(source)
flex-rounding.html
(live test)
(source)
justify-content-rounding.html
(live test)
(source)
main-axis-margin-rounding.html
(live test)
(source)
percentage-heights-020.html
(live test)
(source)
percentage-heights-021.html
(live test)
(source)
percentage-heights-022.html
(live test)
(source)
percentage-heights-023.html
(live test)
(source)
relayout-intrinsic-block-size.html
(live test)
(source)
total-min-max-violation-zero.html
(live test)
(source)
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with
, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
align-content
, in § 8.4
align-items
, in § 8.3
align-self
, in § 8.3
auto
value for align-items, align-self
, in § 8.3
value for flex-basis
, in § 7.1
baseline
, in § 8.3
center
value for align-content
, in § 8.4
value for align-items, align-self
, in § 8.3
value for justify-content
, in § 8.2
collapsed
, in § 4.4
collapsed flex item
, in § 4.4
column
, in § 5.1
column-reverse
, in § 5.1
content
, in § 7.1
content-based minimum size
, in § 4.5
content size suggestion
, in § 4.5
cross axis
, in § 2
cross-axis
, in § 2
cross-axis baseline set
, in § 8.5
cross dimension
, in § 2
cross-end
, in § 2
cross size
, in § 2
cross size property
, in § 2
cross-start
, in § 2
definite
, in § 9.8
definite size
, in § 9.8
first cross-axis baseline set
, in § 8.5
first main-axis baseline set
, in § 8.5
flex
(property)
, in § 7.1
value for display
, in § 3
flex base size
, in § 9.2
<'flex-basis'>
, in § 7.1
flex basis
, in § 7.1
flex-basis
, in § 7.2.3
flex container
, in § 2
flex direction
, in § 2
flex-direction
, in § 5.1
flex-end
value for align-content
, in § 8.4
value for align-items, align-self
, in § 8.3
value for justify-content
, in § 8.2
flex factor
, in § 7.1
flex-flow
, in § 5.3
flex formatting context
, in § 3
<'flex-grow'>
, in § 7.1
flex-grow
, in § 7.2.1
flex grow factor
, in § 7.1
flexible
, in § 7
flex item
, in § 2
flex layout
, in § 1
flex-level
, in § 4
flex line
, in § 6
<'flex-shrink'>
, in § 7.1
flex-shrink
, in § 7.2.2
flex shrink factor
, in § 7.1
flex-start
value for align-content
, in § 8.4
value for align-items, align-self
, in § 8.3
value for justify-content
, in § 8.2
flex-wrap
, in § 5.2
fully inflexible
, in § 7
hypothetical cross size
, in § 9.4
hypothetical main size
, in § 9.2
indefinite
, in § 9.8
indefinite size
, in § 9.8
initial free space
, in § 9.7
inline-flex
, in § 3
justify-content
, in § 8.2
last cross-axis baseline set
, in § 8.5
last main-axis baseline set
, in § 8.5
main axis
, in § 2
main-axis
, in § 2
main-axis baseline set
, in § 8.5
main dimension
, in § 2
main-end
, in § 2
main size
, in § 2
main size property
, in § 2
main-start
, in § 2
max cross size
, in § 2
max cross size property
, in § 2
max main size
, in § 2
max main size property
, in § 2
min cross size
, in § 2
min cross size property
, in § 2
min main size
, in § 2
min main size property
, in § 2
multi-line
, in § 6
multi-line flex container
, in § 6
none
, in § 7.1
nowrap
, in § 5.2
value for flex-grow
, in § 7.2.1
value for flex-shrink
, in § 7.2.2
participates in baseline alignment
, in § 8.3
remaining free space
, in § 9.7
row
, in § 5.1
row-reverse
, in § 5.1
scaled flex shrink factor
, in § 9.7
single-line
, in § 6
single-line flex container
, in § 6
space-around
value for align-content
, in § 8.4
value for justify-content
, in § 8.2
space-between
value for align-content
, in § 8.4
value for justify-content
, in § 8.2
specified size suggestion
, in § 4.5
stretch
value for align-content
, in § 8.4
value for align-items, align-self
, in § 8.3
stretched
, in § 8.3
target main size
, in § 9.7
transferred size suggestion
, in § 4.5
wrap
, in § 5.2
wrap-reverse
, in § 5.2
Terms defined by reference
[CSS-ALIGN-3]
defines the following terms:
alignment baseline
alignment context
baseline set
generate baselines
justify-self
last-baseline alignment
start
synthesize baseline
synthesized baseline
[CSS-BOX-4]
defines the following terms:
content edge
margin edge
[CSS-BREAK-4]
defines the following terms:
fragmentation container
fragmentation context
[CSS-CASCADE-5]
defines the following terms:
computed value
initial
legacy name alias
used value
[CSS-DISPLAY-4]
defines the following terms:
anonymous
block box
block container
block-level
block-level box
blockify
containing block
display
establishes an independent formatting context
flow layout
formatting context
in-flow
inline-level
non-replaced element
order
order-modified document order
out-of-flow
replaced element
text node
text sequence
visibility
[CSS-IMAGES-3]
defines the following terms:
specified size
[CSS-INLINE-3]
defines the following terms:
vertical-align
[CSS-OVERFLOW-3]
defines the following terms:
non-scrollable overflow value
overflow
scroll container
scrollable overflow value
scrollport
visible
[CSS-POSITION-3]
defines the following terms:
bottom
left
position
relative
right
static
static position
static-position rectangle
top
[CSS-PSEUDO-4]
defines the following terms:
::first-letter
::first-line
first formatted line
[CSS-SIZING-3]
defines the following terms:
auto
automatic block size
automatic minimum size
automatic size
available space
behave as auto
box-sizing
definite
height
indefinite
inner size
intrinsic size contribution
intrinsic sizing
max-content
max-content
(for width)
max-content constraint
max-content contribution
max-content size
maximum size
min-content
min-content
(for width)
min-content constraint
min-content contribution
min-content size
minimum size
outer size
preferred size
width
[CSS-SIZING-4]
defines the following terms:
aspect-ratio
fit-content
preferred aspect ratio
[CSS-TEXT-4]
defines the following terms:
document white space characters
white-space
[CSS-TEXT-DECOR-4]
defines the following terms:
text-decoration
[CSS-VALUES-4]
defines the following terms:
CSS bracketed range notation
CSS-wide keywords
||
[CSS-WRITING-MODES-4]
defines the following terms:
block axis
block size
block-end
block-start
endmost
horizontal-tb
inline axis
inline size
inline-end
inline-start
ltr
rtl
startmost
vertical-rl
writing mode
writing-mode
[CSS2]
defines the following terms:
auto
(for table-layout)
auto
(for z-index)
clear
float
margin
max-height
max-width
min-height
min-width
page-break-after
page-break-before
z-index
[CSS3-BREAK]
defines the following terms:
break-after
break-before
break-inside
[CSS3-WRITING-MODES]
defines the following terms:
direction
end
start
[CSSOM-1]
defines the following terms:
resolved value
References
Normative References
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr..
CSS Box Alignment Module Level 3
. URL:
[CSS-BOX-4]
Elika Etemad.
CSS Box Model Module Level 4
. URL:
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 4
. URL:
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. URL:
[CSS-DISPLAY-3]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 3
. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. URL:
[CSS-IMAGES-3]
Tab Atkins Jr.; Elika Etemad; Lea Verou.
CSS Images Module Level 3
. URL:
[CSS-INLINE-3]
Elika Etemad.
CSS Inline Layout Module Level 3
. URL:
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal.
CSS Overflow Module Level 3
. URL:
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr..
CSS Positioned Layout Module Level 3
. URL:
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns.
CSS Pseudo-Elements Module Level 4
. URL:
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad.
CSS Box Sizing Module Level 3
. URL:
[CSS-SIZING-4]
Tab Atkins Jr.; Elika Etemad; Jen Simmons.
CSS Box Sizing Module Level 4
. URL:
[CSS-TEXT-4]
Elika Etemad; et al.
CSS Text Module Level 4
. URL:
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. URL:
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 4
. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. URL:
[CSS3-BREAK]
Rossen Atanassov; Elika Etemad.
CSS Fragmentation Module Level 3
. URL:
[CSS3-WRITING-MODES]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 3
. URL:
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez.
CSS Object Model (CSSOM)
. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
Non-Normative References
[CSS-TEXT-DECOR-4]
Elika Etemad; Koji Ishii.
CSS Text Decoration Module Level 4
. URL:
[CSS3UI]
Tantek Çelik; Florian Rivoal.
CSS Basic User Interface Module Level 3 (CSS3 UI)
. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Animation type
Canonical order
Computed value
align-content
flex-start | flex-end | center | space-between | space-around | stretch
stretch
multi-line flex containers
no
n/a
discrete
per grammar
specified keyword
align-items
flex-start | flex-end | center | baseline | stretch
stretch
flex containers
no
n/a
discrete
per grammar
specified keyword
align-self
auto | flex-start | flex-end | center | baseline | stretch
auto
flex items
no
n/a
discrete
per grammar
specified keyword
flex
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
0 1 auto
flex items
no
see individual properties
by computed value type
per grammar
see individual properties
flex-basis
content | <'width'>
auto
flex items
no
relative to the flex container’s inner main size
by computed value type
per grammar
specified keyword or a computed
flex-direction
row | row-reverse | column | column-reverse
row
flex containers
no
n/a
discrete
per grammar
specified keyword
flex-flow
<'flex-direction'> || <'flex-wrap'>
see individual properties
see individual properties
see individual properties
see individual properties
see individual properties
per grammar
see individual properties
flex-grow
flex items
no
n/a
by computed value type
per grammar
specified number
flex-shrink
flex items
no
n/a
number
per grammar
specified value
flex-wrap
nowrap | wrap | wrap-reverse
nowrap
flex containers
no
n/a
discrete
per grammar
specified keyword
justify-content
flex-start | flex-end | center | space-between | space-around
flex-start
flex containers
no
n/a
discrete
per grammar
specified keyword
MDN
align-content
In all current engines.
Firefox
28+
Safari
9+
Chrome
29+
Opera
Edge
79+
Edge (Legacy)
12+
IE
11
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
4.4+
Samsung Internet
Opera Mobile
MDN
align-items
In all current engines.
Firefox
20+
Safari
9+
Chrome
29+
Opera
Edge
79+
Edge (Legacy)
12+
IE
11
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
align-self
In all current engines.
Firefox
20+
Safari
9+
Chrome
29+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
10+
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
12.1+
MDN
flex-basis
In all current engines.
Firefox
22+
Safari
9+
Chrome
29+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
11
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
4.4+
Samsung Internet
Opera Mobile
12.1+
MDN
flex-direction
In all current engines.
Firefox
81+
Safari
9+
Chrome
29+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
11
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
4.4+
Samsung Internet
Opera Mobile
12.1+
MDN
flex-flow
In all current engines.
Firefox
28+
Safari
9+
Chrome
29+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
11
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
4.4+
Samsung Internet
Opera Mobile
12.1+
MDN
flex-grow
In all current engines.
Firefox
20+
Safari
9+
Chrome
29+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
11
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
4.4+
Samsung Internet
Opera Mobile
12.1+
MDN
flex-shrink
In all current engines.
Firefox
20+
Safari
9+
Chrome
29+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
10+
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
4.4+
Samsung Internet
Opera Mobile
12.1+
MDN
flex-wrap
In all current engines.
Firefox
28+
Safari
9+
Chrome
29+
Opera
17+
Edge
79+
Edge (Legacy)
12+
IE
None
Firefox for Android
52+
iOS Safari
Chrome for Android
Android WebView
4.4+
Samsung Internet
Opera Mobile
18+
MDN
flex
In all current engines.
Firefox
20+
Safari
9+
Chrome
29+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
11
Firefox for Android
20+
iOS Safari
Chrome for Android
Android WebView
4.4+
Samsung Internet
Opera Mobile
12.1+
MDN
justify-content
In all current engines.
Firefox
20+
Safari
9+
Chrome
29+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
IE
11
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
12.1+
US