Question

当我将窗口调整为较小的分辨率时，我希望最后一个元素居中。我知道我可以通过将父justify-content参数设置为space-around或center来实现这一点，但必须将其设置为：space-between。

＆＃13;

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: rgba(255, 0, 0, 0.3);
  padding: 0;
}
li {
  list-style-type: none;
  display: inline-block;
  min-width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
}

＆＃13;

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

＆＃13;

http://jsfiddle.net/k7fzdn80/

Answer 1

使用自动保证金

margin: 10px auto;

这是你所期望的吗？ Solution

Answer 2

很遗憾，flexbox无法解决您的问题。但我有一个CSS黑客来解决这个问题。定位media-query中的最后一个元素。我在下面使用了自定义断点。

＆＃13;

 ul {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   background: rgba(255, 0, 0, 0.3);
   padding: 0;
 }
 li {
   list-style-type: none;
   display: inline-block;
   min-width: 100px;
   height: 100px;
   background: red;
   margin: 10px;
 }
 @media (min-width: 376px) and (max-width: 494px) {
   li:last-child {
     margin: 10px auto;
   }
 }

＆＃13;

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

＆＃13;

Answer 3

这是不可能的。 space-between definition说

如果[...]该行只有single flex项，则此值与'flex-start'相同。

唯一的方法是手动进行对齐，例如媒体查询和自动边距。但是布局根本不会灵活。

使用Flexbox居中最后一行元素

3 个答案: