css flex - 在 div 之间留出间隙

Question

在横向模式下，我需要在不使用边框或类似东西的情况下在两列之间分隔/制作一个间隙(大约 10-20 像素)。我尝试了一切，但仍然无法正常工作，我错过了什么？我尝试放置 margin，但没有帮助，解决这个问题的最佳方法是什么？

@media screen and (min-width: 567px) {
  .container {
    display: flex;
    flex-flow: row wrap;
  }
  .container li {
    flex-basis: 50%;
    max-width: 50%;
  }
}

.item {
  display: flex;
  align-items: center;
  padding-top: 5px;
}

.title {
  font-weight: 500;
  font-size: 22px;
  padding-bottom: 18px;
}

.item-image {
  flex-basis: 85px;
  min-width: 85px;
  padding-bottom: 30px;
}

.item .item-image img {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  width: 100%;
}

.item .item-info {
  border-bottom: 1px solid rgb(207, 206, 206);
  padding-bottom: 20px;
  flex-basis: 100%;
  margin-left: 15px;
}

<ul class="container">
  <li>
    <div class="item">
      <div class="item-image">
        <a href="">
          <img src="root-icon.png" alt="">
        </a>
      </div>
      <div class="item-info">
        <div class="item-title">Something</div>
        <div class="item-subtitle">Something</div>
        <div class="item-button-container">
          <a class="button" href="#">GET</a>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div class="item-image">
        <a href="">
          <img src="root-icon.png" alt="">
        </a>
      </div>
      <div class="item-info">
        <div class="item-title">Something</div>
        <div class="item-subtitle">Something</div>
        <div class="item-button-container">
          <a class="button" href="#">GET</a>
        </div>
      </div>
    </div>
  </li>
</ul>

Answer 1

只需将类似gap: 5px 的内容添加到您的容器中，使用flex 布局

感谢@AbsoluteBeginner，并非所有地方都支持此功能。看这里:https://caniuse.com/flexbox-gap