Layout

Box sizing Display Float Clear Overflow Position Z index

Sizing

Width Min width Max width Height Min height Max height

Spacing

Margin Padding

Border

Border Border width Border color Border style Border radius

Outline

Outline Outline width Outline color Outline style Outline offset

Coordinates

Top Right Bottom Left Inset

Flexbox

Flex direction Flex grow Flex shrink Flex basis Flex wrap Order Flex Flex box alignment

Box alignment

Justify content Align content Align items Align self

Table

Table layout Border collapse

Background

Background attachment Background clip Background color Background position Background repeat Background size Background pattern

Object

Object fit Object position

Effects

Box shadow Opacity Visibility

Text

Color Font family Font size Font smoothing Font style Font weight Letter spacing Line height List style type List style position Tab size Text align Text decoration Text transform Text overflow Vertical align Whitespace Word break

Transform

Transform Scale Rotate Translate Skew Transform origin

Transition

Transition Transition property Transition duration Transition timing function Transition delay

Interactivity

Appearance Cursor Pointer events Resize User select

SVG

Fill Stroke color Stroke width

Flex box alignment

Shorthand utilities for flexbox alignment.

Syntax

Class

Properties

flex-center

justify-content: center;
align-items: center;

flex-{justCont}-{aliItems}

justify-content: {justCont};
align-items: {aliItems};

flex-{justCont}-{aliItems}-{aliCont}

justify-content: {justCont};
align-items: {aliItems};
align-content: {aliCont};

Parameters

justCont

aliItems

start | center | end | baseline | stretch

aliCont

Justify content

Align items

Align content

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.

Center an item within a flex container.

t1 flex-center

.t1.flex-center { justify-content: center; align-items: center; }

Define a flex container, horizontally start-align, vertically center items in it.

t1 flex-start-center

.t1.flex-start-center { justify-content: flex-start; align-items: center; }

Define a flex container, horizontally center, vertically center items in it.

t1 flex-center-center

.t1.flex-center-center { justify-content: center; align-items: center; }

Define a flex container, horizontally end-align, vertically center items in it.

t1 flex-end-center

.t1.flex-end-center { justify-content: flex-end; align-items: center; }

Define a flex container, distribute horizontal space between the items, vertically center them.

t1 flex-between-center

.t1.flex-between-center { justify-content: space-between; align-items: center; }

Define a flex container, distribute horizontal space around the items, vertically center them.

t1 flex-around-center

.t1.flex-around-center { justify-content: space-around; align-items: center; }

Define a flex container, distribute horizontal space evenly around the items, vertically center them.

t1 flex-evenly-center

.t1.flex-evenly-center { justify-content: space-evenly; align-items: center; }

Define a flex container, horizontally center, vertically align items to the start.

t1 flex-center-start

.t1.flex-center-start { justify-content: center; align-items: flex-start; }

Define a flex container, horizontally center, vertically align items to the end.

t1 flex-center-end

.t1.flex-center-end { justify-content: center; align-items: flex-end; }

Define a flex container, horizontally center, vertically align items to the baseline.

t1 flex-center-baseline

.t1.flex-center-baseline { justify-content: center; align-items: baseline; }

Define a flex container, horizontally center, vertically stretch items in it.

t1 flex-center-stretch

.t1.flex-center-stretch { justify-content: center; align-items: stretch; }

Define a flex container, horizontally and vertically center items in it, vertically align multiple rows to the start.

t1 flex-center-center-start

.t1.flex-center-center-start { justify-content: center; align-items: center; align-content: flex-start; }

Define a flex container, horizontally and vertically center items in it, vertically center multiple rows.

t1 flex-center-center-center

.t1.flex-center-center-center { justify-content: center; align-items: center; align-content: center; }

Define a flex container, horizontally and vertically center items in it, vertically align multiple rows to the end.

t1 flex-center-center-end

.t1.flex-center-center-end { justify-content: center; align-items: center; align-content: flex-end; }

Define a flex container, horizontally and vertically center items in it, vertically distribute space between multiple rows.

t1 flex-center-center-between

.t1.flex-center-center-between { justify-content: center; align-items: center; align-content: space-between; }

Define a flex container, horizontally and vertically center items in it, vertically distribute space around multiple rows.

t1 flex-center-center-around

.t1.flex-center-center-around { justify-content: center; align-items: center; align-content: space-around; }

Define a flex container, horizontally and vertically center items in it, vertically distribute space evenly around multiple rows.

t1 flex-center-center-evenly

.t1.flex-center-center-evenly { justify-content: center; align-items: center; align-content: space-evenly; }