标题
新版栅格样式
lg: 表示pc端样式(大屏样式) lg:space-x-2 表示子标签在pc模式下左右间距8px; lg:flex-row 大屏模式下横向排列
不写lg 代表通用模式(手机模式) space-y-2 子标签上下间距为8px; flex-col 通用模式下竖向排列
四分之一
四分之一
四分之一
四分之一
  
<div class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
  <div class="lg:w-1/4 bg-gray-300 h-10 text-center ">四分之一</div>
  <div class="lg:w-1/4 bg-gray-300 h-10 text-center">四分之一</div>
  <div class="lg:w-1/4 bg-gray-300 h-10 text-center">四分之一</div>
  <div class="lg:w-1/4 bg-gray-300 h-10 text-center">四分之一</div>
</div>

六分之一
六分之二
六分之三
  
<div class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
  <div class="lg:w-1/6 bg-gray-300 h-10 text-center ">六分之一</div>
  <div class="lg:w-2/6 bg-gray-300 h-10 text-center">六分之二</div>
  <div class="lg:w-3/6 bg-gray-300 h-10 text-center">六分之三</div>
</div>

class数值必须存在于下表格
格栅参考数值
Class
Properties
w-1/2 width: 50%;
w-1/3 width: 33.333333%;
w-2/3 width: 66.666667%;
w-1/4 width: 25%;
w-2/4 width: 50%;
w-3/4 width: 75%;
w-1/5 width: 20%;
w-2/5 width: 40%;
w-3/5 width: 60%;
w-4/5 width: 80%;
w-1/6 width: 16.666667%;
w-2/6 width: 33.333333%;
w-3/6 width: 50%;
w-4/6 width: 66.666667%;
w-5/6 width: 83.333333%;
w-1/12 width: 8.333333%;
w-2/12 width: 16.666667%;
w-3/12 width: 25%;
w-4/12 width: 33.333333%;
w-5/12 width: 41.666667%;
w-6/12 width: 50%;
w-7/12 width: 58.333333%;
w-8/12 width: 66.666667%;
w-9/12 width: 75%;
w-10/12 width: 83.333333%;
w-11/12 width: 91.666667%;
标题
弹性布局排序
order为弹性布局排序 突破dom结构局限 随心排列 排列顺序为order-1, order-2, order-3 ... 以此类推
1
2
3
4
5
6
  
<div class="flex flex-col lg:flex-row w-full space-y-2 lg:space-y-0 mb-2 lg:mb-4">
  <div class="bg-gray-300 h-10 text-center w-full order-3 mx-1">1</div>
  <div class="bg-gray-300 h-10 text-center w-full order-5 mx-1">2</div>
  <div class="bg-gray-300 h-10 text-center w-full order-1 mx-1">3</div>
  <div class="bg-gray-300 h-10 text-center w-full order-2 mx-1">4</div>
  <div class="bg-gray-300 h-10 text-center w-full order-6 mx-1">5</div>
  <div class="bg-gray-300 h-10 text-center w-full order-4 mx-1">6</div>
</div>

更多操作详见 tailwindcss