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

三十八、Tailwind CSS基础学习笔记之 Tailwind CSS Place Self

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

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

hi，我是温新，一名PHPer

此笔记基于 Tailwind CSS v3.1.8

place self 用于设置单个元素在容器中的垂直方向位置。

Class	Properties
place-self-auto	place-self: auto;
place-self-start	place-self: start;
place-self-end	place-self: end;
place-self-center	place-self: center;
place-self-stretch	place-self: stretch;

place-self-auto

格式：<element></element>

说明：根据容器的 place-items 属性值来对齐一个元素。

place-self-start

格式：<element></element>

说明：使用该类将一个元素对齐于两个轴的起点。

place-self-center

格式：<element></element>

说明：使用该类将一个元素对齐于两个轴的中心。

place-self-end

格式：<element></element>

说明：使用该类将一个元素对齐于两个轴的终点。

place-self-stretch

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

    <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">
        <div class="w-3/4  bg-green-100 place-self-auto">1</div>
        <div class="w-3/4  bg-green-200">2</div>
        <div class="w-3/4  bg-green-300">3</div>
        <div class="w-3/4  bg-green-400">4</div>
        <div class="w-3/4  bg-green-500">5</div>
        <div class="w-3/4  bg-green-600">6</div>
    </div>

    <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 mt-5">
        <div class="w-3/4  bg-green-100 place-self-start">1</div>
        <div class="w-3/4  bg-green-200">2</div>
        <div class="w-3/4  bg-green-300">3</div>
        <div class="w-3/4  bg-green-400">4</div>
        <div class="w-3/4  bg-green-500">5</div>
        <div class="w-3/4  bg-green-600">6</div>
    </div>

    <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 mt-5">
        <div class="w-3/4  bg-green-100">1</div>
        <div class="w-3/4  bg-green-200 place-self-center">2</div>
        <div class="w-3/4  bg-green-300">3</div>
        <div class="w-3/4  bg-green-400">4</div>
        <div class="w-3/4  bg-green-500">5</div>
        <div class="w-3/4  bg-green-600">6</div>
    </div>

    <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 mt-5">
        <div class="w-3/4  bg-green-100 place-self-end">1</div>
        <div class="w-3/4  bg-green-200">2</div>
        <div class="w-3/4  bg-green-300">3</div>
        <div class="w-3/4  bg-green-400">4</div>
        <div class="w-3/4  bg-green-500">5</div>
        <div class="w-3/4  bg-green-600">6</div>
    </div>

    <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 mt-5">
        <div class="w-3/4  bg-green-100 place-self-stretch">1</div>
        <div class="w-3/4  bg-green-200">2</div>
        <div class="w-3/4  bg-green-300">3</div>
        <div class="w-3/4  bg-green-400">4</div>
        <div class="w-3/4  bg-green-500">5</div>
        <div class="w-3/4  bg-green-600">6</div>
    </div>
</body>
</html>