您现在的位置是:自如初>Tailwind CSSTailwind CSS
三十四、Tailwind CSS基础学习笔记之 Tailwind CSS Align Content
温新
2022-10-08 22:11:17
【Tailwind CSS】
363人已围观
简介Tailwind CSS基础学习笔记之 Tailwind CSS Align Content
hi,我是温新,一名PHPer
此笔记基于 Tailwind CSS v3.1.8
align content
用于改变 flex-wrap
的属性行为,它定义了多行 flex
和网格容器中行的位置。
Class | Properties |
---|---|
content-center | align-content: center; |
content-start | align-content: flex-start; |
content-end | align-content: flex-end; |
content-between | align-content: space-between; |
content-around | align-content: space-around; |
content-evenly | align-content: space-evenly; |
content-start
格式:<element></element>
说明:将容器中的行相对于交叉轴的起点
开始排列
content-center
格式:<element></element>
说明:将容器中的行相对于交叉轴的中心
开始排列
content-end
格式:<element></element>
说明:将容器中的行相对于交叉轴的终点
开始排列
content-between
格式:<element></element>
说明:用于分配容器中的行,使每行之间的距离相等
content-around
格式:<element></element>
说明:用于在一个容器中分配行,使每行周围有相等的空间
content-evenly
格式:<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 Align Content</h1>
<!-- 设置元素在交叉轴起点对齐 -->
<div class="bg-blue-500 border-solid border-4 border-green-900 flex flex-wrap content-start ml-24 w-2/3 h-48">
<div class="bg-green-900 w-24 h-12">content-start</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
<div class="bg-green-300 w-24 h-12">7</div>
</div>
<!-- 设置元素在交叉轴中心位置对齐 -->
<div class="bg-pink-500 border-solid border-4 border-green-900 flex flex-wrap content-center ml-24 w-2/3 h-48">
<div class="bg-green-900 w-24 h-12">content-center</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
<div class="bg-green-300 w-24 h-12">7</div>
</div>
<!-- 设置元素在交叉轴终点对齐 -->
<div class="bg-orange-500 border-solid border-4 border-green-900 flex flex-wrap content-end ml-24 w-2/3 h-48">
<div class="bg-green-900 w-24 h-12">content-end</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
<div class="bg-green-300 w-24 h-12">7</div>
</div>
<!-- 用于分配容器中的行,使每行之间的距离相等。调整浏览器宽度看到效果 -->
<div class="bg-orange-200 border-solid border-4 border-green-900 flex flex-wrap content-between ml-24 w-2/3 h-48">
<div class="bg-green-900 w-24 h-12">content-between</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
<div class="bg-green-300 w-24 h-12">7</div>
</div>
<!-- 用于在一个容器中分配行,使每行周围有相等的空间 -->
<div class="bg-yellow-200 border-solid border-4 border-green-900 flex flex-wrap content-around ml-24 w-2/3 h-48">
<div class="bg-green-900 w-24 h-12">content-around</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
<div class="bg-green-300 w-24 h-12">7</div>
</div>
<!-- 分配容器中的行,使每个元素周围距离相等,但需要注意使用到 content-around -->
<div class="bg-yellow-600 border-solid border-4 border-green-900 flex flex-wrap content-evenly ml-24 w-2/3 h-48">
<div class="bg-green-900 w-24 h-12">content-evenly</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
<div class="bg-green-300 w-24 h-12">7</div>
</div>
</body>
</html>
很赞哦!(5)
相关文章
- 三十八、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