This version:https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/Latest published version:https://www.w3.org/TR/css-flexbox-1/Editor’s Draft:https://drafts.csswg.org/css-flexbox-1/Previous Versions:https://www.w3.org/TR/2018/CR-css-flexbox-1-20181108/https://www.w3.org/TR/2017/CR-css-flexbox-1-20171019/https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/https://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/https://www.w3.org/TR/2014/WD-css-flexbox-1-20140925/https://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/https://www.w3.org/TR/2011/WD-css3-flexbox-20111129/https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/Test Suite:http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/Editors:Tab Atkins Jr. (Google)Elika J. Etemad / fantasai (Invited Expert)Rossen Atanassov (Microsoft)Former Editors:Alex Mogilevsky (Microsoft Corporation)L. David Baron (Mozilla)Neil Deakin (Mozilla Corporation)Ian Hickson (formerly of Opera Software)David Hyatt (formerly of Netscape Corporation)Suggest an Edit for this Spec:GitHub EditorIssue Tracking:GitHub IssuesWPT Path Prefix:css/css-flexbox/
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 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 report can be found in the W3C technical reports index at https://www.w3.org/TR/.
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 order to ensure the opportunity for wide review.
GitHub Issues are preferred for discussion of this specification. When filing an issue, please put the text “css-flexbox” in the title, preferably like this: “[css-flexbox] …summary of comment…”. All issues and comments are archived, and there is also a historical archive.
A preliminary implementation report is available.
Publication as a Candidate Recommendation does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
This document was produced by a group operating under the 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.
This document is governed by the 1 February 2018 W3C Process Document.
For changes since the last draft, see the Changes section.
table of contents
- 2Flex Layout Box Model and Terminology
- 3Flex Containers: the flex and inline-flex display values
- 4Flex Items
- 5Ordering and Orientation
- 6Flex Lines
- 9Flex Layout Algorithm
- 9.1Initial Setup
- 9.2Line Length Determination
- 9.3Main Size Determination
- 9.4Cross Size Determination
- 9.5Main-Axis Alignment
- 9.6Cross-Axis Alignment
- 9.7Resolving Flexible Lengths
- 9.8Definite and Indefinite Sizes
- 9.9Intrinsic Sizes
- 10Fragmenting Flex Layout
- Appendix A: Axis Mappings
- Changes since the 16 October 2017 CR
- Changes since the 26 May 2016 CR
- Changes since the 1 March 2016 CR
- Changes since the 14 May 2015 LCWD
- Changes since the 25 September 2014 LCWD
- Changes since the 25 March 2014 LCWD
- Changes since the 18 September 2012 Candidate Recommendation
- 11Privacy and Security Considerations
- Property Index
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.