一、Flexbox布局简述
Flexbox布局是CSS3的一种新的可伸缩、自适应的布局方式，它可以帮助我们更加方便地对容器中的子元素进行布局和对齐。它包含了容器（flex container）和项目（flex item）两个部分。在Flexbox布局中，我们可以对容器进行一些属性的设置，例如容器的方向（row/column），对容器上的子项进行对齐、布局等操作。
容器的主轴（main axis）和交叉轴（cross axis）是非常重要的概念，主轴通常与flex-direction有关。比如当flex-direction为row时，主轴为水平方向；当flex-direction为column时，主轴为竖直方向。而交叉轴则与主轴垂直，它的方向与主轴相反。
Flexbox布局在实际应用中可以极大地简化我们的CSS代码。可以通过使用Flexbox可以更容易地实现一些复杂的布局，例如居中对齐、三等分网格等。在Flexbox布局中，我们可以使用flex属性、align-items属性、justify-content属性等来对Flexbox容器元素进行定位、尺寸调整和对齐操作。
二、Flexorder简介
Flexorder是一种用于为Flexbox的项目元素设置排序的CSS属性，它允许我们更加精确地控制Flexbox的元素的顺序和布局。使用Flexorder可以让我们轻松地移动、调整Flexbox容器中的各个项目元素，可以轻松实现某些特殊布局需求。对于一些需要在不同屏幕宽度上对Flexbox容器中的项目进行重新排序的场景，Flexorder可以神奇地解决这些问题。
Flexorder属性允许我们通过设置正整数为项目元素进行排序，它的默认值为0。通过设置不同的正整数数值可以对Flexbox容器中的项目元素进行排序，并且仍然保持原有的弹性盒子布局的特性（Flexbox）。Flexorder是一种强大的工具，可以为我们带来更加灵活的的样式布局选择，并且可以简化和加速我们的CSS代码编写。
三、Flexorder的使用方法
Flexorder是一种比较简单的属性，我们可以通过在CSS中设置Flexbox的项目元素的order属性来使用它。Flexorder属性的默认值为0，通过设置不同的正整数值，可以对Flexbox容器中的项目元素进行排序。
.example{
display: flex;
justify-content: space-between;
}
.example li:first-child {
order: 3;
}
.example li:last-child {
order: 1;
}
.example li:nth-child(2) {
order: 2;
}
在上面的CSS代码块中，我们使用了Flexbox容器和项目元素的基本样式，然后为每个项目元素使用了不同的order属性值。这个样式会将第一个项目元素放到第三个位置，第三个元素作为第一项。
四、Flexorder的使用建议
Flexorder虽然非常方便，但也应该慎用。Flexorder属性被应用在每一个项目元素上，那么如果项目数量太多，那么交换它们的位置将需要更多的计算，可能会降低网站的性能。另外需要注意的是，一旦Flexorder被应用于一个Flexbox容器，那么就必须在所有设备上保持这个顺序。否则根据它们的顺序可能会在某些特定设备中出问题。
因此，当我们真正需要使用Flexorder时，应该仔细考虑每个项目元素所占用的位置和原始订单，并尝试使用更好的标签分组和语义来避免Flexorder的使用。而在Flexorder避免不了的情况下，我们应该将Flexorder属性尽可能地使用在较少的项目元素上，同时使用唯一的、特殊的自定义类名来为Flexorder属性命名，这样可以尽可能地减少性能上的影响。
