# Tailwind 布局

本节梳理记录一些 Tailwind 常用的布局书写方式。

内容较多，无需一次性全部记忆，但要有所印象。

# 总结规律

• box-sizing 盒子模型：盒子模型以 box 开头表示盒子模型，而后跟随盒子模型的边界，如box-border表示以 border 为边界的盒子模型，对应box-sizing: border-box;;
• display 布局：除 display: none 的类名为 hidden 外，其余类名基本为 display 的取值本身。
• float 浮动：直接用 - 将 float 和取值进行连接即可，如 float-left 类名表示 float: left;。
• position 定位：position 的取值本身；
• 定位位置：通用公式为 {top|right|bottom|left|inset}-{number}，若是负值，减号在类名前面；
• visibility 可见性：取值本身，直接写 visible 或 invisible；
• z-index 层叠顺序：通用公式为z-{indexNumber}，若为负则负号在前；
• flex 弹性盒子：
  • 整体方向和是否换行，通用公式为 flex-{direction|wrap}；
  • content 的整体对齐方向布局，通用公式为 {justify|content}-{value} 分别表示 justify-content 水平方向整体布局和 align-content 垂直方向整体布局;
  • items 的单行沿容器垂直对齐方向，通用公式为 item-{value}；
  • align 的单个子项沿容器的垂直对齐方向，通用公式为 align-{value}；
  • flex 弹性缩放属性，通用公式为 flex-{initial|0|none|1|auto}；

# 容器

容器同上一小节中介绍的断点是一样的，这里同布局的内容更贴切，因此再做总结。

• 容器居中：mx-auto

• 添加水平内边距：px-{size}

• 响应式变体，如只在某个断点上表现出差异：

  <!-- Full-width fluid until the `md` breakpoint, then lock to container -->
  <div class="md:container md:mx-auto">
    <!-- ... -->
  </div>
  

• 自定义容器在默认情况下居中。通过配置 theme.container 部分将 center 设置为 true：

  // tailwind.config.js
  module.exports = {
    theme: {
      container: {
        center: true,
      },
    },
  }
  

# Box Sizing 盒子模型

设置盒子类型会和原生有一点不同，由 box 开头表示盒子模型，而后跟随盒子模型的边界，如box-border表示以 border 为边界的盒子模型：

# Display 常用布局

除 display: none 为 hidden 外，其余基本为取值本身。

# float 浮动

浮动在现代布局中用的较少了，但是也有其存在的必要。浮动较为好记，直接用 - 对 float 的取值进行连接即可。

有浮动，自然也有清除浮动，记忆方法同上，但一般都是用 clear-both：

# Position 定位

Position 定位非常便捷，直接书写 potion 的值即可：

# Top / Right / Bottom / Left

控制定位元素的位置，这个类名较多一般是根据元素值去查表，推荐 VScode 插件来进行书写。

通用公式：{top|right|bottom|left|inset}-{number}

若是负值，减号在类名前面：-{top|right|bottom|left|inset}-{number|string}

# visibility 可见性

同定位元素一样，直接书写 visibility 的值：

区别于 display: none，DOM 元素依旧会存在但是不显示。

# z-index 层叠顺序

层叠顺序也较好记忆：z-{index}

# flex 弹性盒子

如上文 Position 所写一样，首先父元素要先设置为 fixed，变为弹性盒子。

弹性盒子共分为俩部分，父元素控制整体布局，子元素控制元素细节。可见 《弹性布局 Flex》

# 父元素整体布局设置

先回顾一下原先到布局设置:

1. flex-direction 属性与整体布局方向。

   flex-direction: row | row-reverse | column | column-reverse;
   

2. flex-wrap 属性与整体布局的换行表现。

   flex-wrap: nowrap | wrap | wrap-reverse;
   

3. flex-flow 属性是 flex-direction 和 flex-wrap 的缩写。

• 在 Tailwind 中 flex 控制子项的方向 flex-direction 变化较大，直接省略了 direction 转而拼接值；此外 column 也采用缩写 col。通用公式为flex-{direction}：

  Class	Properties
  flex-row	flex-direction: row;
  flex-row-reverse	flex-direction: row-reverse;
  flex-col	flex-direction: column;
  flex-col-reverse	flex-direction: column-reverse;

