css改变显示顺序_几种更改显示顺序CSS方法

最新推荐文章于 2024-09-08 21:19:18 发布

daique1908

最新推荐文章于 2024-09-08 21:19:18 发布

阅读量5.3k

点赞数

文章标签： css html css3 java js ViewUI

css改变显示顺序

在本教程中，我们将介绍几种用于重新排序HTML元素CSS方法。

目标

我们要构建的布局非常简单。具体来说，在小屏幕（即<600px）上，它应如下所示：

在中等或以上的屏幕（即大于或等于600像素）上，我们希望它显示如下：

我们最大的挑战是找到一种方法来反转按钮的顺序。

标记

我们将使用的标记很简单；只是一个包含四个按钮的div元素：

<div class="boxes">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>

基本样式

在小屏幕上，所有按钮共享相同的样式：

.boxes button {
  display: block;
  width: 100%;
  padding: 15px;
  border: none;
  margin-bottom: 5px;
  box-sizing: border-box;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  background: gold;
  color: #000;
}

.boxes button:nth-of-type(even) {
  background: #e6c200;
}

在较大的屏幕上，我们仅将width: 25%分配给按钮。其余样式将由我们用来反转按钮顺序CSS方法确定。

@media screen and (min-width: 600px) {
  /* we skip this property in flexbox and grid methods */
  width: 25%;
  
 /* more stuff here */
}

最后，我们将为按钮的focus状态添加一些样式：

.boxes button:focus {
  outline: none;
  color: #fff;
  background: firebrick;
}

因此，如果我们使用键盘（“ Tab”键）浏览按钮，则每个焦点按钮将获得深红色作为背景色。

列排序方法

至此，我们准备研究当视口超过599px时反转按钮顺序的不同CSS方法。

方法1：浮动

一种快速的解决方案是将按钮浮动到右侧。这是额外CSS：

@media screen and (min-width: 600px) {
  .boxes button {
    float: right;
    width: 25%;
  }
}

这是嵌入式Codepen演示：

方法2：定位

另一种解决方案是相对或绝对定位元素。

在第一个选项之后，我们将按钮浮动到左侧，为其指定position: relative ，然后使用left属性设置其位置。

所需CSS如下所示：

@media screen and (min-width: 600px) {
  .boxes button {
    position: relative;
    float: left;
    width: 25%;
   }
 
  .boxes button:nth-of-type(1) {
    left: 75%;
  }

  .boxes button:nth-of-type(2) {
    left: 25%;
  }

  .boxes button:nth-of-type(3) {
    left: -25%;
  }

  .boxes button:nth-of-type(4) {
    left: -75%;
  }
}

嵌入式Codepen演示：

在第二个选项之后，我们还可以为按钮指定position: absolute ，然后使用left属性更精确地设置其位置。

相应CSS规则：

@media screen and (min-width: 600px) {
  .boxes {
    position: relative;
  }
  
  .boxes button {
    position: absolute;
    width: 25%;
  }
  
  .boxes button:nth-of-type(1) {
    left: 75%;
  }
  
  .boxes button:nth-of-type(2) {
    left: 50%;
  }
  
  .boxes button:nth-of-type(3) {
    left: 25%;
  }
  
  .boxes button:nth-of-type(4) {
    left: 0;
  }
}

Codepen演示：

方法＃3： `direction`属性

一种不太明显的方法是使用direction属性。通常保留用于更改文本阅读方向的东西。在我们的例子中，我们指定direction: rtl （从右到左）到包装器元素，立即反转布局。

注意：在此示例中，我们使元素的行为类似于表元素，以实现水平布局。

您可以在下面看到必要CSS样式：

@media screen and (min-width: 600px) {
  .boxes {
    display: table;
    width: 100%;
    direction: rtl;
  }

  .boxes button {
    display: table-cell;
    width: 25%;
  }
}

值得一提的是，如果（出于某种原因）我们想要更改按钮的文本方向，则可以在样式表中包括以下“双向覆盖”规则：

.boxes button {
  unicode-bidi: bidi-override;
}

Codepen演示：

方法＃4：转换

巧妙的解决方案是将按钮浮动到左侧，然后对它们及其父级应用transform: scaleX(-1) 。通过设置负值，不会缩放转换后的元素。实际上，它们是沿水平轴翻转的。

