box和flexbox_Flexbox订购和重新订购综合指南

最新推荐文章于 2024-09-25 10:59:43 发布

daique1908

最新推荐文章于 2024-09-25 10:59:43 发布

阅读量204

点赞数

文章标签： java css python html javascript ViewUI

box和flexbox

flexbox布局模块允许我们按任意顺序和方向对flex项目进行布局。实际上，Flexbox排序比使用浮点数或CSS网格排序更容易，即使您一开始可能并不这么认为。由于flexbox是一维布局模型，而CSS网格是二维的，因此您只需要注意一个方向即可。 W3C也清楚地定义了规则，因此您不必处理通常的float和clearfixes混乱。

通过阅读本指南，您将学习如何使用以下flexbox属性进行订购：

flex-direction
flex-wrap
flex-flow
order

重新排序

在谈论flexbox订购时，我们需要弄清楚订购和重新订购之间的区别。

什么是订购？

设置flexbox布局时，我们首先需要定义源顺序，这意味着我们必须确定flex容器的轴的位置。我在有关flexbox对齐的指南中详细介绍了flexbox轴的工作方式。

简而言之，每个伸缩容器都有两个轴：主轴和交叉轴。主轴将具有四个方向之一，而交叉轴将始终垂直于该方向：

左到右
右到左
从上到下
从下到上

我们使用flex-direction属性设置主轴，然后使用flex-wrap属性决定如何包装flex项目。这两个属性确定浏览器如何布置flex容器中的项目。

那么什么是重新排序？

Flexbox还允许我们在order属性的帮助下操纵默认的源订单，有效地重新排序 。重新排序意味着我们更改了项目的视觉呈现，而源订单保持不变。

如果我们使用flexbox的重新排序功能，则不必为了视觉呈现而更改HTML文档结构。因此，屏幕阅读器用户（和搜索引擎）可以以逻辑结构的方式获取内容（例如，侧边栏不会优先于主要内容）。

Flexbox订购

Flexbox排序通过flex-direction和flex-wrap属性进行。 Flex-direction指定主轴的方向。它可以采用以下值：

row （默认）主轴：从左到右
row-reverse主轴：从右到左
column主轴：从上到下
column-reverse主轴：从下到上

Flex-wrap定义弹性项目是布置在单行中还是换行到多行。它还控制横轴的方向。它可以具有三个值：

nowrap （默认）将弹性项目布置在一行中；十字轴位于默认位置
wrap将弹性项目布置成多行；十字轴位于默认位置
wrap-reverse将弹性项目布置成多行；十字轴反转

十字轴的默认位置是：

从上到下（如果row和row-reverse
从左到右（如果column和column-reverse

在上一篇有关flexbox对齐的文章中，您可以找到四个详细示例（包含演示），这些示例有关如何使用flex-direction在四个不同方向上设置主轴。然而，在讨论Flexbox的订货的时候，我想知道如何使用它更重要的flex-direction和flex-wrap特性，共同实现我们正在寻找源顺序。

快速代码示例

我们将使用一个简单的代码示例来查看flexbox的排序方式。这里HTML仅包含几个div：

<div class="container">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
</div>

.container div将是flex容器，具有.item类的div将是flex项。在所有示例中，我们将（几乎）使用相同CSS，只是flex-direction和flex-wrap属性将发生变化。这是CSS的row和wrap值的外观：

html {
  background: #fff7f6;
}
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.item {
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  padding: 3rem;
  background: mistyrose;
  border: 3px solid tomato;
  color: tomato;
  margin: 6px;
}

这是CodePen演示中的相同示例：

`Row`和`Column`排序

现在，我们已经达到了真正有趣的部分！从理论上理解flexbox的排序并不难，但是在实践中使用它肯定是一个挑战。发生这种情况是因为很难看到 flex-direction和flex-wrap不同变化之间的比较。

在下面的嵌入式笔中，您可以看到flex-direction: row和flex-direction: column布局如何与flex-wrap属性的不同值一起使用。使用表单控件查看不同的组合。

如您所见，当flex-direction为row ，flex项从左到右水平放置。当我们使用wrap-reverse而不是wrap ，flexbox从底部开始而不是从顶部开始布局项目。发生这种情况是因为wrap-reverse回使横轴的方向wrap-reverse 。

