O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

box-align

Values:

stretch | start | end | center | baseline

Initial value:

stretch

Applies to:

Elements with a display value of box or inline-box

Inherited:

No

Computed value:

As declared

Description:

Defines how flexible boxes are laid out along the axis perpendicular to the axis of orientation (see box-orient). The default, stretch, means that the children of the box are stretched to its height (if its box-orient is horizontal) or its width (if its box-orient is vertical). start and end refer to the top and bottom edges of horizontal boxes, and most likely the left and right edges of vertical boxes in left-to-right languages (though this is not specified). center aligns the center of the flexible boxes with the centerline of the axis of orientation.

Examples:

div#layout {box-align: stretch;}
.icicle {box-align: start;}

Note:

This property is from the 2009 version of the Flexible Box specification. It is expected to be deprecated by a new version of the specification, and potentially retired from browsers some time after.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required