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

三十五、Tailwind CSS基础学习笔记之 Tailwind CSS Align Self

温新 2022-10-08 22:12:26 【Tailwind CSS】 514人已围观

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

hi，我是温新，一名PHPer

此笔记基于 Tailwind CSS v3.1.8

align self 用于控制单个 flex 或网格项如何沿其容器的交叉轴定位的功能类。

Class	Properties
self-auto	align-self: auto;
self-start	align-self: flex-start;
self-end	align-self: flex-end;
self-center	align-self: center;
self-stretch	align-self: stretch;
self-baseline	align-self: baseline;

self-auto

格式：<element></element>

说明：用于继承其父容器的 align-items 属性，若它没有父容器，则用于拉伸元素。

<!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 Self</h1>

    <div class="bg-pink-500 border-4 border-solid ml-32 w-2/3 h-48 p-2 flex items-stretch justify-around">
        <div class="bg-green-500 rounded-lg w-32">1</div>
        <div class="bg-green-500 rounded-lg w-32 self-auto">2</div>
        <div class="bg-green-500 rounded-lg w-32">3</div>
    </div>
</body>
</html>

self-start

格式：<element></element>

说明：用于将一个元素对齐到容器交叉轴起点，无视容器的 align-items 值。

self-center

格式：<element></element>

说明：将一个元素对齐到容器交叉轴的中心位置，无视容器的 align-items 值。

self-end

格式：<element></element>

说明：用于将一个元素对齐到容器交叉轴终点，无视容器的 align-items 值。

self-stretch

格式：<element></element>

说明：拉伸一个元素用于填充容器的横轴，无视容器的 align-items 值。

<!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 Self</h1>

    <div class="bg-pink-200 border-4 border-solid ml-32 w-2/3 h-48 p-2 flex items-stretch justify-around">
        <div class="bg-green-500 rounded-lg w-32">1</div>
        <div class="bg-green-500 rounded-lg w-32 self-start">2</div>
        <div class="bg-green-500 rounded-lg w-32">3</div>
    </div>

    <div class="bg-pink-300 border-4 border-solid ml-32 w-2/3 h-48 p-2 flex items-stretch justify-around">
        <div class="bg-green-500 rounded-lg w-32">1</div>
        <div class="bg-green-500 rounded-lg w-32 self-center">2</div>
        <div class="bg-green-500 rounded-lg w-32">3</div>
    </div>

    <div class="bg-pink-400 border-4 border-solid ml-32 w-2/3 h-48 p-2 flex items-stretch justify-around">
        <div class="bg-green-500 rounded-lg w-32">1</div>
        <div class="bg-green-500 rounded-lg w-32 self-end">2</div>
        <div class="bg-green-500 rounded-lg w-32">3</div>
    </div>

    <div class="bg-pink-400 border-4 border-solid ml-32 w-2/3 h-48 p-2 flex items-stretch justify-around">
        <div class="bg-green-500 rounded-lg w-32">1</div>
        <div class="bg-green-500 rounded-lg w-32 self-stretch">2</div>
        <div class="bg-green-500 rounded-lg w-32">3</div>
    </div>

</body>
</html>