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

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

温新 2022-10-08 22:10:03 Tailwind CSS 274人已围观

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

hi,我是温新,一名PHPer


此笔记基于 Tailwind CSS v3.1.8

justify self 设置 单个 网格元素如何沿着内联轴对齐。

ClassProperties
justify-self-autojustify-self: auto;
justify-self-startjustify-self: start;
justify-self-endjustify-self: end;
justify-self-centerjustify-self: center;
justify-self-stretchjustify-self: stretch;

justify-self-auto

格式:<element></element>

说明:根据justify-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 Justify Self</h1>

   <div class="grid grid-cols-2 justify-items-stretch">
       <div class="bg-pink-500 rounded-lg h-12 m-4 justify-self-auto">1</div>
       <div class="bg-pink-500 rounded-lg h-12 m-4">2</div>
       <div class="bg-pink-500 rounded-lg h-12 m-4">3</div>
       <div class="bg-pink-500 rounded-lg h-12 m-4">4</div>
   </div>
</body>
</html>

justify-self-start

格式:<element></element>

说明:设置网格元素中的某个元素沿着内联轴起点对齐。

justify-self-center

格式:<element></element>

说明:设置网格元素中的某个元素沿着内联轴中心对齐。

justify-self-end

格式:<element></element>

说明:设置网格元素中的某个元素沿着内联轴终点对齐。

justify-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 Justify Self</h1>

   <div class="grid grid-cols-2 justify-items-stretch">
       <div class="bg-pink-500 rounded-lg h-12 m-4 justify-self-start">1</div>
       <div class="bg-pink-500 rounded-lg h-12 m-4">2</div>
       <div class="bg-pink-500 rounded-lg h-12 m-4">3</div>
       <div class="bg-pink-500 rounded-lg h-12 m-4">4</div>
   </div>

   <div class="grid grid-cols-2 justify-items-stretch">
       <div class="bg-pink-900 rounded-lg h-12 m-4 justify-self-center">1</div>
       <div class="bg-pink-900 rounded-lg h-12 m-4">2</div>
       <div class="bg-pink-900 rounded-lg h-12 m-4">3</div>
       <div class="bg-pink-900 rounded-lg h-12 m-4">4</div>
   </div>

   <div class="grid grid-cols-2 justify-items-stretch">
       <div class="bg-pink-200 rounded-lg h-12 m-4 justify-self-end">1</div>
       <div class="bg-pink-200 rounded-lg h-12 m-4">2</div>
       <div class="bg-pink-200 rounded-lg h-12 m-4">3</div>
       <div class="bg-pink-200 rounded-lg h-12 m-4">4</div>
   </div>

   <div class="grid grid-cols-2 justify-items-stretch">
       <div class="bg-pink-400 rounded-lg h-12 m-4 justify-self-stretch">1</div>
       <div class="bg-pink-400 rounded-lg h-12 m-4">2</div>
       <div class="bg-pink-400 rounded-lg h-12 m-4">3</div>
       <div class="bg-pink-400 rounded-lg h-12 m-4">4</div>
   </div>
</body>
</html>


很赞哦!(0)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:ziruchu@qq.com

站点信息