{{ CSSRef() }}
{{ SeeCompatTable() }}
The CSS Flexible Box Layout Model, or "flexbox" for short, provides for the arrangement of elements on a page such that the elements behave predictably when the layout must change for different screen sizes and different arrangements generally. For many applications, it provides an improvement over the more established block layout model that uses floats to position the elements. The flexible box model does not use floats, nor do the flex container's margins collapse with the margins of its contents. Many designers will find it easier to use.
For the flexbox model there are two standards. The first, original standard was a W3C working draft that has been implemented on several browsers. The second, new standard replaces the original, and the W3C has discontinued work on the original while continuing to develop the new standard. Both standards will continue to be supported, and both may coexist in the same style sheet - the properties of each 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 the tutorial, 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, and 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"} ) }}