CSS Flexible Boxes Layout is a part of the draft CSS3 specification. It provides a CSS Box Model optimized for user interface design. Children in the flex layout can be laid out in any direction and have flexible dimensions to adapt with the space available. Positionning those children can be made easily and complex layout can be achieved in a simpler and cleaner way. The display order is independent from the order in the source code.
-webkit-to make sure of browser compatibility with respectively Internet Explorer, Gecko, Opera and Webkit browsers.
Flexible boxes concept
The layout algorithm used is direction agnostic as opposed to what block or inline layout normally are. This difference raises the need to define direction-agnostic terms used in the following guide.
A flex container is defined using
inline-flex values of the
Properties not affecting flexible boxes
Since flexible boxes uses a different layout algorithm, some properties do not make sense on a flex container.
Flexible boxes vocabulary
Flex items are elements that matches one of the criteria:
- Immediate block-level children of the flex container.
- Atomic inline-level children of the flex container.
- An anonymous block wrapping contiguous non-replaced inline children.
flex-packproperty is set to
distribute, this can cause a double-sized space between items.
Every flexible boxes layout uses two axes to be laid out. The
main-axis is defined as the axis along which the flex items are laid out.
cross-axis is defined as perpendicular to the
Agnostic equivalent of height and width are called
main size and
cross size which are the dimensions respectively along the
cross-end sides are used to define the directions towards which the flex items are laid out. They can take any of the up, bottom, left or right position according to the different combinations of properties values defined.
Flex items can be laid out on either a unique line or on several lines according to the
List of flexible box properties
- Reflects the ability of a flex item to either stretch of shrink when needed.
- Defines how flex items should be aligned accross the
- Defines the flex-basis part of the
- Defines how flex items belonging to a common flex container are placed by setting the
- A shorthand property to define
- Defines the positive flexility of a flex item.
- Defines how a single flex item is aligned on the
- Defines how flex items are aligned along the
- Defines the order in which flex items appear.
- Defines how flex items are laid out along the
main-axison the current line.
- Defines the negative flexibility of a flex item.
- Defines how flex items are wrapped into lines.
Things to keep in mind
The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.
Flexibles boxes are laid out in conformance of the writing mode. Which means that
main-end are laid out according to the position of
cross-end relie on the definition of the
before position that depends on the value of
Page breaks are possible in flexible boxes layout as long as
break- property allows it.
break-inside properties are accepted on a flex container, flex items and inside flex items.