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

二十七、Tailwind CSS基础学习笔记之 Tailwind CSS Grid Auto Flow 设置网格元素自动放置

温新 2022-09-18 23:08:35 Tailwind CSS 217人已围观

简介Tailwind CSS基础学习笔记之 Tailwind CSS Grid Auto Flow 设置网格元素自动放置

hi,我是温新,一名PHPer


此笔记基于 Tailwind CSS v3.1.8

grid auto flow 用于控制网格中元素如何自动放置的功能类。

ClassProperties
grid-flow-rowgrid-auto-flow: row;
grid-flow-colgrid-auto-flow: column;
grid-flow-row-densegrid-auto-flow: row dense;
grid-flow-col-densegrid-auto-flow: column dense;

grid-flow-row

格式:<element class="grid-flow-row"></element>

说明:依次自动填充每一行,并根据需要添加新的行。

grid-flow-col

格式:<element class="grid-flow-row"></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 Grid</h1>
   <b>Tailwind CSS grid-auto-flow </b>
   <div class="m-8 grid gird-flow-row-dense gap-1">
       <div class="bg-green-500 rounded-lg">1</div>
       <div class="bg-green-500 rounded-lg">2</div>
       <div class="bg-green-500 rounded-lg">3</div>
       <div class="bg-green-500 rounded-lg">4</div>
   </div>

   <div class="m-8 grid grid-flow-col gap-1">
       <div class="bg-green-500 rounded-lg">1</div>
       <div class="bg-green-500 rounded-lg">2</div>
       <div class="bg-green-500 rounded-lg">3</div>
       <div class="bg-green-500 rounded-lg">4</div>
   </div>
</body>
</html>


很赞哦!(2)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:xyhcx@foxmail.com

站点信息