如何居中柔性容器，但左alignmentFlex项目

我想弹性项目居中，但当我们有第二行，有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/

Answer 1

Flexbox挑战与限制

面临的挑战是将一组弹性物品居中，并将其左alignment。 但是，除非每行有固定数量的盒子，并且每个盒子都是固定宽度，否则目前Flexbox无法使用。

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

然后， ul的flex项目可以与justify-content: flex-start左alignment。

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

这将创build一个左alignment的Flex项目的居中组。

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

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

1. 不知道什么时候一个元素包装;
2. 不知道以前占用的空间现在是空的，
3. 不重新计算其宽度以缩小包装较窄的布局。

右边的空白的最大长度是容器预期在那里的Flex项目的长度。

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

DEMO

---

更实用的方法

使用inline-block和媒体查询可以实现所需的布局，而无需使用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; } } 

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

DEMO

---

其他选项

• 正确调整和alignment最后一行的弹性项目

• Desandro砌体

  砌体是一个JavaScript网格布局库。 它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像镶嵌在墙上的石匠。 你可能已经看到它在互联网上使用。

  ^{来源： http : //masonry.desandro.com/}

• CSS网格布局模块1级

  这个CSS模块定义了一个二维的基于网格的布局系统，为用户界面devise进行了优化。 在网格布局模型中，网格容器的子节点可以定位到预定义的灵活或固定大小的布局网格中的任意槽中。

  ^{来源： https ： //drafts.c​​sswg.org/css-grid/}