我的 flexbox 之间的垂直分隔线 - CSS

在使用Flexbox布局时，经常需要在item之间添加分隔线。其中一种类型的分隔线是垂直分隔线，它能够将item在垂直方向上分隔开来。这种分隔线在实际应用中非常常见，例如网格系统、表格等等。

方法1：使用伪元素添加分隔线

这是一种使用伪元素实现垂直分隔线的方法。该方法需要在父元素上设置position: relative，然后使用::before或者::after添加分隔线。在这个例子里，我们使用::after来添加分隔线。代码如下：

.container {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: gray;
}

方法2：使用border-right添加分隔线

这是一种使用border-right实现垂直分隔线的方法。该方法在item上设置border-right，然后在最后一个item上移除border-right。代码如下：

.item {
  border-right: 1px solid gray;
}
.item:last-child {
  border-right: none;
}

方法3：使用flex-basis添加分隔线

这是一种使用flex-basis实现垂直分隔线的方法。该方法在item上设置flex-basis，并使用calc函数来计算分隔线的宽度。代码如下：

.container {
  display: flex;
  justify-content: space-between;
}
.item {
  flex-basis: calc(100% / 3 - 1px);
  /* 3是item的数量，1px是分隔线的宽度 */
  border-right: 1px solid gray;
}
.item:last-child {
  border-right: none;
}

以上是三种实现垂直分隔线的方法，你可以根据需求选择适合自己的方法。在实际应用中，我们还可以通过改变分隔线的颜色、宽度、样式等来满足不同的需求。