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.
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
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.
<sectionid="deals"><sectionclass="sale-item"><h1>Computer Starter Kit</h1><p>This is the best computer money can buy, if you don’t have much money.
<ul><li>Computer
<li>Monitor
<li>Keyboard
<li>Mouse
</ul><imgsrc="images/computer.jpg"alt="You get: a white computer with matching peripherals."><button>BUY NOW</button></section><sectionclass="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.
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
A 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.
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.
A 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.
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:
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.
<divstyle="display:flex"><!-- flex item: block child --><divid="item1">block</div><!-- flex item: floated element; floating is ignored --><divid="item2"style="float: left;">float</div><!-- flex item: anonymous block box around inline content -->
anonymous item 3
<!-- flex item: inline child --><span>
item 4
<!-- flex items do not split around blocks --><qstyle="display: block"id=not-an-item>item 4</q>
item 4
</span></div>
Flex items determined from above code block
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.
A flex itemestablishes 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: 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: blockflex 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.
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.)
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’scross axis.
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.
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.
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.
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: 60em){/* two column layout only when enough room (relative to default text size) */
div {display: flex;}
#main {flex:1;/* Main takes up all remaining space */
order: 1;/* Place it after (to the right of) the navigation */
min-width: 12em;/* Optimize main content area sizing */}}/* menu items use flex layout so that visibility:collapse will work */
nav > ul > li {display: flex;flex-flow: column;}/* dynamically collapse submenus when not targeted */
nav > ul > li:not(:target):not(:hover) > ul {visibility: collapse;}
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.
For the purpose of calculating an intrinsic size of the box
(e.g. the box’s min-content size),
a 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,
a 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.)
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.
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.
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.
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.
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.
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,
a row flex container lays out its contents from top to bottom,
as seen in this example:
English
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.
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:
This layout can be easily achieved with flex layout:
main {display: flex;}
main > article {order:2;min-width:12em;flex:1;}
main > nav {order:1;width:200px;}
main > aside {order:3;width:200px;}
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: 600px){/* Too narrow to support three columns */
main {flex-flow: column;}
main > article, main > nav, main > aside {/* Return them to document order */
order: 0;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:
A 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.
A 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.
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-lineflex 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-lineflex 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.
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.
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.
This <number [0,∞]> component sets flex-growlonghand
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 1.
Tests
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 1 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 1,
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 1 and 2 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.
This <number [0,∞]> component sets flex-shrinklonghand
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 1.
Tests
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.
This component sets the flex-basislonghand,
which specifies the flex basis:
the initial main size of the flex item,
before free space is distributed according to the flex factors.
Tests
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.
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 1, 1, and 2, respectively:
notice that the item with a flex factor of 2 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.
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.
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.
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.
Equivalent to flex: <number [1,∞]> 1 0.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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
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
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
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.)
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
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
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.
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-lineflex 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-lineflex 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.
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):
