如何用Flex布局实现数据两列交错排列？

巧用Flex布局实现数据两列交错显示

在网页前端开发中，Flexbox布局以其灵活性和易用性而广受欢迎。然而，一些看似简单的布局需求，例如实现两列交错的数据排列，可能会给开发者带来挑战。本文将提供一个简洁有效的解决方案，利用Flexbox轻松实现此效果。

问题描述： 假设需要显示一组数据，例如：左侧显示1, 2, 3, 4, 5, 6，右侧显示7, 8, 9, 10, 11, 12。数据通过循环动态生成。目标是将这些数据以两列交错的方式排列，左右交替向下排列。

解决方案： 关键在于合理运用Flexbox的flex-direction和flex-wrap属性。

通过设置容器的flex-direction为column（垂直排列），并设置flex-wrap为wrap（允许子元素自动换行），即可轻松实现两列交错排列。

以下是一个代码示例：

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.item {
  width: 50%;
  box-sizing: border-box; /* 包含内边距和边框在元素的总宽度内 */
}

将每个数据项用.item类包裹，并设置其宽度为容器的一半（50%）。box-sizing: border-box; 确保内边距和边框不会影响元素的实际宽度计算，从而保证两列对齐。 这样，即使数据项数量不均，也能自动换行并保持两列交错的布局效果。