当flex-direction为column ，项目从上到下垂直布置。而且，当我们使用wrap-reverse而不是wrap ，flexbox从右侧（现在是交叉轴的起点）开始而不是从左侧开始布置项目。

`row-reverse`和`column-reverse`排序

现在，让我们看一下当flex-direction为row-reverse和column-reverse时，flexbox如何布置项目。

正如您在上面的演示中所看到的，在两种情况下，flexbox都像以前一样从主轴的起点开始布局项目。 row-reverse布局的主轴从右到左 ，因此flexbox开始从右开始布局项目。并且， column-reverse布局的主轴从底部到顶部 ，因此项目开始从flex容器的底部开始流动。

当我们使用flex-wrap: wrap ，当flex-direction为row-reverse时，flexbox从顶部开始包装项目；而当column-reverse为flex-direction row-reverse ，则从左侧开始包装项目，因为这是各自情况下交叉轴的起点。

当我们将包装方向翻转为flex-wrap: wrap-reverse ，交叉轴将沿相反方向运行。当flex-direction为row-reverse时，它将从底部指向顶部 ，而当column-reverse时，它将从右指向左 。

使用`flex-flow`速记加快速度

CSS对于flex-direction和flex-wrap属性也有一个很酷的缩写。这称为flex-flow 。要使用它，我们需要按以下方式依次列出两个属性：

.container-1 {
    flex-flow: row wrap;
}
.container-2 {
    flex-flow: column-reverse wrap-reverse;
}

Flexbox重新排序

现在该换个角度来看待事物了。

order属性更改了我们使用flex-direction和flex-flow定义的flex项目的默认排序。它仅影响项目的视觉呈现，因此不影响屏幕阅读器和其他非CSS用户代理读取源代码的方式。

与前面提到的属性相反，我们在flex 项目上使用order ，而不是flex 容器。它可以采用任何整数值，并且其默认值为0。

下面的示例将.item-3移动到主轴的起点。由于所有项目的默认值均为0，因此足以使用order: -1规则使其成为容器中的第一项：

.item-3 {
    order: -1;   
}

您会注意到，我们可以使用相同的逻辑将.item-3移动到主轴的末端。我们只需要为其定义一个正order值。

当然，我们可以根据需要对任意数量的弹性项目进行重新排序（尽管请记住，对所有内容进行重新排序可能不是有史以来最易访问的决定）。不同弹性项目的order属性始终彼此相对。在下面，您可以看到如何在flex容器中重新排序多个项目。

.item-3 {
  order: -1;
}
.item-4 {
  order: -2;
}
.item-5 {
  order: 2;
}
.item-7 {
  order: 1;
}

订购和可及性

要了解所有这一切，最重要的一点是order属性不会影响绘画，语音和顺序导航顺序。这意味着当我们修改弹性商品的顺序时，非视觉媒体的用户将不会体验到这些更改。例如，依靠键盘导航的人们仍将按原始源顺序在链接中移动。

在某些情况下，这种flexbox行为可能会派上用场。例如，可以通过Flexbox订购来访问所谓的“圣杯布局”。 Holy Grail布局是流行的博客布局，具有页眉，页脚和两个侧边栏：一个在主内容的左侧，一个在右侧。

在这种布局中，我们通常将左侧边栏放在HTML代码中的主要内容之前。但是，从可访问性的角度来看，辅助技术的用户应该首先遇到主要内容。 Flexbox非常适合此功能。我们可以将主要内容放置在标记中的两个侧边栏之前。然后，我们只需要使用order属性将侧边栏和主要内容放置在正确的位置：

.sidebar-left { 
  order: 1;
}
article {
  order: 2;
}
.sidebar-right {
  order: 3;
}

弹性框和书写模式

本教程中所说的所有内容都适用于LTR（从左到右）写入模式。 Flexbox轴实际上遵循文档的书写方向，可以使用direction和writer -mode属性进行设置。这就是为什么在LTR写入模式下，当flex-direction为row时，主轴从左到右运行。在RTL写入模式下，它以相反的方向（从右到左）运行，其他所有内容都发生相应的变化。