Box level alignment

How to align boxes within containers.

On this page

These examples shows different ways to align boxes within their containers in the various CSS box layout models: block layout, table layout, and flex layout.

NOTE: Grid is not currently supported

align-content

Aligns the contents of the box as a whole (as the alignment subject) within the box itself along the block/column/cross axis of the box. Following example shows Ac(sb), align-content: Space between

<div class="D(f) Ac(sb)">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
1
2
3
4
5
6

align-items

This property specifies the default align-self for all of the child boxes (including anonymous boxes) participating in this box’s formatting context.. Following example shows Ai(c), align-items: center

<div class="D(f) Ai(c)">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
1
2
3
4
5
6

align-self

Aligns the box (as the alignment subject) within its containing block (as the alignment container) along the block/column/cross axis of the alignment container: the box’s outer edges are aligned within its alignment container as described by its alignment value. Following example shows As(fs), align-self: flex-start

<div class="D(f) Ai(c)">
    <div class="As(fs) D(f) Ai(c)">1</div>
    <div class="D(f) Ai(c)">2</div>
    <div class="D(f) Ai(c)">3</div>
    <div class="D(f) Ai(c)">4</div>
    <div class="D(f) Ai(c)">5</div>
    <div class="D(f) Ai(c)">6</div>
</div>
1
2
3
4
5
6

justify-content

Aligns the contents of the box as a whole (as the alignment subject) within the box itself (as the alignment container) along the inline/row/main axis of the box. Following example shows Jc(se), justify-content: space-evenly

<div class="D(f) Jc(se)">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
1
2
3
4
5
6