Flexbox - 图像在右侧

Question

我在弹性容器的右侧项目上有一个图像。正如您在codepen中看到的那样，扩展屏幕时会出现间隙（由图像上的最大宽度引起，这是不可避免的）。

然而，我只是想将该图像移动到最右侧，因此间隙不那么明显。

这个需要对IE11友好，图片需要响应式。如果可能的话，我想避免在图像上使用浮动（我会认为有一种更干净的方法可以使用 Flexbox 来实现此目的）？

HTML：

<div class="container">
  <div class="image">
    <img src="http://www.stevensegallery.com/1000/1400">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda.
  </div>
</div>

CSS：

.container {
  background-color: red;
  display: flex;
  flex-direction: row-reverse;
}
.container > .image {
  flex: 1 0 0%;
}
.image > img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}
.container > .text {
  flex: 2 0 0%;
}

代码笔： https: //codepen.io/neilem/pen/zjpXKZ

Answer 1

您可以vertical-align改为使用display，然后text-align：

.container {
  background-color: red;
  display: flex;
  flex-direction: row-reverse;
}
.container > .image {
  flex: 1 0 0%;
  text-align:right;/* and here*/
}
.image > img {
  vertical-align:top;/* here */
  max-width: 100%;
  max-height: 300px;
}
.container > .text {
  flex: 2 0 0%;
  /* and eventually */
  
  margin:auto 0;
}

<div class="container">
  <div class="image">
    <img src="http://www.stevensegallery.com/1000/1400">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda.
  </div>
</div>