如何将弹性容器居中但左对齐弹性项目

Question

我希望 flex 项目居中但是当我们有第二行时，有 5 个（来自下图）低于 1 并且不在父项中居中。

这是我所拥有的示例：

 ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  border: 1px solid gray;
  margin: 15px;
  padding: 5px;
  width: 200px;
}

 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

http://jsfiddle.net/8jqbjese/2/

原文由 Etienne Noël 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Flexbox 挑战与局限

挑战在于将一组弹性项目居中并将它们左对齐。但是除非每行有固定数量的盒子，并且每个盒子都是固定宽度的，否则目前使用 flexbox 是不可能的。

使用问题中发布的代码，我们可以创建一个新的 flex 容器来包装当前的 flex 容器（ ul ），这将允许我们将 ul 与 justify-content: center 。

然后 ul 的弹性项目可以与 justify-content: flex-start 左对齐。

 #container {
    display: flex;
    justify-content: center;
}

ul {
    display: flex;
    justify-content: flex-start;
}

这将创建一组居中的左对齐弹性项目。

这种方法的问题是，在某些屏幕尺寸下， ul 的右侧会有一个间隙，使其不再居中显示。

发生这种情况是因为在 flex 布局（实际上，通常是 CSS）中，容器：

1. 不知道元素何时换行；
2. 不知道以前占用的空间现在是空的，并且
3. 不会重新计算其宽度以收缩包装较窄的布局。

右边空白的最大长度是容器期望在那里的弹性项目的长度。

在下面的演示中，通过水平调整窗口大小，您可以看到空格来来去去。

演示

---

更实用的方法

使用 inline-block 和 media queries 可以在没有 flexbox 的情况下实现所需的布局。

HTML

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

CSS

 ul {
    margin: 0 auto;                  /* center container */
    width: 1200px;
    padding-left: 0;                 /* remove list padding */
    font-size: 0;                    /* remove inline-block white space;
                                        see https://stackoverflow.com/a/32801275/3597276 */
}

li {
    display: inline-block;
    font-size: 18px;                 /* restore font size removed in container */
    list-style-type: none;
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
}

@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width:600px;  } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }
@media screen and (min-width: 1031px) and (max-width: 1230px) { ul { width: 1000px; } }

上面的代码呈现了一个水平居中的容器，其中的子元素左对齐，如下所示：

演示

---

其他选项

• 在最后一行正确调整弹性项目的大小和对齐

• 德桑德罗砌体

Masonry 是一个 JavaScript 网格布局库。它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像泥瓦匠在墙上安装石头。您可能已经在整个 Internet 上看到过它的使用。

来源：http: //masonry.desandro.com/

• CSS 网格布局模块级别 1

这个 CSS 模块定义了一个基于网格的二维布局系统，针对用户界面设计进行了优化。在网格布局模型中，网格容器的子项可以放置在预定义的灵活或固定大小布局网格中的任意槽中。

来源： https ://drafts.csswg.org/css-grid/

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 CSS Grid 实现它，只需使用 repeat(autofit, minmax(width-of-the-element, max-content))

 ul {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
       grid-gap: 16px;
       justify-content: center;
       padding: initial;
}

li {
    list-style-type: none;
    border: 1px solid gray;
    padding: 5px;
    width: 210px;
}

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

http://jsfiddle.net/rwa20jkh/

原文由 Joe82 发布，翻译遵循 CC BY-SA 4.0 许可协议