您现在的位置是:自如初>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 和网格容器中行的位置。

ClassProperties
content-centeralign-content: center;
content-startalign-content: flex-start;
content-endalign-content: flex-end;
content-betweenalign-content: space-between;
content-aroundalign-content: space-around;
content-evenlyalign-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)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:ziruchu@qq.com

站点信息