11 顺序

响应式导航栏 示例 11a

我们再次来看一下示例 9a，现在让它具备响应式。假设导航栏中只有 3 个链接，并且你希望在移动屏幕上这些链接显示在第二行。

HTML 标记

<header>
  <a>
    <img ... />
  </a>
  <ul>
    <span>
      <button>...</button>
    </span>
  </ul>
</header>

由于在 Tailwind CSS 中我们遵循移动优先的原则，在小屏幕上我们首先需要做两件事：

1. 更改ul元素的顺序，使其最后显示。
2. 让ul元素占据整个宽度。

然后使用md:前缀，

1. 将ul的顺序改回 0。
2. 将ul的宽度改回自动。

如果你了解order-*实用工具，不妨试试这个。

Try it out

解决方案：

<ul class="order-last flex-[100%] md:order-none md:flex-auto">
  ...
</ul>

Working Demo

这里唯一的新实用工具是order实用工具。

理解顺序（Order）概念

order属性也用于弹性项（flex item）。其值可以是任意数字，正数或负数都可以。与顺序值较小的项相比，顺序值较大的项在网页上显示的位置更靠后，与它们在标记中的出现顺序无关。

如果未指定顺序，默认情况下所有元素的值都是 0，它们会按照在 HTML 中出现的顺序显示。 - 以下是一些常见的order实用工具：

Tailwind 类	CSS 属性及值	解释
order-1	order: 1;	类似地，从 1 到 12 的任何数字都有对应的order-2、order-3等
order-first	order: -9999;	该项会被放置在开头，因为这个值是一个很大的负数。
order-last	order: 9999;	该项会被放置在末尾，因为这个值是一个很大的正数。
order-none	order: 0;	这是默认值。

因此，在上面的示例中，当我们将order-last应用于ul元素时，只有该元素会脱离正常流并被放置在末尾。而在大屏幕上，我们使用order-none将其改回正常流。