如果调整大小，HTML 图像和文本垂直对齐

Question

我正在尝试在其右侧显示图像和文本。我使用代码:

div.out {
  background-color: silver;
  border: 1px solid black;
  padding: 10px;
  display: flex;
}

div.right {
  order: 1;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
  margin-left: 10px;
}

<div class="out">
  <img src="/image/asXsj.jpg" width="40%" height="60%">
  <div class="right">
    A rose is a woody perennial flowering plant of the genus Rosa, in the family Rosaceae, or the flower it bears. There are over a hundred species and thousands of cultivars. They form a group of plants that can be erect shrubs, climbing or trailing with
    stems that are often armed with sharp prickles. Flowers vary in size and shape and are usually large and showy, in colours ranging from white through yellows and reds. Most species are native to Asia, with smaller numbers native to Europe, North America,
    and northwestern Africa. Species, cultivars and hybrids are all widely grown for their beauty and often are fragrant. Roses have acquired cultural significance in many societies. Rose plants range in size from compact, miniature roses, to climbers
    that can reach seven meters in height. Different species hybridize easily, and this has been used in the development of the wide range of garden roses.
  </div>
</div>

当我水平调整窗口大小时，图像和文本都会相应地调整大小。这很好，但我想补充一个事实。如果要将图像调整为低于 250x250 像素，那么它不应低于 250x250，而应将文本显示在其下方。示例:

我该怎么做？谢谢

Answer 1

根据屏幕大小，flexbox 应该换行或不换行。确保指示浏览器如何处理视口(viewport)。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

div.out {
  background-color: silver;
  border: 1px solid black;
  padding: 10px;
  display: flex;
}

div.right {
  order: 1;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
  margin-left: 10px;
}

@media screen and (max-width: 640px) {
  .out {
    flex-wrap: wrap;
  }
}

<div class="out">
  <img src="/image/asXsj.jpg" width="40%" height="60%">
  <div class="right">
    A rose is a woody perennial flowering plant of the genus Rosa, in the family Rosaceae, or the flower it bears. There are over a hundred species and thousands of cultivars. They form a group of plants that can be erect shrubs, climbing or trailing with
    stems that are often armed with sharp prickles. Flowers vary in size and shape and are usually large and showy, in colours ranging from white through yellows and reds. Most species are native to Asia, with smaller numbers native to Europe, North America,
    and northwestern Africa. Species, cultivars and hybrids are all widely grown for their beauty and often are fragrant. Roses have acquired cultural significance in many societies. Rose plants range in size from compact, miniature roses, to climbers
    that can reach seven meters in height. Different species hybridize easily, and this has been used in the development of the wide range of garden roses.
  </div>
</div>