如何在flexbox段落中提取图像？

Question

我想创建一个简单的段落，右侧浮动图像，文字围绕图像。

我以为我可以用Flexbox做到这一点。

以下是我的尝试：

＆＃13;

＆＃13;

<div style="display: flex; justify-content: flex-start; width: 100%">
  <img src="https://unsplash.it/g/400/400?image=1029" style="margin-left: auto">
  <p>
    New York City has a population of approximately 8.2 million people. The New York Metropolitan Area, which spans lower New York, northern New Jersey, and southwestern Connecticut, has a population of 18.7 million, making it the largest metropolitan area
    in the U.S. As of 2014, it was one of the 15 largest metro areas in the world.
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

但是这会产生这种错误的结果：

如何让图片浮动？

Answer 1

这实际上是使用float属性的教科书案例：

＆＃13;

＆＃13;

img {
  float: right;
}

＆＃13;

<div>
  <img src="https://unsplash.it/g/400/400?image=1029">
  <p>
    New York City has a population of approximately 8.2 million people. The New York Metropolitan Area, which spans lower New York, northern New Jersey, and southwestern Connecticut, has a population of 18.7 million, making it the largest metropolitan areain the U.S. As of 2014, it was one of the 15 largest metro areas in the world. New York City has a population of approximately 8.2 million people. The New York Metropolitan Area, which spans lower New York, northern New Jersey, and southwestern Connecticut, has a population of 18.7 million, making it the largest metropolitan areain the U.S. As of 2014, it was one of the 15 largest metro areas in the world. New York City has a population of approximately 8.2 million people. The New York Metropolitan Area, which spans lower New York, northern New Jersey, and southwestern Connecticut, has a population of 18.7 million, making it the largest metropolitan areain the U.S. As of 2014, it was one of the 15 largest metro areas in the world.
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle

使用flexbox，您可以将图像对齐，但不能让文本环绕它：

＆＃13;

＆＃13;

div {
  display: flex;
}

img {
  order: 1;
}

＆＃13;

<div>
  <img src="https://unsplash.it/g/400/400?image=1029">
  <p>
    New York City has a population of approximately 8.2 million people. The New York Metropolitan Area, which spans lower New York, northern New Jersey, and southwestern Connecticut, has a population of 18.7 million, making it the largest metropolitan areain
    the U.S. As of 2014, it was one of the 15 largest metro areas in the world. New York City has a population of approximately 8.2 million people. The New York Metropolitan Area, which spans lower New York, northern New Jersey, and southwestern Connecticut,
    has a population of 18.7 million, making it the largest metropolitan areain the U.S. As of 2014, it was one of the 15 largest metro areas in the world. New York City has a population of approximately 8.2 million people. The New York Metropolitan Area,
    which spans lower New York, northern New Jersey, and southwestern Connecticut, has a population of 18.7 million, making it the largest metropolitan areain the U.S. As of 2014, it was one of the 15 largest metro areas in the world.
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

刚刚将order: 2添加到img

＆＃13;

＆＃13;

div img {
  order: 2
}

＆＃13;

<div style="display: flex; justify-content: flex-start; width: 100%">
  <img src="https://unsplash.it/g/400/400?image=1029" style="margin-left: auto">
  <p>
    New York City has a population of approximately 8.2 million people. The New York Metropolitan Area, which spans lower New York, northern New Jersey, and southwestern Connecticut, has a population of 18.7 million, making it the largest metropolitan area
    in the U.S. As of 2014, it was one of the 15 largest metro areas in the world.
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

正如另一个答案所说，这恰好是float属性的用途。如果 想要使用Flexbox执行此操作，您可以使用：

flex-direction: row-reverse

导致＆＃34; flexed＆＃34;中的每个块级别项目元素从右到左显示。