创建一个弹性框，旁边有文本和图像

Question

我正在尝试创建一个弹性盒，旁边有图像和文本。 我不确定为什么图像没有与文本对齐？文本类型堆叠在图像下方。

我试图使文本和图像在桌面的同一行中对齐。 在响应式中，我希望图像位于顶部，文本位于底部。

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 80%;
  margin: auto;
  background: #f2f2f2;
  padding: 0px 25px;
  box-shadow: 0.1rem 0.1rem 0.2rem 0 rgb(0 0 0 / 40%);
  font-size: 1.125rem;
  min-height: 375px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(127, 127, 127, 1);
}

<div class="flex-container">
  <div class="flex-item1">
    <p><img src="/image1.png" style=" float: right; padding-left: 20px;"></p>
  </div>
  <div class="flex-item2">
    <h2>Test</h2>
    <ul>
      <li>Test1</li>
      <li>Test2</li>
      <li>Test3</li>
      <li>Test4</li>
      <li>Test5</li>
    </ul>
  </div>
</div>

Answer 1

只需删除 flex-direction:column;和浮动：右；您已经使用过 flex 包装，因此它将在小屏幕上包装，并且您不需要 p 标签 好的，我使用了 flex-reverse 并将 flex 1 添加到了第二个 div

.flex-container {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  width: 80%;
  margin: auto;
  background: #f2f2f2;
  padding: 0px 25px;
  box-shadow: 0.1rem 0.1rem 0.2rem 0 rgb(0 0 0 / 40%);
  font-size: 1.125rem;
  min-height: 375px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(127, 127, 127, 1);
}

.flex-item2{flex:1;}

<div class="flex-container">
  <div class="flex-item1">
    <img src="https://th.bing.com/th/id/OIP.6QVXHtV8VbGGXMF5RDWWNwAAAA?pid=ImgDet&w=373&h=560&rs=1" >
  </div>
  <div class="flex-item2">
    <h2>Test</h2>
    <ul>
      <li>Test1</li>
      <li>Test2</li>
      <li>Test3</li>
      <li>Test4</li>
      <li>Test5</li>
    </ul>
  </div>
</div>

Answer 2

我已经在这个JSfiddle中尝试过你的代码。当您移动中间滑块时，它确实会响应地工作。你有一些内联CSS，我删除了它，一切似乎都工作正常。也许容器的宽度存在问题，这导致响应能力仅在视口小得多时才起作用。 注意：我使用了随机的在线图像进行测试

编辑：另请注意，如果您想更改项目的顺序，只需更改它们在 HTML 中的位置，因为这将是最简单的

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80%;
  margin: auto;
  background: #f2f2f2;
  padding: 0px 25px;
  box-shadow: 0.1rem 0.1rem 0.2rem 0 rgb(0 0 0 / 40%);
  font-size: 1.125rem;
  min-height: 375px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(127, 127, 127, 1);
}

img {
  max-height: 200px;
}

<div class="flex-container">
  <div class="flex-item1">
    <p><img src="https://www.shutterstock.com/image-vector/short-custom-urls-url-shortener-600w-2233924609.jpg"></p>
  </div>

  <div class="flex-item2">
    <h2>Test</h2>

    <ul>
      <li>Test1</li>

      <li>Test2</li>

      <li>Test3</li>

      <li>Test4</li>

      <li>Test5</li>
    </ul>
  </div>
</div>