您现在的位置是:自如初>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 设置弹性盒子布局的对其方式,用于控制 flexgrid 项目如何沿着容器的主轴定位的功能类。

ClassProperties
justify-startjustify-content: flex-start;
justify-endjustify-content: flex-end;
justify-centerjustify-content: center;
justify-betweenjustify-content: space-between;
justify-aroundjustify-content: space-around;
justify-evenlyjustify-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)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:ziruchu@qq.com

站点信息