您现在的位置是:自如初>Tailwind CSSTailwind CSS

三十七、Tailwind CSS基础学习笔记之 Tailwind CSS Place Items

温新 2022-10-08 22:16:43 Tailwind CSS 415人已围观

简介Tailwind CSS基础学习笔记之 Tailwind CSS Place Items

hi,我是温新,一名PHPer


此笔记基于 Tailwind CSS v3.1.8

place items 用于控制元素节点在容器中如何垂直对齐。

ClassProperties
place-items-startplace-items: start;
place-items-endplace-items: end;
place-items-centerplace-items: center;
place-items-stretchplace-items: stretch;

place-items-start

格式:<element></element>

说明:设置元素节点从容器的左侧开始垂直对齐,且元素间的距离相等。

place-items-center

格式:<element></element>

说明:设置元素节点垂直居中于容器中心位置,且元素间的距离相等。

place-items-end

格式:<element></element>

说明:设置元素节点垂直居中于容器右侧底部,且元素间的距离相等。

place-items-stretch

格式:<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 Items</h1>

   <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-items-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>

   <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-items-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>

   <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-items-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>

   <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-items-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>

place-content 不同的是,place-items 会使用元素间的距离保持相等。



很赞哦!(0)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:ziruchu@qq.com

站点信息