Flexbox或项目是用来在其中包含HTML内容的。一个CSS的flex属性被用来在flex item上应用flex长度的效果。层叠样式表提供了用于安排柔性项目的顺序属性。要应用顺序属性，flexbox内的项目应该是灵活的。否则，该属性将不会受到影响。
弹性创建和排序
在这个例子中，我们使用了一个简单的div，在其内部进一步添加div，形成了一个嵌套的div现象。外层 div 被称为 Flexbox，以其内部的几个内容为例。它们的外层 div 是主 div，在它里面承载着几个 div。它被声明为一个CSS类，以便对其应用一些CSS效果。这个类在head部分用style标签描述，形成一个内部CSS。
在该div内部，又声明了四个div。每个div都指的是单一的flex。我们将在此添加内联样式，为每个flex添加颜色。每个div也被进一步输入了CSS ids。这些所有的id负责在以适当顺序排列的flex上应用所有效果。
CSS ids和类
在这一点上，有必要详细说明一下CSS的这两个术语。在我们讨论被影响的CSS属性时，这些id和class在对HTML内容应用任何效果时都起着至关重要的作用。每当我们谈论内部和外部的CSS时，我们就会遇到id和class。这些ID和类对正文部分所声明的内容具有颜色、文本样式、尺寸和许多其他效果。为了从类和id中获取这些效果，我们需要提到它们在内容标签中的命名，就像 "一 "这个id一样。 而从第一到第四的所有id也都被声明了。
再来看看HTML代码，这里与每个内部的div或flex，我们也使用了会更清楚显示顺序的文本。这发生在通过将flex按适当的顺序排列而形成的句子中。flex的顺序方向是用户的选择。我们可以对flex进行随机编号。这些flexboxes是在对其应用CSS样式时形成的。现在，让我们考虑一下CSS代码。
我们将首先声明属于style标签内的外部div的id。这个div将指定所有内部div的形成区域。我们将为这个id添加宽度、高度和边界属性。用来形成flex的一个重要特征是 "显示 "效果。因为这个属性被移除，简单的矩形将在网页上形成。这些柔性将通过使用这个显示属性形成。
#one {
Display: flex ;}
Flex通常在水平方向上从左到右形成。好了，这是对外层div而言。为了给所有内层div或flex添加尺寸，我们将使用id为 "one "的div。这些属性包括单个块或flex的宽度和高度。单个内层div的高度等于外层div的高度。而外部div的宽度则被划分到所有四个内部div中。这是通过在标签内声明每个flex重新访问的id描述来完成的，每个flex的id名称不同。每个div的名称是根据顺序给出的。例如，第一个div包含的顺序为1。在CSS或HTML中以何种顺序声明代码并不重要，但顺序号将决定每个flex的顺序。
Div#first{
order: 1
}
关闭所有的标签。现在，用HTML扩展名保存代码，将其作为文本和网页打开。
在执行时，在浏览器内，你会看到你所定义的每个内部div或flex的顺序与各自的颜色块一起显示，使flex的顺序正确。此外，与每个内部div标签一起添加的文本描述了该句子是通过按顺序排列的flex形成的。这表明我们所提到的顺序得到了准确的遵循。
Flex的反向顺序
有了flexbox和flex创建，可以看到在代码中不需要提到任何flex流。默认情况下，柔性流是水平方向的，顺序也是按照描述的方式进行的，即默认的升序顺序。但是，一旦你在flex创建中声明了flex的顺序，你可以通过提及flex的方向来扭转它。
#one {
Flex-direction:row-reverse;
}
此属性被添加到flexbox或外部div中，因为它负责在其内部包含内部flex。而如果你想使用默认的顺序，请完全删除这个方向属性，或者将flex-direction添加为 "行"。这将使升序再次出现。
在执行过程中，你会看到所有柔性的顺序都被颠倒了，你可以通过柔性的颜色清楚地看到，句子的文字也相应地被颠倒。
垂直弯曲
正如我们之前所描述的，柔性的方向没有被描述。默认情况下，它是在水平方向上有一个单列和多行。但是，要做一个垂直的flex，那么flexbox的方向要从行改为列。
#one {
Flex-direction:column;
}
通过使用这一功能，将形成一个垂直的flexbox，所有的flex div都是完整的，而且所有flex的顺序都是一样的。
重新排序的 Flexbox
Flexbox可以通过指定盒子内的任何一个flex来重新排序，使其位于第一个位置。我们选择了第3个，它的顺序为-1，文本颜色从黑色变为红色，大小也增加了，以区别于其他。
这第三个柔性将被从订单列表中删除。通过这样做，顺序将不会被保持。将会出现在第一个位置的盒子会扰乱整个div的顺序。
在执行过程中，你会看到第一个区块被向右移动，以便为第三个区块形成一个位置。这样一来，我们就可以通过指定任何一个flexbox来重新排序。
总结
在这篇文章中，我们试图通过创建一个flexbox和其中的flex内容来描述CSS的flex order属性。灵活性顺序的应用是通过向灵活性添加颜色和文本，显示我们所提到的顺序被保持。此外，我们还可以通过在反向顺序中提及flex-direction流来扭转顺序。水平方向是flex的默认方向；它也可以通过改变列中的行方向来改变垂直方向。所有这些效果都是通过使用指定的代码来解释柔性顺序的概念。
.