以下是必需CSS：

@media screen and (min-width: 600px) {
  .boxes {
    transform: scaleX(-1);
  }

  .boxes button {
    float: left;
    transform: scaleX(-1);
    width: 25%;
  }
}

嵌入式Codepen演示：

我们甚至可以使用变换的rotate功能来实现所需的顺序。我们所需要做的就是添加transform: rotateY(180deg)对按钮及其父按钮添加transform: rotateY(180deg) 。

这是此解决方案所需CSS：

@media screen and (min-width: 600px) {
  .boxes {
    transform: rotateY(180deg);
  }
  
  .boxes button {
    float: left;
    transform: rotateY(180deg);
    width: 25%;
  }
}

和Codepen演示：

方法5：Flexbox

Flexbox是更改列顺序的另一种方法。在我们的示例中，我们可以利用两个不同的flexbox属性来创建所需的布局。

第一种方法是将按钮的父级设置为flex容器，然后向其添加flex-direction: row-reverse属性值。

以下是相应的样式：

@media screen and (min-width: 600px) {
  .boxes {
    display: flex;
    flex-direction: row-reverse;
  }
}

嵌入式Codepen演示如下所示：

第二个flexbox选项是将按钮的父级设置为flex容器，然后使用order属性确定按钮应以哪个顺序出现。

对应CSS：

@media screen and (min-width: 600px) {
  .boxes {
    display: flex;
  }
  
  .boxes button:nth-of-type(1) {
    order: 4;
  }

  .boxes button:nth-of-type(2) {
    order: 3;
  }

  .boxes button:nth-of-type(3) {
    order: 2;
  }

  .boxes button:nth-of-type(4) {
    order: 1;
  }
}

Codepen演示：

方法＃6：CSS网格布局

CSS网格布局是一种有前途的元素重排解决方案。即使在撰写本文时，它对浏览器的支持非常有限，也请尝试一下。请记住，我们的示例仅适用于Chrome，默认情况下不支持此CSS功能，但是我们可以按照一些简单的步骤将其启用。

无需赘述，让我们描述两种实现所需顺序的方法。

第一个选项是将按钮的父级设置为grid容器，然后使用grid-column属性确定按钮应以哪个顺序出现。另外，我们通过向它们添加grid-row: 1来确保所有按钮都属于同一行（第一行）。

请参阅以下相关样式：

@media screen and (min-width: 600px) {
  .boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
  }
  
  .boxes button {
    grid-row: 1;
  }
  
  .boxes button:nth-of-type(1) {
    grid-column: 4;
  }

  .boxes button:nth-of-type(2) {
    grid-column: 3;
  }

  .boxes button:nth-of-type(3) {
    grid-column: 2;
  }

  .boxes button:nth-of-type(4) {
    grid-column: 1;
  }
}

嵌入式Codepen演示：

第二个网格选项类似于flexbox的第二个解决方案。我们将按钮的父级设置为grid容器，然后使用order属性确定按钮应以哪个顺序出现。

所需CSS：

@media screen and (min-width: 600px) {
  .boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  
  .boxes button:nth-of-type(1) {
    order: 4;
  }

  .boxes button:nth-of-type(2) {
    order: 3;
  }

  .boxes button:nth-of-type(3) {
    order: 2;
  }

  .boxes button:nth-of-type(4) {
    order: 1;
  }
}

Codepen演示：

同样，您需要在Chrome中启用“实验性Web平台功能”才能查看结果。

源顺序与视觉顺序

如我们所展示的，我们可以遵循不同CSS方法来更改按钮的顺序。因此，在这一点上，让我们重新访问每个演示，并使用键盘（单击笔并单击“ Tab”键）来浏览按钮。您会注意到，即使在视觉上首先显示“按钮4”，但第一个获得关注的按钮是“按钮1”，因为这是DOM中第一个出现的按钮。如果我们使用屏幕阅读器测试演示，也会发生同样的事情（我在NVDA中进行了测试）。

考虑到DOM顺序和CSS顺序之间的这种脱节，我们应该非常小心用CSS重新排列的页面部分。例如，虽然flexbox的order属性是对元素进行重新排序的最灵活的方法之一，但规范指出：