CSS3 box-direction 属性

CSS3 中新增加了box-direction属性，是用来定义伸展项目的布局方向。设置一个容器中的项目的方向可以使其按照水平线或垂直线轮廓。该属性极大地影响了容器内子元素的布局。

语法

box-direction: normal | reverse | inherit

该属性的值可以是以下三种：

• normal：按照正常顺序排列。
• reverse：按照反转顺序排列。
• inherit：从父元素继承值。

用法

box-direction属性使用在容器元素（display: flex或display: inline-flex）上，用来设定容器内部子元素（Flex容器项目，display: flex-item）的排列方向。

示例：

.box {
  display: flex;
  box-direction: reverse;
}

.box div {
  flex: 1;
}

在上面的代码中，我们设置了box-direction为reverse，这意味着Flex容器项的排列方向是相反的。

注意事项

• box-direction属性只能在 Flex 容器上使用，不适用于 Grid 容器。

• 如果将box-direction设为reverse，则框的主轴被翻转，此时 Flex 容器的行内轴和侧轴同时被翻转。而Flex容器的主轴和侧轴在这种情况下仍然是根据flex的默认布局方向（row或column）计算的。

• 如果Flex容器使用了justify-content或align-content等属性，则box-direction方向对其排列顺序产生影响。

结论

CSS3 box-direction属性是一个用来控制Flex容器内部子元素方向排列的非常有用的CSS属性。它能够很好地协调并同时排列子元素，创造出一种易于布局和管理的环境，这对于构建创新性的网页是非常实用的一种方式。