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

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

温新 2022-10-08 22:09:10 Tailwind CSS 309人已围观

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

hi,我是温新,一名PHPer


此笔记基于 Tailwind CSS v3.1.8

justify items 用于控制网格项如何沿其内联轴对齐。

ClassProperties
justify-items-startjustify-items: start;
justify-items-endjustify-items: end;
justify-items-centerjustify-items: center;
justify-items-stretchjustify-items: stretch;

justify-items-start

格式:<element></element>

说明:用于设置网格元素沿内联轴的左侧起点排列。

justify-items-end

格式:<element></element>

说明:用于设置网格元素沿内联轴的右侧起点排列。

justify-items-center

格式:<element></element>

说明:用于设置元素沿着内联轴对齐于网格。

justify-items-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 Items</h1>

 <div class="grid grid-cols-2 justify-items-start">
   <div class="bg-green-700 rounded-lg m-4 w-24 h-12">1</div>
   <div class="bg-green-700 rounded-lg m-4 w-24 h-12">2</div>
   <div class="bg-green-700 rounded-lg m-4 w-24 h-12">3</div>
   <div class="bg-green-700 rounded-lg m-4 w-24 h-12">4</div>
   <div class="bg-green-700 rounded-lg m-4 w-24 h-12">5</div>
   <div class="bg-green-700 rounded-lg m-4 w-24 h-12">6</div>
 </div>

 <div class="grid grid-cols-2 justify-items-end">
   <div class="bg-pink-700 rounded-lg m-4 w-24 h-12">1</div>
   <div class="bg-pink-700 rounded-lg m-4 w-24 h-12">2</div>
   <div class="bg-pink-700 rounded-lg m-4 w-24 h-12">3</div>
   <div class="bg-pink-700 rounded-lg m-4 w-24 h-12">4</div>
   <div class="bg-pink-700 rounded-lg m-4 w-24 h-12">5</div>
   <div class="bg-pink-700 rounded-lg m-4 w-24 h-12">6</div>
 </div>

 <div class="grid grid-cols-2 justify-items-center">
   <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">1</div>
   <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">2</div>
   <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">3</div>
   <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">4</div>
   <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">5</div>
   <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">6</div>
 </div>

 <div class="grid grid-cols-2 justify-items-stretch">
   <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">1</div>
   <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">2</div>
   <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">3</div>
   <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">4</div>
   <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">5</div>
   <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">6</div>
 </div>
</body>
</html>


很赞哦!(0)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:ziruchu@qq.com

站点信息