CSS Flex - сделать разрыв между DIV

Question

В ландшафтном режиме мне нужно разделить / сделать промежуток (около 10-20 пикселей) между двумя столбцами без использования рамки или чего-либо подобного. Я попробовал все, и это все еще не работает, что я пропускаю? Я пытался поставить margin s, но это не помогает, как лучше это решить?

@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

Добавьте margin-right к элементу, если вы хотите придерживаться flexbox. В противном случае - попробуйте css grid, очень просто с разницей в сетке, чтобы добавить нужный вам разрыв.

https://www.w3schools.com/css/css_grid.asp

Answer 2

Вы можете добавить это правило CSS:

ul.container > *:nth-child(odd) .item-info {
  margin-right: 50px;
}

Это добавляет правую пометку к каждой нечетной .item-информации (или точнее: к каждому .item-info внутри каждого нечетного прямого дочернего элемента .container элемент)

@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.container > *:nth-child(odd) .item-info {
  margin-right: 50px;
}

<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>