Using CSS flexible boxes

This is an experimental feature
Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental feature is subject to change in future version of browsers as the spec changes.

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.

Note: CSS Flexible Boxes Layout specfication is still a draft so all properties used should be prefixed with -ms-, -moz-, -o- and -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 flex or inline-flex values of the display property.

Properties not affecting flexible boxes

Since flexible boxes uses a different layout algorithm, some properties do not make sense on a flex container.

  • column-* properties of the Multicol module have no effect on a flex.
  • float and clear have no effect on a flex item. Using float cause the display property of the element to compute to block.
  • vertical-align has no effect on the alignment of flex items.

Flexible boxes vocabulary

Flex items

Flex items are elements that matches one of the criteria:

Note: If the anonymous block contains solely inline containing whitespaces, the box would not be generated as if it had display:none.
Note: Absolutely positioned children of a flex container are not considered flex items, but instead leave an anonymous inline box with a width and height of 0px. When flex-pack property is set to justify or distribute, this can cause a double-sized space between items.

Axes

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 main-axis.

Dimensions

Agnostic equivalent of height and width are called main size and cross size which are the dimensions respectively along the main-axis and cross-axis.

Directions

main-start, main-end, cross-start andcross-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.

Lines

Flex items can be laid out on either a unique line or on several lines according to the flex-wrap property.

List of flexible box properties

flex
Reflects the ability of a flex item to either stretch of shrink when needed.
flex-align
Defines how flex items should be aligned accross the cross-axis.
flex-basis
Defines the flex-basis part of the flex shorthand property.
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 and flex-wrap.
flex-grow
Defines the positive flexility of a flex item.
flex-item-align
Defines how a single flex item is aligned on the cross-axis.
flex-line-pack
Defines how flex items are aligned along the cross-axis.
flex-order
Defines the order in which flex items appear.
flex-pack
Defines how flex items are laid out along the main-axis on the current line.
flex-shrink
Defines the negative flexibility of a flex item.
flex-wrap
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-start and main-end are laid out according to the position of start and end.

cross-start and cross-end relie on the definition of the start or before position that depends on the value of direction.

Page breaks are possible in flexible boxes layout as long as break- property allows it. break-after, break-before and break-inside properties are accepted on a flex container, flex items and inside flex items.

Setting a complex layout using flexible boxes

Tags (1)

Edit tags

Attachments (0)

 

Attach file