您现在的位置是:自如初>Tailwind CSSTailwind CSS
三十二、Tailwind CSS基础学习笔记之 Tailwind CSS Justify Items
温新
2022-10-08 22:09:10
【Tailwind CSS】
309人已围观
简介Tailwind CSS基础学习笔记之 Tailwind CSS Justify Items
此笔记基于 Tailwind CSS v3.1.8
justify items
用于控制网格项如何沿其内联轴对齐。
Class | Properties |
---|---|
justify-items-start | justify-items: start; |
justify-items-end | justify-items: end; |
justify-items-center | justify-items: center; |
justify-items-stretch | justify-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)
相关文章
- 三十八、Tailwind CSS基础学习笔记之 Tailwind CSS Place Self
- 三十七、Tailwind CSS基础学习笔记之 Tailwind CSS Place Items
- 三十六、Tailwind CSS基础学习笔记之 Tailwind CSS Place Content
- 三十五、Tailwind CSS基础学习笔记之 Tailwind CSS Align Self
- 三十四、Tailwind CSS基础学习笔记之 Tailwind CSS Align Content
- 三十三、Tailwind CSS基础学习笔记之 Tailwind CSS Justify Self
- 三十二、Tailwind CSS基础学习笔记之 Tailwind CSS Justify Items
- 三十一、Tailwind CSS基础学习笔记之 Tailwind CSS Justify Content
- 三十、Tailwind CSS基础学习笔记之 Tailwind CSS Grid Gap
- 二十九、Tailwind CSS基础学习笔记之 Tailwind CSS Grid Auto Rows