CSS Flexible Box Layout Module Level 1

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/

Copyright © 2018 W3C^® (MIT, ERCIM, Keio, Beihang). 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 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

1. 1Introduction
   1. 1.1Overview
   2. 1.2Module interactions
2. 2Flex Layout Box Model and Terminology
3. 3Flex Containers: the flex and inline-flex display values
4. 4Flex Items
   1. 4.1Absolutely-Positioned Flex Children
   2. 4.2Flex Item Margins and Paddings
   3. 4.3Flex Item Z-Ordering
   4. 4.4Collapsed Items
   5. 4.5Automatic Minimum Size of Flex Items
5. 5Ordering and Orientation
   1. 5.1Flex Flow Direction: the flex-directionproperty
   2. 5.2Flex Line Wrapping: the flex-wrapproperty
   3. 5.3Flex Direction and Wrap: the flex-flowshorthand
   4. 5.4Display Order: the order property
      1. 5.4.1Reordering and Accessibility
6. 6Flex Lines
7. 7Flexibility
   1. 7.1The flex Shorthand
      1. 7.1.1Basic Values of flex
   2. 7.2Components of Flexibility
      1. 7.2.1The flex-grow property
      2. 7.2.2The flex-shrink property
      3. 7.2.3The flex-basis property
8. 8Alignment
   1. 8.1Aligning with auto margins
   2. 8.2Axis Alignment: the justify-contentproperty
   3. 8.3Cross-axis Alignment: the align-itemsand align-self properties
   4. 8.4Packing Flex Lines: the align-contentproperty
   5. 8.5Flex Container Baselines
9. 9Flex Layout Algorithm
   1. 9.1Initial Setup
   2. 9.2Line Length Determination
   3. 9.3Main Size Determination
   4. 9.4Cross Size Determination
   5. 9.5Main-Axis Alignment
   6. 9.6Cross-Axis Alignment
   7. 9.7Resolving Flexible Lengths
   8. 9.8Definite and Indefinite Sizes
   9. 9.9Intrinsic Sizes
      1. 9.9.1Flex Container Intrinsic Main Sizes
      2. 9.9.2Flex Container Intrinsic Cross Sizes
      3. 9.9.3Flex Item Intrinsic Size Contributions
10. 10Fragmenting Flex Layout
    1. 10.1Sample Flex Fragmentation Algorithm
11. Appendix A: Axis Mappings
12. Acknowledgments
13. Changes
    1. Changes since the 16 October 2017 CR
    2. Changes since the 26 May 2016 CR
       1. Substantive Changes and Bugfixes
       2. Clarifications
    3. Changes since the 1 March 2016 CR
       1. Substantive Changes and Bugfixes
       2. Clarifications
    4. Changes since the 14 May 2015 LCWD
       1. Substantive Changes and Bugfixes
       2. Clarifications
    5. Changes since the 25 September 2014 LCWD
       1. Substantive Changes and Bugfixes
       2. Clarifications
    6. Changes since the 25 March 2014 LCWD
       1. Substantive Changes and Bugfixes
       2. Clarifications
    7. Changes since the 18 September 2012 Candidate Recommendation
       1. Substantive Changes and Bugfixes
       2. Clarifications
14. 11Privacy and Security Considerations
15. Conformance
    1. Document conventions
    2. Conformance classes
    3. Requirements for Responsible Implementation of CSS
       1. Partial Implementations
       2. Implementations of Unstable and Proprietary Features
       3. Implementations of CR-level Features
    4. CR exit criteria
16. Index
    1. Terms defined by this specification
    2. Terms defined by reference
17. References
    1. Normative References
    2. Informative References
18. Property Index

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.