Как получить эффект `column-gap` с помощью` display: flex` в Chrome?

Question

Согласно этому 0 , Chrome не поддерживает column-gap с display: flex.

К сожалению, я должен также поддерживать Chrome.

Какой самый простой способ получить пробел в Chrome, не связываясь с Firefox (который правильно понимает column-gap с display: flex)?

.flex-container {
  display: flex;
  colum-gap: 10px;
  justify-content: space-between;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Вышеприведенное отображение хорошо в Firefox, с промежутком 10px между элементами .flex-item. Chrome не имеет такого разрыва, потому что не может column-gap на display: flex.

Answer 1

Как то так?

.flex-container {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
}
.flex-item {
  flex-basis: 33%;
  height: 30px;
  margin-left: 10px;
  background-color: #cccccc;
  }
.flex-item:first-child{
  margin-left: 0
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>