您现在的位置是:自如初>Tailwind CSSTailwind CSS
三十五、Tailwind CSS基础学习笔记之 Tailwind CSS Align Self
温新
2022-10-08 22:12:26
【Tailwind CSS】
514人已围观
简介Tailwind CSS基础学习笔记之 Tailwind CSS Align Self
hi,我是温新,一名PHPer
此笔记基于 Tailwind CSS v3.1.8
align self
用于控制单个
flex 或网格项如何沿其容器的交叉轴定位的功能类。
Class | Properties |
---|---|
self-auto | align-self: auto; |
self-start | align-self: flex-start; |
self-end | align-self: flex-end; |
self-center | align-self: center; |
self-stretch | align-self: stretch; |
self-baseline | align-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)
相关文章
- 三十八、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