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

三十六、Tailwind CSS基础学习笔记之 Tailwind CSS Place Content

温新 2022-10-08 22:13:44 【Tailwind CSS】 380人已围观

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

hi，我是温新，一名PHPer

此笔记基于 Tailwind CSS v3.1.8

place content 用于设置元素在容器中垂直和水平的对齐方式。

Class	Properties
place-content-center	place-content: center;
place-content-start	place-content: start;
place-content-end	place-content: end;
place-content-between	place-content: space-between;
place-content-around	place-content: space-around;
place-content-evenly	place-content: space-evenly;
place-content-stretch	place-content: stretch;

place-content-start

格式：<element></element>

说明：设置元素沿着容器的左侧开始进行垂直方向对齐。

place-content-start

格式：<element></element>

说明：设置元素在容器中心位置进行垂直对齐。

place-content-end

格式：<element></element>

说明：设置元素垂直于容器底部进行对齐。

place-content-between

格式：<element></element>

说明：设置元素垂直于顶部和底部进行对齐。

place-content-around

格式：<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 Place Content</h1>

    <!--  place-content-start  -->
    <!-- 元素在容器中，沿着容器左侧开始进行垂直于顶部对齐   -->
    <div class="w-2/3 h-48 bg-pink-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-start">
        <div class="w-3/4 h-12 bg-green-100">1</div>
        <div class="w-3/4 h-12 bg-green-200">2</div>
        <div class="w-3/4 h-12 bg-green-300">3</div>
        <div class="w-3/4 h-12 bg-green-400">4</div>
        <div class="w-3/4 h-12 bg-green-500">5</div>
        <div class="w-3/4 h-12 bg-green-600">6</div>
    </div>

    <!--  place-content-center  -->
    <!-- 元素在容器中，沿着容器左侧开始进行垂直于中心对齐   -->
    <div class="w-2/3 h-48 bg-blue-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-center mt-5">
        <div class="w-3/4 h-12 bg-green-100">1</div>
        <div class="w-3/4 h-12 bg-green-200">2</div>
        <div class="w-3/4 h-12 bg-green-300">3</div>
        <div class="w-3/4 h-12 bg-green-400">4</div>
        <div class="w-3/4 h-12 bg-green-500">5</div>
        <div class="w-3/4 h-12 bg-green-600">6</div>
    </div>

    <!--  place-content-end -->
    <!-- 元素在容器中，沿着容器左侧开始进行垂直于底部对齐   -->
    <div class="w-2/3 h-48 bg-gray-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-end mt-5">
        <div class="w-3/4 h-12 bg-green-100">1</div>
        <div class="w-3/4 h-12 bg-green-200">2</div>
        <div class="w-3/4 h-12 bg-green-300">3</div>
        <div class="w-3/4 h-12 bg-green-400">4</div>
        <div class="w-3/4 h-12 bg-green-500">5</div>
        <div class="w-3/4 h-12 bg-green-600">6</div>
    </div>

    <!--  place-content-center  -->
    <!-- 元素在容器中，沿着容器左侧开始进行垂直于容器两端对齐   -->
    <div class="w-2/3 h-48 bg-yellow-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-between mt-5">
        <div class="w-3/4 h-12 bg-green-100">1</div>
        <div class="w-3/4 h-12 bg-green-200">2</div>
        <div class="w-3/4 h-12 bg-green-300">3</div>
        <div class="w-3/4 h-12 bg-green-400">4</div>
        <div class="w-3/4 h-12 bg-green-500">5</div>
        <div class="w-3/4 h-12 bg-green-600">6</div>
    </div>

    <!--  place-content-center  -->
    <!-- 元素在容器中，沿着容器左侧开始进行垂直于容器两端且元素间距离相等   -->
    <div class="w-2/3 h-48 bg-orange-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-around mt-5">
        <div class="w-3/4 h-12 bg-green-100">1</div>
        <div class="w-3/4 h-12 bg-green-200">2</div>
        <div class="w-3/4 h-12 bg-green-300">3</div>
        <div class="w-3/4 h-12 bg-green-400">4</div>
        <div class="w-3/4 h-12 bg-green-500">5</div>
        <div class="w-3/4 h-12 bg-green-600">6</div>
    </div>

    <div class="w-2/3 h-48 bg-purple-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-evenly mt-5">
        <div class="w-3/4 h-12 bg-green-100">1</div>
        <div class="w-3/4 h-12 bg-green-200">2</div>
        <div class="w-3/4 h-12 bg-green-300">3</div>
        <div class="w-3/4 h-12 bg-green-400">4</div>
        <div class="w-3/4 h-12 bg-green-500">5</div>
        <div class="w-3/4 h-12 bg-green-600">6</div>
    </div>

    <div class="w-2/3 h-48 bg-red-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-stretch  mt-5">
        <div class="w-3/4 h-12 bg-green-100">1</div>
        <div class="w-3/4 h-12 bg-green-200">2</div>
        <div class="w-3/4 h-12 bg-green-300">3</div>
        <div class="w-3/4 h-12 bg-green-400">4</div>
        <div class="w-3/4 h-12 bg-green-500">5</div>
        <div class="w-3/4 h-12 bg-green-600">6</div>
    </div>
</body>
</html>