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

三十二、Tailwind CSS基础学习笔记之 Tailwind CSS Justify Items

温新 2022-10-08 22:09:10 【Tailwind CSS】 309人已围观

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

hi，我是温新，一名PHPer

此笔记基于 Tailwind CSS v3.1.8

justify items 用于控制网格项如何沿其内联轴对齐。

Class	Properties
justify-items-start	justify-items: start;
justify-items-end	justify-items: end;
justify-items-center	justify-items: center;
justify-items-stretch	justify-items: stretch;

justify-items-start

格式：<element></element>

说明：用于设置网格元素沿内联轴的左侧起点排列。

justify-items-end

格式：<element></element>

说明：用于设置网格元素沿内联轴的右侧起点排列。

justify-items-center

格式：<element></element>

说明：用于设置元素沿着内联轴对齐于网格。

justify-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 Justify Items</h1>

  <div class="grid grid-cols-2 justify-items-start">
    <div class="bg-green-700 rounded-lg m-4 w-24 h-12">1</div>
    <div class="bg-green-700 rounded-lg m-4 w-24 h-12">2</div>
    <div class="bg-green-700 rounded-lg m-4 w-24 h-12">3</div>
    <div class="bg-green-700 rounded-lg m-4 w-24 h-12">4</div>
    <div class="bg-green-700 rounded-lg m-4 w-24 h-12">5</div>
    <div class="bg-green-700 rounded-lg m-4 w-24 h-12">6</div>
  </div>

  <div class="grid grid-cols-2 justify-items-end">
    <div class="bg-pink-700 rounded-lg m-4 w-24 h-12">1</div>
    <div class="bg-pink-700 rounded-lg m-4 w-24 h-12">2</div>
    <div class="bg-pink-700 rounded-lg m-4 w-24 h-12">3</div>
    <div class="bg-pink-700 rounded-lg m-4 w-24 h-12">4</div>
    <div class="bg-pink-700 rounded-lg m-4 w-24 h-12">5</div>
    <div class="bg-pink-700 rounded-lg m-4 w-24 h-12">6</div>
  </div>

  <div class="grid grid-cols-2 justify-items-center">
    <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">1</div>
    <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">2</div>
    <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">3</div>
    <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">4</div>
    <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">5</div>
    <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">6</div>
  </div>

  <div class="grid grid-cols-2 justify-items-stretch">
    <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">1</div>
    <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">2</div>
    <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">3</div>
    <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">4</div>
    <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">5</div>
    <div class="bg-orange-500 rounded-lg m-4 w-24 h-12">6</div>
  </div>
</body>
</html>