您现在的位置是:自如初>Tailwind CSSTailwind CSS
三十三、Tailwind CSS基础学习笔记之 Tailwind CSS Justify Self
温新
2022-10-08 22:10:03
【Tailwind CSS】
382人已围观
简介Tailwind CSS基础学习笔记之 Tailwind CSS Justify Self
hi,我是温新,一名PHPer
此笔记基于 Tailwind CSS v3.1.8
justify self
设置 单个
网格元素如何沿着内联轴对齐。
Class | Properties |
---|---|
justify-self-auto | justify-self: auto; |
justify-self-start | justify-self: start; |
justify-self-end | justify-self: end; |
justify-self-center | justify-self: center; |
justify-self-stretch | justify-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)
相关文章
- 三十八、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