所以我有3个FlexBox和flex项目在他们里面。我需要他们在左边，就像下面的图像：

但是由于某种原因，我的图像和标题被粘住在右边，甚至不能与align-items对齐。 所以我有了下面的结果：

我不确定这里有什么问题，我试着做float：left for image,但它不动。

art_container是一个巨大的容器，里面有3个flexbox-art_block和flex项。

edit:所以我发现我有另一种用于外部容器的图像样式，我想这可能会影响我的flex图像:

.article img{
    position: absolute;
    top:0;
    right:0;
}

.art_container {
  position: relative;
  top: 10%;
  left: 0;
  /* transform: translateY(30%) translateX(30%); */
  width: 100vh;
  height: 110vh;
  background-color: white;
}

.art_block {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  min-width: 100%;
  height: 300px;
  background-color: black;
  border-bottom: 1px solid white;
}

.art_block img {
  flex: 1 1 auto;
  width: 300px;
  height: 200px;
  object-fit: cover;
  border: 2px solid red;
}

.art_block h2 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  font-family: "Open Sans", sans-serif;
}

所以这是一个更大的div的样式，里面是我的art_container，现在我想知道，我如何使。art_container img样式不受。article img样式的影响？

顺晟科技：

有时最好的策略就是退后一步，简化一下。我不知道为什么在图像和容器上有所有的固定大小，但这可能没有必要。如果您考虑到了最小尺寸，请使用其他方法来确保这一点，例如使用媒体查询将其换行为垂直。您越灵活，布局就越简单。

这是一个开始。

只需使用，以便图像和文本保持在同一行。 我已经为您的文本添加了一个，以便您可以在