美文网首页
Tailwind Spacing

Tailwind Spacing

作者: JunChow520 | 来源:发表于2020-06-01 20:54 被阅读0次

    单位(size)

    Tailwind间距单位采用remrem是相对于HTML的根元素<html>标签而言的,只需在根元素确定一个参考值,即可计算出不同rem的大小。

    html{ font-size: 16px; }
    

    例如:浏览器默认字号为16px,常见pxrem单位之间的转换。

    px rem
    4px 4/16=.25rem
    8px 8/16=.5rem
    12px 12/16=.75rem
    14px 14/16=0.875rem
    16px 16/16=1rem
    18px 18/16=1.125rem
    20px 20/16=1.25rem
    24px 24/16=1.5rem
    30px 30/16=1.875rem
    32px 32/16=2rem

    Tailwind中尺寸中数字所表示的实际单位,以浏览器中默认的16px为参考。

    大小 rem px
    0 0rem 0px
    1 0.25rem 4px
    2 0.5rem 8px
    3 0.75rem 12px
    4 1rem 16px

    外边距(margin)

    Tailwind外边距margin采用m-{t|r|b|l}-{size}命名工具类的方式为元素指定外边距,外边距的大小单位为rem。如果是负边距则采用-m-{t|r|b|l}-{size}命名方式。

    命名 属性
    m margin
    mt margin-top
    mr margin-right
    mb margin-bottom
    ml margin-left
    m-auto margin:auto;
    mx margin-left、margin-right
    my margin-top、margin-bottom
    mx-auto margin-left:auto; margin-right:auto;
    my-auto margin-top:auto; margin-bottom:auto;
    m-px margin:1px;
    mt-px margin-top:1px;
    mr-px margin-right:1px;
    mb-px margin-bottom:1px;
    ml-px margin-left;1px;

    内边距(padding)

    Tailwind采用p{t|r|b|l}-{size}命名工具类为元素指定的一侧添加内边距(填充),padding的单位为rem,每一份为0.25rem即1/4个rem单位。

    命名 属性
    p padding
    px padding-left、padding-right
    py padding-top、padding-bottom
    pl padding-left
    pr padding-right
    pt padding-top
    pb padding-bottom
    pl-px padding-left:1px
    pr-px padding-right:1px
    pt-px padding-top:1px
    pb-px padding-bottom:1px

    间距(space between)

    Tailwind中的space-是使用margin属性在父级容器中为子类设置左侧外间距margin-left和顶部外间距margin-top,典型的格式为space-{x|y}-{size} > * + *,主要目的是容器内子类统一设置水平和垂直的间距。

    类名 属性
    space-x-{size} margin-left:{size};
    -space-x-{size} margin-left:-{size};
    space-y-{size} margin-top:{size};
    -space-y-{size} margin-top:-{size};
    space-x-px margin-left:1px;
    space-y-px margin-top:1px;

    如果子元素的顺序相反,即使用flex-row-reverseflex-col-reverse反转后,可使用space-x-reversespace-y-reverse以确保将间隔空间添加到子元素中。

    flex flex-row flex-row-reverse space-x-size space-x-reverse
    
    flex flex-col flex-col-reverse space-y-size space-y-reverse
    

    例如:设置容器中子元素的左间距

    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
    
    <div class="container mx-auto my-12 p-0 border flex flex-row space-x-4">
      <div class="bg-gray-100 p-4">1</div>
      <div class="bg-gray-200 p-4">2</div>
      <div class="bg-gray-300 p-4">3</div>
      <div class="bg-gray-400 p-4">4</div>
    </div>
    
    space-x-4

    例如:设置容器中反转后元素的间距

    <div class="container mx-auto my-12 p-0 border flex flex-row flex-row-reverse space-x-4 space-x-reverse">
      <div class="bg-gray-100 p-4">1</div>
      <div class="bg-gray-200 p-4">2</div>
      <div class="bg-gray-300 p-4">3</div>
      <div class="bg-gray-400 p-4">4</div>
    </div>
    
    space-x-reverse

    例如:设置容器中子元素的上间距

    <div class="container mx-auto my-12 p-0 border flex flex-col space-y-4">
      <div class="bg-gray-100 p-4">1</div>
      <div class="bg-gray-200 p-4">2</div>
      <div class="bg-gray-300 p-4">3</div>
      <div class="bg-gray-400 p-4">4</div>
    </div>
    
    space-y-4

    例如:设置容器中已反转子元素的上间距

    <div class="container mx-auto my-12 p-0 border flex flex-col flex-col-reverse space-y-4 space-y-reverse">
      <div class="bg-gray-100 p-4">1</div>
      <div class="bg-gray-200 p-4">2</div>
      <div class="bg-gray-300 p-4">3</div>
      <div class="bg-gray-400 p-4">4</div>
    </div>
    
    space-y-reverse

    案例源代码

    https://codepen.io/junchow/pen/GRoKrdp?editors=1000
    

    相关文章

      网友评论

          本文标题:Tailwind Spacing

          本文链接:https://www.haomeiwen.com/subject/bkzszhtx.html