логическая разница между flex: none и flex: 0 0 100% для мобильных устройств

Question

визуальный вид плитки такой же, как и для всех плиток, но я хотел бы знать, какой из них будет логически правильным для установки 100% ширины плитки с помощью свойства flexbox. где flex: none или flex: 0 0 100%, потому что в соответствии с системой сетки bootstrap4 они использовали flex: 0 0 100%;

img {
  border: 0;
  vertical-align: middle;
  height: 180px;
  overflow: hidden;
  position: relative;
  display: block;
  width: 100%;
}

.flex {
  display: flex;
}

.flex div {
  border: 1px solid;
  max-width: 299px;
}

.auto {
  flex: 0 0 auto;
}

.hund {
  flex: 0 0 100%;
}

.none {
  flex: none;
}
 @media (min-width: 768px) {
  .flex div {
    flex: 0 0 33.3333333%;
    max-width: 33.3333333%;
    
  } 
 }

<div class="flex">
  <div class="auto">
    <img src="https://via.placeholder.com/340x230"> This is flex-basis auto
  </div>
</div>
<div class="flex">
  <div class="hund">
    <img src="https://via.placeholder.com/340x230"> This is flex-basis hund
  </div>
</div>
<div class="flex">
  <div class="none">
    <img src="https://via.placeholder.com/340x230"> This is flex-basis none
  </div>
</div>
<div class="flex">
  <div class="pointless"><img src="https://via.placeholder.com/340x230"> This is flex-basis pointless
  </div>
</div>