您现在的位置是:自如初>Tailwind CSSTailwind CSS
三十六、Tailwind CSS基础学习笔记之 Tailwind CSS Place Content
温新
2022-10-08 22:13:44
【Tailwind CSS】
380人已围观
简介Tailwind CSS基础学习笔记之 Tailwind CSS Place Content
hi,我是温新,一名PHPer
此笔记基于 Tailwind CSS v3.1.8
place content
用于设置元素
在容器中垂直和水平的对齐方式。
Class | Properties |
---|---|
place-content-center | place-content: center; |
place-content-start | place-content: start; |
place-content-end | place-content: end; |
place-content-between | place-content: space-between; |
place-content-around | place-content: space-around; |
place-content-evenly | place-content: space-evenly; |
place-content-stretch | place-content: stretch; |
place-content-start
格式:<element></element>
说明:设置元素沿着容器的左侧开始进行垂直方向对齐。
place-content-start
格式:<element></element>
说明:设置元素在容器中心
位置进行垂直对齐。
place-content-end
格式:<element></element>
说明:设置元素垂直于容器底部
进行对齐。
place-content-between
格式:<element></element>
说明:设置元素垂直于顶部和底部进行对齐。
place-content-around
格式:<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 Place Content</h1>
<!-- place-content-start -->
<!-- 元素在容器中,沿着容器左侧开始进行垂直于顶部对齐 -->
<div class="w-2/3 h-48 bg-pink-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-start">
<div class="w-3/4 h-12 bg-green-100">1</div>
<div class="w-3/4 h-12 bg-green-200">2</div>
<div class="w-3/4 h-12 bg-green-300">3</div>
<div class="w-3/4 h-12 bg-green-400">4</div>
<div class="w-3/4 h-12 bg-green-500">5</div>
<div class="w-3/4 h-12 bg-green-600">6</div>
</div>
<!-- place-content-center -->
<!-- 元素在容器中,沿着容器左侧开始进行垂直于中心对齐 -->
<div class="w-2/3 h-48 bg-blue-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-center mt-5">
<div class="w-3/4 h-12 bg-green-100">1</div>
<div class="w-3/4 h-12 bg-green-200">2</div>
<div class="w-3/4 h-12 bg-green-300">3</div>
<div class="w-3/4 h-12 bg-green-400">4</div>
<div class="w-3/4 h-12 bg-green-500">5</div>
<div class="w-3/4 h-12 bg-green-600">6</div>
</div>
<!-- place-content-end -->
<!-- 元素在容器中,沿着容器左侧开始进行垂直于底部对齐 -->
<div class="w-2/3 h-48 bg-gray-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-end mt-5">
<div class="w-3/4 h-12 bg-green-100">1</div>
<div class="w-3/4 h-12 bg-green-200">2</div>
<div class="w-3/4 h-12 bg-green-300">3</div>
<div class="w-3/4 h-12 bg-green-400">4</div>
<div class="w-3/4 h-12 bg-green-500">5</div>
<div class="w-3/4 h-12 bg-green-600">6</div>
</div>
<!-- place-content-center -->
<!-- 元素在容器中,沿着容器左侧开始进行垂直于容器两端对齐 -->
<div class="w-2/3 h-48 bg-yellow-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-between mt-5">
<div class="w-3/4 h-12 bg-green-100">1</div>
<div class="w-3/4 h-12 bg-green-200">2</div>
<div class="w-3/4 h-12 bg-green-300">3</div>
<div class="w-3/4 h-12 bg-green-400">4</div>
<div class="w-3/4 h-12 bg-green-500">5</div>
<div class="w-3/4 h-12 bg-green-600">6</div>
</div>
<!-- place-content-center -->
<!-- 元素在容器中,沿着容器左侧开始进行垂直于容器两端且元素间距离相等 -->
<div class="w-2/3 h-48 bg-orange-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-around mt-5">
<div class="w-3/4 h-12 bg-green-100">1</div>
<div class="w-3/4 h-12 bg-green-200">2</div>
<div class="w-3/4 h-12 bg-green-300">3</div>
<div class="w-3/4 h-12 bg-green-400">4</div>
<div class="w-3/4 h-12 bg-green-500">5</div>
<div class="w-3/4 h-12 bg-green-600">6</div>
</div>
<div class="w-2/3 h-48 bg-purple-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-evenly mt-5">
<div class="w-3/4 h-12 bg-green-100">1</div>
<div class="w-3/4 h-12 bg-green-200">2</div>
<div class="w-3/4 h-12 bg-green-300">3</div>
<div class="w-3/4 h-12 bg-green-400">4</div>
<div class="w-3/4 h-12 bg-green-500">5</div>
<div class="w-3/4 h-12 bg-green-600">6</div>
</div>
<div class="w-2/3 h-48 bg-red-500 grid grid-cols-3 gap-2 border-solid border-4 border-green-900 ml-24 place-content-stretch mt-5">
<div class="w-3/4 h-12 bg-green-100">1</div>
<div class="w-3/4 h-12 bg-green-200">2</div>
<div class="w-3/4 h-12 bg-green-300">3</div>
<div class="w-3/4 h-12 bg-green-400">4</div>
<div class="w-3/4 h-12 bg-green-500">5</div>
<div class="w-3/4 h-12 bg-green-600">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