Align Content

Align Content start

Class: .content-start

<div class="flex flex-wrap content-start bg-gray-light h-l10">
    <div class="white bg-blue p-1 border-blue-light w-20pc">block 1</div>
    ...
    <div class="white bg-blue p-1 border-blue-light w-20pc">block 8</div>
</div>
block 1
block 2
block 3
block 4
block 5
block 6
block 7
block 8

Align Content end

Class: .content-end

<div class="flex flex-wrap content-end bg-gray-light h-l10">
    <div class="white bg-blue p-1 border-blue-light w-20pc">block 1</div>
    ...
    <div class="white bg-blue p-1 border-blue-light w-20pc">block 8</div>
</div>
block 1
block 2
block 3
block 4
block 5
block 6
block 7
block 8

Align Content center

Class: .content-center

<div class="flex flex-wrap content-center bg-gray-light h-l10">
    <div class="white bg-blue p-1 border-blue-light w-20pc">block 1</div>
    ...
    <div class="white bg-blue p-1 border-blue-light w-20pc">block 8</div>
</div>
block 1
block 2
block 3
block 4
block 5
block 6
block 7
block 8

Align Content stretch

Class: .content-stretch

<div class="flex flex-wrap content-stretch bg-gray-light h-l10">
    <div class="white bg-blue p-1 border-blue-light w-20pc">block 1</div>
    ...
    <div class="white bg-blue p-1 border-blue-light w-20pc">block 8</div>
</div>
block 1
block 2
block 3
block 4
block 5
block 6
block 7
block 8

Align Content between

Class: .content-between

<div class="flex flex-wrap content-between bg-gray-light h-l10">
    <div class="white bg-blue p-1 border-blue-light w-20pc">block 1</div>
    ...
    <div class="white bg-blue p-1 border-blue-light w-20pc">block 8</div>
</div>
block 1
block 2
block 3
block 4
block 5
block 6
block 7
block 8

Align Content around

Class: .content-around

<div class="flex flex-wrap content-around bg-gray-light h-l10">
    <div class="white bg-blue p-1 border-blue-light w-20pc">block 1</div>
    ...
    <div class="white bg-blue p-1 border-blue-light w-20pc">block 8</div>
</div>
block 1
block 2
block 3
block 4
block 5
block 6
block 7
block 8
Responsive variants
.sm-content-start
.md-content-start
.lg-content-start
.xl-content-start
.sm-content-end
.md-content-end
.lg-content-end
.xl-content-end
.sm-content-center
.md-content-center
.lg-content-center
.xl-content-center
.sm-content-stretch
.md-content-stretch
.lg-content-stretch
.xl-content-stretch
.sm-content-between
.md-content-between
.lg-content-between
.xl-content-between
.sm-content-around
.md-content-around
.lg-content-around
.xl-content-around