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

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

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

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

hi,我是温新,一名PHPer


此笔记基于 Tailwind CSS v3.1.8

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

ClassProperties
self-autoalign-self: auto;
self-startalign-self: flex-start;
self-endalign-self: flex-end;
self-centeralign-self: center;
self-stretchalign-self: stretch;
self-baselinealign-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>



很赞哦!(2)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:ziruchu@qq.com

站点信息