Revision history [back]

There are a few ways to eliminate the line that separates flex items in CSS:

1. Using negative margins: You can apply negative margins to the flex items, which will cause them to overlap, effectively removing the line between them.

.flex-container {
  display: flex;
}

.flex-item {
  margin-right: -1px;
}

1. Using box-shadow: You can apply a box-shadow to the flex container, which will create a shadow effect that hides the line between the items.

.flex-container {
  display: flex;
  box-shadow: 0 0 0 1px white;
}

1. Using border-collapse: You can apply the border-collapse property to the flex container and set it to collapse, which will remove the border between the items.

.flex-container {
  display: flex;
  border-collapse: collapse;
}

.flex-item {
  border: 1px solid black;
}