CSS flex-wrap: положить пробел между элементами, если не обернут?

Question

Я часто сталкиваюсь с этим сценарием, где у меня есть, например, 2 flex-children, со свойством flex-direction row.поэтому они сначала показываются рядом с зазором между ними (поле справа).

И изменением размера, как только не останется свободного места для обоих, flex-wrap перемещает второго потомка подпервый, так что мне больше не нужно поле справа от 1. item.

Могу ли я динамически устанавливать поля в зависимости от статуса "wrap"?

Fiddle : https://jsfiddle.net/ejmhxztd/

Fiddle Примечание. Необходимо изменить размер окна (уменьшить ширину) и увидеть завернутый футляр.Если вы продолжите уменьшать ширину, вы увидите, что текст первого дочернего элемента также будет разбит на 2 строки, поскольку поле margin-right находится здесь и занимает пробел.

.parent {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap
}

.child1 {
  margin-right:300px
}

<div class="parent">
   <span class="child1">Child1 Text</span>
   <span class="child2">Child2 Text</span>
</div>

Answer 1

Для этого можно попробовать использовать CSS-сетку:

.parent {
  display:grid;
  grid-column-gap:300px;
  grid-template-columns:repeat(auto-fit,minmax(100px,max-content));
}
.parent > * {
  border:1px solid;
}

<div class="parent">
   <span class="child1">Child1 Text</span>
   <span class="child2">Child2 Text</span>
</div>