Flex-flow
Gabriel Litke
This section describes the status of this document at the time of its publication.Other documents may supersede this document.A list of current W3C publications and the latest revision of this technical reportcan be found in the W3C technical reports index at
This document was produced by the CSS Working Group as a Candidate Recommendation. This document is intended to become a W3C Recommendation.This document will remain a Candidate Recommendation at least until 19 December 2018 in orderto ensure the opportunity for wide review.
Publication as a Candidate Recommendation does not imply endorsement by the W3CMembership. This is a draft document and may be updated, replaced orobsoleted by other documents at any time. It is inappropriate to cite thisdocument as other than work in progress.
This document was produced by a group operating underthe W3C Patent Policy.W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group;that page also includes instructions for disclosing a patent.An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
Flex layout is superficially similar to block layout.It lacks many of the more complex text- or document-centric propertiesthat can be used in block layout, such as floats and columns.In return it gains simple and powerful toolsfor distributing space and aligning contentin ways that web apps and complex web pages often need.The contents of a flex container:
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 logicallywith 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.
This module extends the definition of the display property [CSS21],adding a new block-level and new inline-level display type,and defining a new type of formatting contextalong with properties to control its layout.None of the properties defined in this module apply to the ::first-line or ::first-letter pseudo-elements.
A flex container is the box generated by an element with acomputed 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.
Each in-flow child of a flex container becomes a flex item,and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item.However, if the entire sequence of child text runs contains only white space (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).
The display value of a flex item is blockified:if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.(See CSS2.19.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)
The static position of an absolutely-positioned child of a flex container is determined such that the child is positionedas if it were the sole flex item in the flex container,assuming both the child and the flex containerwere fixed-size boxes of their used size.For this purpose, auto margins are treated as zero.
Flex items paint exactly the same as inline blocks [CSS21],except that order-modified document order is used in place of raw document order,and z-index values other than auto create a stacking contexteven if position is static (behaving exactly as if position were relative).
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 that is not a scroll container is a content-based minimum size;for scroll containers the automatic minimum size is zero, as usual.
In general, the content-based minimum size of a flex item is the smaller of its content size suggestion and its specified size suggestion.However, if the box has an aspect ratio and no specified size,its content-based minimum size is the smaller of its content size suggestion and its transferred size suggestion.If the box has neither a specified size suggestion nor an aspect ratio,its content-based minimum size is the content size suggestion.
The content size suggestion, specified size suggestion, and transferred size suggestion used in this calculation account for the relevant min/max/preferred size propertiesso that the content-based minimum size does not interfere with any author-provided constraints,and are defined below:
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.
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 imagestretching 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.
For the values that are not wrap-reverse,the cross-start direction is equivalent to eitherthe 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 directionsare swapped.
The order property controls the order in whichflex items appear within the flex container,by assigning them to ordinal groups.It takes a single value,which specifies which ordinal group the flex item belongs to.
A flex container lays out its content in order-modified document order,starting from the lowest numbered ordinal group and going up.Items with the same ordinal group are laid out in the order they appear in the source document.This also affects the painting order [CSS21],exactly as if the flex items were reordered in the source document.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.
The order property does not affect ordering in non-visual media(such as speech).Likewise, order does not affectthe default traversal order of sequential navigation modes(such as cycling through links, see e.g. tabindex [HTML]).
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:
Flex items in a flex container are laid out and alignedwithin 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 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.
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.
The flex property specifies the components of a flexible length: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.
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 zeroand the item suddenly takes up none of the free space.With this behavior,the item instead gradually takes less of the free spaceas flex-grow shrinks below 1,smoothly transitioning to taking none of the free space at zero.
A unitless zero that is not already preceded by two flex factorsmust be interpreted as a flex factor.To avoid misinterpretation or invalid declarations,authors must specify a zero componentwith a unit or precede it by two flex factors.
Authors are encouraged to control flexibility using the flex shorthandrather than with its longhand properties directly,as the shorthand correctly resets any unspecified componentsto accommodate common uses.
93ddb68554