{{ CSSRef() }}
{{ SeeCompatTable() }}
The CSS Flexible Box Layout Model, or "flexbox", is part of the draft CSS3 specification. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.
Many designers will find the flexbox model easier to use. Child elements in a flexbox can be laid out in any direction and can have flexible dimensions to adapt to the display space. Positioning child elements is thus much easier, and complex layouts can be achieved more simply and with cleaner code, as the display order of the elements is independent of their order in the source code. This independence intentionally affects only the visual rendering, leaving speech order and navigation based on the source order.
There are two standards for the flexbox model. The original standard was a W3C working draft that has been implemented on several browsers. The new standard replaces the original, and the W3C has discontinued work on the original. Both standards continue to be supported, and both may coexist in the same style sheet, as the standards' properties use different prefixes.
This article differentiates between the two standards, based on the property prefixes, as the "flex-" and "box-" implementations.
- The new flex- implementation already has more features and is more fully developed. Use this one for current and future development.
- The original box- implementation is described here for reference.
Both implementations extend the CSS2.1 layout model via the display property, adding a new value to designate the flexbox implementation.
flex- implementation
The "flex-" implementation is the most current implementation of flexbox. To designate the CSS for elements using this style, set the display property as follows:
display : flex
or
display : inline-flex
Doing so defines the element as a flex container and its children as flex items. The flex
value makes the flex container a block-level element. The inline-flex
value makes the flex container an atomic inline-level element.
display : -webkit-flex
.See Using CSS flexible boxes for more information.
flex- properties
These are the properties of the current flexbox standard. See Flexible boxes vocabulary for definitions of the terms used in the descriptions below.
-
align-content
- Defines how a flex container's lines are aligned along the cross axis.
-
align-items
- Defines how flex items are aligned along the cross axis.
-
align-self
-
Defines how a single flex item is aligned on the cross axis, and overrides the default established by
align-items
. -
flex
-
A shorthand property for
flex-grow
,flex-shrink
, andflex-basis
that reflects the ability of a flex item to either stretch of shrink when needed. -
flex-basis
- Determines the initial main size of a flex item.
-
flex-direction
- Defines how flex items belonging to a common flex container are placed by setting the main axis.
-
flex-flow
-
A shorthand property to define
flex-direction
andflex-wrap
. -
flex-grow
- Defines how much the flex item's size will increase in proportion to the other items in the flex container.
-
flex-shrink
- Defines how much the flex item's size will decrease in proportion to the other items in the flex container.
-
flex-wrap
- Defines how flex items are wrapped into lines.
-
justify-content
- Defines how flex items are laid out along the main axis on the current line.
-
order
- Defines the order in which flex items appear in a flex layout.
Specification
- (latest editor's draft) https://dev.w3.org/csswg/css3-flexbox/
- https://www.w3.org/TR/css3-flexbox/
See also
box- implementation
{{ warning("These are the properties of the original CSS Flexible Box Layout Module standard which is being replaced by a new standard.") }}
See the new standard, flex- properties, or Using CSS flexible boxes for more information on the current standard.
The "box-" implementation is the original, no longer developed, implementation of flexbox. To designate the CSS for elements using this style, set the display property as follows:
display : box
or
display : inline-box
Doing so defines the element as a flexbox (or simply, box) and its children as flexbox children. The flex
value makes the flexbox a block-level element. The inline-flex
value makes the flex box an atomic inline-level element.
display : -webkit-box
.Children of boxes are all block-level. These blocks then get stacked in the direction specified by the box-orient
and box-direction
properties, and ordered specified by the box-ordinal-group
property. They are aligned within the box according to the box-align
property. The boxes may then flex or be distributed as specified by the box-flex
, box-flex-group
, box-pack
and box-lines
properties.
box- properties
- box-align
- Specifies how a box's children are placed and aligned along the direction perpendicular to the box orientation, and where the extra space, if any, is positioned.
- box-direction
- Specifies the direction in which children of a box are displayed.
- box-flex
- Describes the box's child element's degree of flexibility.
- box-flex-group
- Assigns the box's child element to a flex group.
- box-lines
- Determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).
- box-ordinal-group
- Assigns the box's child elements to an ordinal group.
- box-orient
- Determines whether the box's children are laid out horizontally (along the in-line axis) or vertically (along the block axis), thus establishing the box axis.
- box-pack
- Dictates how any additional space along the box axis should be distributed between child elements.
Specification
See Also
- HTML5Rocks! article, Quick Hits with the Flexible Box Model, by Paul Irish
Compatibility
{{ CompatibilityTable() }}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
box- implementation | 17.0{{ property_prefix("-webkit") }} | Supported | {{ CompatNo() }} | {{ CompatNo() }} | Supported |
flex- implementation | 21.0{{ property_prefix("-webkit") }} | 10{{ property_prefix("-ms") }} | {{ CompatNo() }} | {{ CompatNo() }} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
box- implementation | 2.1{{ property_prefix("-webkit") }} | {{ CompatNo() }} | {{ CompatNo() }} | {{ CompatNo() }} | Supported |
flex- implementation | {{ CompatNo() }} | {{ CompatNo() }} | {{ CompatNo() }} | {{ CompatNo() }} | {{ CompatNo() }} |
{{ languages( { "zh-cn": "zh-cn/Using_flexbox"} ) }}