您现在的位置是：自如初>Tailwind CSSTailwind CSS

三十四、Tailwind CSS基础学习笔记之 Tailwind CSS Align Content

温新 2022-10-08 22:11:17 【Tailwind CSS】 363人已围观

简介Tailwind CSS基础学习笔记之 Tailwind CSS Align Content

hi，我是温新，一名PHPer

此笔记基于 Tailwind CSS v3.1.8

align content 用于改变 flex-wrap 的属性行为，它定义了多行 flex 和网格容器中行的位置。

Class	Properties
content-center	align-content: center;
content-start	align-content: flex-start;
content-end	align-content: flex-end;
content-between	align-content: space-between;
content-around	align-content: space-around;
content-evenly	align-content: space-evenly;

content-start

格式：<element></element>

说明：将容器中的行相对于交叉轴的起点开始排列

content-center

格式：<element></element>

说明：将容器中的行相对于交叉轴的中心开始排列

content-end

格式：<element></element>

说明：将容器中的行相对于交叉轴的终点开始排列

content-between

格式：<element></element>

说明：用于分配容器中的行，使每行之间的距离相等

content-around

格式：<element></element>

说明：用于在一个容器中分配行，使每行周围有相等的空间

content-evenly

格式：<element></element>

说明：用于在一个容器中分配行，使每行周围有相等的空间

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link href="../../dist/mystyle.css" rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-green-500 text-5xl font-bold">Tailwind CSS Align Content</h1>

    <!-- 设置元素在交叉轴起点对齐 -->
    <div class="bg-blue-500 border-solid border-4 border-green-900 flex flex-wrap content-start ml-24 w-2/3 h-48">
        <div class="bg-green-900 w-24 h-12">content-start</div>
        <div class="bg-green-800 w-24 h-12">2</div>
        <div class="bg-green-700 w-24 h-12">3</div>
        <div class="bg-green-600 w-24 h-12">4</div>
        <div class="bg-green-500 w-24 h-12">5</div>
        <div class="bg-green-400 w-24 h-12">6</div>
        <div class="bg-green-300 w-24 h-12">7</div>
    </div>

    <!-- 设置元素在交叉轴中心位置对齐 -->
    <div class="bg-pink-500 border-solid border-4 border-green-900 flex flex-wrap content-center ml-24 w-2/3 h-48">
        <div class="bg-green-900 w-24 h-12">content-center</div>
        <div class="bg-green-800 w-24 h-12">2</div>
        <div class="bg-green-700 w-24 h-12">3</div>
        <div class="bg-green-600 w-24 h-12">4</div>
        <div class="bg-green-500 w-24 h-12">5</div>
        <div class="bg-green-400 w-24 h-12">6</div>
        <div class="bg-green-300 w-24 h-12">7</div>
    </div>

    <!-- 设置元素在交叉轴终点对齐 -->
    <div class="bg-orange-500 border-solid border-4 border-green-900 flex flex-wrap content-end ml-24 w-2/3 h-48">
        <div class="bg-green-900 w-24 h-12">content-end</div>
        <div class="bg-green-800 w-24 h-12">2</div>
        <div class="bg-green-700 w-24 h-12">3</div>
        <div class="bg-green-600 w-24 h-12">4</div>
        <div class="bg-green-500 w-24 h-12">5</div>
        <div class="bg-green-400 w-24 h-12">6</div>
        <div class="bg-green-300 w-24 h-12">7</div>
    </div>

    <!-- 用于分配容器中的行，使每行之间的距离相等。调整浏览器宽度看到效果 -->
    <div class="bg-orange-200 border-solid border-4 border-green-900 flex flex-wrap content-between ml-24 w-2/3 h-48">
        <div class="bg-green-900 w-24 h-12">content-between</div>
        <div class="bg-green-800 w-24 h-12">2</div>
        <div class="bg-green-700 w-24 h-12">3</div>
        <div class="bg-green-600 w-24 h-12">4</div>
        <div class="bg-green-500 w-24 h-12">5</div>
        <div class="bg-green-400 w-24 h-12">6</div>
        <div class="bg-green-300 w-24 h-12">7</div>
    </div>

    <!-- 用于在一个容器中分配行，使每行周围有相等的空间 -->
    <div class="bg-yellow-200 border-solid border-4 border-green-900 flex flex-wrap content-around ml-24 w-2/3 h-48">
        <div class="bg-green-900 w-24 h-12">content-around</div>
        <div class="bg-green-800 w-24 h-12">2</div>
        <div class="bg-green-700 w-24 h-12">3</div>
        <div class="bg-green-600 w-24 h-12">4</div>
        <div class="bg-green-500 w-24 h-12">5</div>
        <div class="bg-green-400 w-24 h-12">6</div>
        <div class="bg-green-300 w-24 h-12">7</div>
    </div>

    <!-- 分配容器中的行，使每个元素周围距离相等，但需要注意使用到 content-around  -->
    <div class="bg-yellow-600 border-solid border-4 border-green-900 flex flex-wrap content-evenly ml-24 w-2/3 h-48">
        <div class="bg-green-900 w-24 h-12">content-evenly</div>
        <div class="bg-green-800 w-24 h-12">2</div>
        <div class="bg-green-700 w-24 h-12">3</div>
        <div class="bg-green-600 w-24 h-12">4</div>
        <div class="bg-green-500 w-24 h-12">5</div>
        <div class="bg-green-400 w-24 h-12">6</div>
        <div class="bg-green-300 w-24 h-12">7</div>
    </div>

</body>
</html>