使用 Flexbox 居中最后一行元素答案

【问题标题】：Center last row element using Flexbox使用 Flexbox 居中最后一行元素
【发布时间】：2015-07-06 22:37:04
【问题描述】：

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

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

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

http://jsfiddle.net/k7fzdn80/

【问题讨论】：

不是this你想要的吗？
不，正如我所说：ul 的 justify-content 必须是空格。

标签： css flexbox

【解决方案1】：

使用自动边距

margin: 10px auto;

这是你所期望的吗？ Solution

【讨论】：

不完全是。我希望顶行中的左侧元素最大程度地与左侧对齐，而右侧元素最大程度地与右侧对齐。在您的解决方案中，元素和边距之间仍有空间。
这个 CSS 属性，应用于最后一个元素，可以解决问题。谢谢！

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

如果 [...] 行中只有一个 single flex 项目，则此值等同于'flex-start'。

唯一的方法是手动对齐，例如带有媒体查询和自动边距。但是这样布局就完全不灵活了。

【讨论】：