Using CSS flexible boxes

Table of contents

  1. 1. Flexible boxes concept
    1. 1.1. Properties not affecting flexible boxes
    2. 1.2. Flexbox vocabulary
      1. 1.2.1. Flexbox items
      2. 1.2.2. Axes
      3. 1.2.3. Dimensions
      4. 1.2.4. Directions
      5. 1.2.5. Lines
  2. 2. List of flexible box properties
  3. 3. Things to keep in mind
  4. 4. Setting a complex layout using flexible boxes
Page Notifications Off

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 flexbox 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 flexbox is defined using flexbox or inline-flexbox 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 flexbox.

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

Flexbox vocabulary

Flexbox items

Flexbox items are elements that matches one of the criteria:

  • Immediate block-level children of the flexbox element
  • Atomic inline-level children of the flexbox element
  • Contiguous non-replaced inline children wrapped into an anonymous block element.
Note: Absolutely positionned children of a flexbox are not considered flexbox items but leave an anonymous inline box with a width and height of 0px which in the case flex-pack property is set to justify or distribute can cause a double-sized space between items.

Axes

Every flexible boxes layout uses two axe  s to be laid out. The main-axis is defined as the axis along which the flexbox 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 flexbox 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

Flexbox 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 flexbox item to either stretch of shrink when needed.
flex-align
Defines how flexbox items should be aligned accross the cross-axis.
flex-direction
Defines how flexbox items belonging to a common flexbox are placed by setting the main-axis.
flex-flow
A shorthand property to define flex-direction and flex-wrap.
flex-item-align
Defines how a single flexbox item is aligned on the cross-axis.
flex-line-pack
Defines how flexbox items are aligned along the cross-axis.
flex-order
Defines the order in which flexbox items appear.
flex-pack
Defines how flexbox items are laid out along the main-axis on the current line.
flex-wrap
Defines how flexbox items are wrapped into lines.

Things to keep in mind

The algorithm describing how flexbox 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 flexbox, flexbox items and inside flexbox items.

Setting a complex layout using flexible boxes

Tags (1)

Edit tags

Attachments (0)

 

Attach file