Question

我在Flex容器的右侧项目上有一个图像。正如您在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%;
}

Codepen： https://codepen.io/neilem/pen/zjpXKZ

Answer 1

您可以使用vertical-align代替display，然后使用text-align：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

在容器上使用justify-content属性，并从flex-child中删除flex属性。您的代码将如下所示。希望结果是你想要的。

class ArtistListFragment : AbstractBoundFragment(),
    ArtistListScreen {

    @Inject
    override lateinit var presenter: ArtistsPresenter // type error here
    override lateinit var binding: FragmentArtistListBinding // and type error here

    override fun getBinding(inflater: LayoutInflater, container: ViewGroup?): FragmentArtistListBinding {
        return FragmentArtistListBinding.inflate(inflater, container, false)
    }

    override fun showArtist(artistName: String) {
        // do stuff
    }

}

Flexbox - 右侧图像

2 个答案: