Свойство направления Flex

Question

Может кто-нибудь объяснить, почему в этом случае важно сохранить направление гибкого движения в качестве столбца? Когда вы изменяете его на ряд или наоборот, некоторая часть изображения уменьшается в ширину

JS Fiddle: https://jsfiddle.net/fbshqg0c/7/

.main {
  width: 100%;
}

.left {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  width: 50%;
}

.text {
  display: flex;
  align-items: center;
}

.text-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}

.width100 {
  color: #fff;
  text-align: center;
  width: 100%;
}

<div class="main">
  <div class="left">
    <img src="https://via.placeholder.com/350x150">
    <div class="text text-img-overlay">
      <div class="width100">
        <h1>500x320</h1>
      </div>
    </div>
  </div>
</div>

Answer 1

Это потому, что значение по умолчанию для align-items (выравнивание вспомогательной оси: Y, если направление - строка, или X, когда направление - столбец) - stretch, поэтому при использовании flex-direction: column изображение растягивается по X оси, но когда вы изменяете ее на flex-direction: row, она растягивается по оси Y (вертикальная подгонка, но не горизонтальная).

Вы должны определить width: 100% для изображения.

Answer 2

Я не совсем уверен, что вы имеете в виду, потому что я не увидел никакой разницы, но у вас нет значения ширины для изображения, поэтому, вероятно, это решит вашу проблему.

img {
width: 100%;
}