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
start | center | end | between | around | evenly
aliItems
start | center | end | baseline | stretch
aliCont
start | center | end | between | around | evenly

Justify content

<div class="t1 flex flex-start-stretch w-320 h-128 bg-c-white shadow-4"> <div class="t1 w-16 min-h-24 bg-c-blue mr-8"></div> <div class="t1 w-16 min-h-48 bg-c-blue mr-8"></div> <div class="t1 w-16 min-h-36 bg-c-blue"></div> </div>

Align items

<div class="t1 flex flex-center w-320 h-128 bg-c-white shadow-4"> <div class="t1 w-16 min-h-24 bg-c-blue mr-8"></div> <div class="t1 w-16 min-h-48 bg-c-blue mr-8"></div> <div class="t1 w-16 min-h-36 bg-c-blue"></div> </div>

Align content

<div class="t1 flex flex-wrap flex-start-start-start w-320 h-192 p-4 bg-c-white shadow-4"> <div class="t1 w-148 min-h-48 bg-c-blue m-4"></div> <div class="t1 w-148 min-h-48 bg-c-red m-4"></div> <div class="t1 w-148 min-h-48 bg-c-purple m-4"></div> </div>

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; }