您现在的位置是:自如初>Tailwind CSSTailwind CSS
三十一、Tailwind CSS基础学习笔记之 Tailwind CSS Justify Content
温新
2022-10-08 22:08:14
【Tailwind CSS】
344人已围观
简介Tailwind CSS基础学习笔记之 Tailwind CSS Justify Content
hi,我是温新,一名PHPer
此笔记基于 Tailwind CSS v3.1.8
justify content
flex
和 grid
项目如何沿着容器的主轴定位的功能类。
Class | Properties |
---|---|
justify-start | justify-content: flex-start; |
justify-end | justify-content: flex-end; |
justify-center | justify-content: center; |
justify-between | justify-content: space-between; |
justify-around | justify-content: space-around; |
justify-evenly | justify-content: space-evenly; |
justify-start
格式:<element></element>
说明:设置元素沿着容器主轴的左侧起点布局。
justify-end
格式:<element></element>
说明:设置元素沿着容器主轴的右侧起点布局。
justify-center
格式:<element></element>
说明:设置元素沿着容器主轴的中心点布局。
justify-between
格式:<element></element>
说明:设置元素沿着容器主轴布局,且使每个元素之间的间距相等。
justify-around
格式:<element></element>
说明:设置元素沿着容器主轴布局,,且每个素之间左右两侧间距相等。
justify-evenly
格式:<element></element>
说明:设置元素沿着容器主轴布局,,使每个元素周围距离相等,与justify-around
不同的是项目之间有双倍距离。
<!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 Content</h1>
<!-- justify-start 用于控制元素沿着容器主轴的起点左侧开始布局 -->
<div class="flex justify-start flex-row bg-pink-500">
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">1</div>
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">2</div>
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">3</div>
</div>
<!-- justify-end 用于控制元素沿着容器主轴的起点左侧开始布局 -->
<div class="flex justify-end flex-row bg-pink-200">
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">1</div>
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">2</div>
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">3</div>
</div>
<!-- justify-end 用于控制元素沿着容器主轴的起点左侧开始布局 -->
<div class="flex justify-center flex-row bg-pink-900">
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">1</div>
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">2</div>
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">3</div>
</div>
<!-- justify-between 用于控制元素沿着容器主轴布局,且每个元素之间的间距相等 -->
<div class="flex justify-between flex-row bg-blue-200">
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">1</div>
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">2</div>
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">3</div>
</div>
<!-- justify-between 用于控制元素沿着容器主轴布局,且每素之间左右两侧间距相等 -->
<div class="flex justify-around flex-row bg-blue-500">
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">1</div>
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">2</div>
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">3</div>
</div>
<!-- justify-between 使每个元素周围距离相等,与`justify-around` 不同的是项目之间有双倍距离 -->
<div class="flex justify-evenly flex-row bg-blue-700">
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">1</div>
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">2</div>
<div class="bg-green-300 rounded-lg w-24 h-12 m-4">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