Flexbox

flex-direction

Sets the main axis, and so the direction items are placed in: along the inline axis (row, the direction text runs) or the block axis (column). The -reverse values place items from the opposite end.

The reverse values change only the visual order. Screen readers and keyboard focus still follow the source order.

flex-wrap

Whether items stay on one line and shrink to fit (nowrap) or break onto further lines when they run out of room (wrap). wrap-reverse stacks the new lines in the opposite cross-axis direction.

balance spreads the items across the lines so each line is as close in length as possible, instead of filling every line and leaving a short last one.

flex-flow

Shorthand for flex-direction and flex-wrap, in either order.

flex-flow: row wrap;

flex-line-count

The minimum number of lines that balanced, wrapping items are spread over. It only has an effect when flex-wrap includes balance; if the count is at least the number of items, each item gets a line of its own.

flex-flow: column balance;
flex-line-count: 2;

flex

Shorthand for flex-grow, flex-shrink and flex-basis: how an item is sized and how it shares out the free space in its line. Use it rather than the longhands, because its single-number form sets a sensible basis.

.row { display: flex; }
.row > * { flex: 1; }  /* 1 1 0 */

Items still will not shrink below their content's minimum size, because min-width defaults to auto on flex items. Add min-width: 0 when long words or wide children must be allowed to shrink.

flex-grow

How much of the line's leftover space the item takes, as a share relative to its siblings. 0 means it does not grow.

flex-shrink

How much the item gives up when the line is too short for all its items. Shrinking is weighted by the item's basis as well as this factor, so larger items lose more. 0 means it does not shrink.

flex-basis

The item's starting size along the main axis, before free space is shared out. auto uses the item's width or height; content sizes it from its content; any other value is a size like those accepted by width.

order

Moves a flex or grid item earlier or later in the layout. Items are placed in ascending order, and items with the same value keep their source order.

Only the visual position changes. Reading order and tab order still follow the source, so do not use order to fix content that is in the wrong place in the HTML.

justify-content

Distributes free space along the main axis of a flex container: between and around the items on each line. In a grid it places the grid tracks within the container instead.

align-content

Distributes free space in the cross axis between the lines of a multi-line flex container, using the same values as justify-content. It has no effect on a single-line (nowrap) flex container. In a grid it places the row tracks within the container.

.hero { min-height: 60vh; align-content: center; }

align-items

Aligns every item within its line in the cross axis. It sets the default that each child's align-self: auto picks up.

align-self

Overrides align-items for one item, with the same values. auto uses the parent's align-items. On an absolutely positioned box it aligns the box within its inset-modified containing block, and anchor-center centres it on its anchor.

-webkit-box-orient Deprecated

The direction a legacy box lays out its children. Use flex-direction instead, except when setting up -webkit-line-clamp, which needs vertical.

.summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

-webkit-box-pack Deprecated

How a legacy box distributes its children along its direction; justify spreads them out. Use justify-content instead.

-webkit-box-align Deprecated

How a legacy box aligns its children across its direction. Use align-items instead.

-webkit-box-flex Deprecated

How much a child of a legacy box grows to fill spare space. Use flex-grow, or the flex shorthand, instead.

-webkit-box-ordinal-group Deprecated

Moves a child of a legacy box earlier or later; lower groups come first. Use order instead.