• 控制整体是否换行 flex-wrap 同 direction 一样是略去 wrap 关键词直接拼接值。通用公式为flex-{wrap}：

  Class	Properties
  flex-wrap	flex-wrap: wrap;
  flex-wrap-reverse	flex-wrap: wrap-reverse;
  flex-nowrap	flex-wrap: nowrap;

# 对齐特性

实际上，Tailwind 对齐这一部分同 Grid 网格布局是同享的，先看原先对齐的几个属性值：

1. justify-content 属性与整体布局的水平对齐

   justify-content: normal | flex-start | flex-end | center | space-between |
     space-around | space-evenly;
   

2. 垂直对齐属性 align-items 与 align-self

   区别: align-self属性是设置在具体的某一个 flex 子项上的，而align-items属性是设置在 flex 容器元素上的，控制所有 flex 子项的垂直对齐方式。

   align-items: stretch | flex-start | flex-end | center | baseline;
   
   align-self: auto | stretch | flex-start | flex-end | center | baseline;
   
   • auto是align-self 属性的默认值，表示 flex 子项的垂直对齐 方式是由 flex 容器的 align-items 属性值决定的。
   • stretch可以看成弹性布局中align-items 属性的默认值，表示 flex 子项在垂直方向上拉伸。

3. align-content 属性与整体布局的垂直对齐

   区别: align-content 属性和 align-items 属性的区别在于 align-items 属性设置的是每一个 flex 子项的垂直对齐方式，而 align-content 属性将 所有 flex 子项作为一个整体进行垂直对齐设置。

   align-content: stretch | flex-start | flex-end | center | space-between |
     space-around | space-evenly;
   

4. order 属性与单个子项的顺序控制

   order: <integer>; /* 整数值，默认值是 0 */
   

在 Tailwind 中有如下变动:

• justify-content 用于 flex 和 grid 沿容器整体布局的水平对齐方向：

  Class	Properties
  justify-start	justify-content: flex-start;
  justify-end	justify-content: flex-end;
  justify-center	justify-content: center;
  justify-between	justify-content: space-between;
  justify-around	justify-content: space-around;
  justify-evenly	justify-content: space-evenly;

• align-content 用于 flex 和 grid 多行沿容器整体布局的垂直对齐方向：

  Class	Properties
  content-center	align-content: center;
  content-start	align-content: flex-start;
  content-end	align-content: flex-end;
  content-between	align-content: space-between;
  content-around	align-content: space-around;
  content-evenly	align-content: space-evenly;

• align-items 用于 flex 和 grid 各单行沿容器整体布局的垂直对齐方向，通用公式为 item-{value}；：

  Class	Properties
  items-start	align-items: flex-start;
  items-end	align-items: flex-end;
  items-center	align-items: center;
  items-baseline	align-items: baseline;
  items-stretch	align-items: stretch;

• align-self 用于 flex 和 grid 单个子项沿容器的垂直对齐方向，通用公式为 align-{value}：

  Class	Properties
  self-auto	align-self: auto;
  self-start	align-self: flex-start;
  self-end	align-self: flex-end;
  self-center	align-self: center;
  self-stretch	align-self: stretch;
  self-baseline	align-self: baseline;

# flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 这 3 个缩放属性的缩写。

• flex:initial 等同于 flex: 0 1 auto;，作用为 flex 初始值；
• flex:0 等同于 flex: 0 1 0%;，元素尺寸会收缩但不会扩展，作用为元素尺寸表现为最小内容宽度；
• flex:none 等同于 flex:0 0 auto; , 作用为 flex 子项没有弹性, 设置为固定尺寸元素(无需设置width属性)，元素最终尺寸通常表现为最大内容宽度。
• flex:1 等同于 flex: 1 1 0%;，作用为 flex 子项自动填满剩余空间或自动收缩，在容器尺寸不足时会优先最小化内容的尺寸；
• flex:auto 等同于 flex: 1 1 auto;， 作用为 flex 子项自动填满剩余空间或自动收缩，在容器尺寸不足时会优先最大化内容尺寸;

完整属性缩写介绍对照表，具体使用可见 《弹性布局 Flex》。

# flex-grow 扩展属性

# flex-shrink 收缩属性