Atomizer

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. There is a separate guide for CSS Grid.

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.

The 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-items for all of the child boxes (including anonymous boxes) participating in this box’s formatting context.

The 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).

The 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.

The 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

justify-items

This property specifies the default justify-items for all of the child boxes (including anonymous boxes) participating in this box’s formatting context.

The following example shows Ji(e) -> justify-items: end.

<div class="D(g) Gtc(threeColEvenGrid) Ji(e)">
    <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

NOTE: justify-items only works in grid mode.

justify-self

Justifies the box (as the alignment subject) within its containing block (as the alignment container) along the inline/row/main axis of the alignment container (the box’s outer edges are aligned within its alignment container).

The following example shows Js(s) -> justify-self: start.

<div class="D(g) Gtc(threeColEvenGrid) Ji(e)">
    <div class="Js(s)">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
1
2
3
4
5
6

NOTE: justify-self only works in grid mode.