html - flex 方向属性

Question

有人可以解释一下为什么在这种情况下将 flex 方向保持为列很重要吗？当您将其更改为 row 或 row reverse 时，图像的某些部分的宽度会缩小

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 轴上拉伸(stretch)，但是当您将其更改为 flex-direction: row 时，它会在 Y 轴上拉伸(stretch)(垂直适合，但不是水平的)。

您必须为图像定义 width: 100%。