Flex方向属性

Question

请问有人可以解释为什么在这种情况下将弯曲方向保持为柱是否重要？当您将其更改为行或行反向时，图像的某些部分会缩小宽度

JS小提琴：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%;
}