如何证明单个弹性框项目（覆盖justify-content） [英] How to justify a single flexbox item (override justify-content)

问题描述

您可以覆盖 align-items 与 align-self 一个flex项目。
我正在寻找一种方法来覆盖一个flex项目的 justify-content 。

You can override align-items with align-self for a flex item. I am looking for a way to override justify-content for a flex item.

有一个flexbox容器与 justify-content：flex-end ，但你想要的第一个项目 justify-content：flex-start ，怎么办？

If you had a flexbox container with justify-content:flex-end, but you want the first item to be justify-content: flex-start, how could that be done?

这是最好的回答这个帖子：http://stackoverflow.com/a/33856609/269396

This was best answered by this post: http://stackoverflow.com/a/33856609/269396

推荐答案

没有似乎是 justify-self ，但你可以实现类似的结果设置适当 margin 到 auto ¹。 E. flex-direction：row （默认）你应该设置 margin-right：auto

There doesn't seem to be justify-self, but you can achieve similar result setting appropriate margin to auto¹. E. g. for flex-direction: row (default) you should set margin-right: auto to align the child to the left.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

¹此行为是由Flexbox规范。

这篇关于如何证明单个弹性框项目（覆盖justify-content）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！