Flexbox-Flex-Order

Flexbox是指弹性盒子布局，它可以帮助程序员更加简便和快速地完成布局。在这篇文章里，我们将主要讲到Flexbox中的Flex和Order。

Flex

在Flexbox中，Flex是一个弹性盒子的属性，它可以决定弹性盒子的子元素如何分配空间。通过设置Flex属性，我们可以让弹性盒子的子元素自适应父容器的大小变化，从而达到灵活布局的效果。

在CSS中，Flex的语法如下：

flex: [flex-grow] [flex-shrink] [flex-basis];

• flex-grow：定义了子元素的放大比例，默认值为0，也就是子元素不会随着容器的变化而放大。如果改为1，那么子元素会根据父容器的变化自动放大，如果父容器变小则会自动缩小。

• flex-shrink：定义了子元素的缩小比例，默认值为1，也就是子元素会随着容器的变化而相应地缩小。如果改为0，那么子元素将不会跟随父容器的变化而缩小。

• flex-basis：定义了子元素在没有放大或者缩小之前的大小，默认值是auto。

举个例子，假设有一个父容器，里面有三个子元素，想让它们的宽度比例为2:1:1，应该这么写：

.container {
  display: flex;
}

.item-1 {
  flex: 2;
}

.item-2 {
  flex: 1;
}

.item-3 {
  flex: 1;
}

Order

Order是Flexbox中的一个布局属性，它可以决定某个子元素在弹性盒子中的顺序。

在CSS中，Order的语法如下：

order: [number];

其中，number表示子元素的顺序，越小的值排在越前面。如果两个子元素的Order值相同，那么它们的顺序将按照它们在HTML文档中的顺序来排列。

举个例子，假设有一个父容器，里面有三个子元素，想让它们的顺序为3→1→2，应该这么写：

.container {
  display: flex;
}

.item-1 {
  order: 2;
}

.item-2 {
  order: 3;
}

.item-3 {
  order: 1;
}

总结

Flexbox的Flex和Order属性可以帮助我们更好地完成布局。通过掌握这两个属性，我们可以更加灵活地布置弹性盒子中的子元素。