Align Content

    Start

    Use to pack rows in a container against the start of the cross axis:

    Use content-center to pack rows in a container in the center of the cross axis:

    Align Content - 图2

    1. <div class="flex content-center flex-wrap bg-gray-200 h-48">
    2. <div class="w-1/3 p-2">
    3. <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
    4. </div>
    5. <div class="w-1/3 p-2">
    6. <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
    7. </div>
    8. <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
    9. </div>
    10. <div class="w-1/3 p-2">
    11. <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
    12. </div>
    13. <div class="w-1/3 p-2">
    14. <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
    15. </div>
    16. </div>

    End

    Use to pack rows in a container against the end of the cross axis:

    Use content-between to distribute rows in a container such that there is an equal amount of space between each line:

    Align Content - 图4

    1. <div class="flex content-between flex-wrap bg-gray-200 h-48">
    2. <div class="w-1/3 p-2">
    3. <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
    4. </div>
    5. <div class="w-1/3 p-2">
    6. <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
    7. </div>
    8. <div class="w-1/3 p-2">
    9. </div>
    10. <div class="w-1/3 p-2">
    11. <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
    12. </div>
    13. <div class="w-1/3 p-2">
    14. <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
    15. </div>
    16. </div>

    Space around

    Use to distribute rows in a container such that there is an equal amount of space around each line:

    For more information about Tailwind’s responsive design features, check out the documentation.

    Align Content - 图6

    all

    sm

    Align Content - 图8

    md

    lg

    Align Content - 图10

    1. <div class="content-start sm:content-end md:content-center lg:content-between xl:content-around ...">
    2. <!-- ... -->
    3. </div>

    1

    2

    3

    4

    5

    Customizing

    By default, only responsive variants are generated for align-content utilities.

    You can control which variants are generated for the align-content utilities by modifying the alignContent property in the variants section of your tailwind.config.js file.

    For example, this config will also generate hover and focus variants:

    Disabling

    If you don’t plan to use the align-content utilities in your project, you can disable them entirely by setting the alignContent property to false in the corePlugins section of your config file:

    1. // tailwind.config.js
    2. module.exports = {
    3. corePlugins: {
    4. // ...
    5. + alignContent: false,
    6. }

    ← Justify Self