Flexbox中心溢出列彼此相邻

Question

我想创建3列，但如果列数不是3的倍数，我希望溢出/提醒列居中而不是左对齐。

我让它与其余的工作区分开来，在前3个下面浮动的2列相对于div.hold而不是上面的行居中。

如果它固定5列的一个例子;

.col-md-4
.col-md-4
.col-md-4
.col-md-4 .offset-md-2
.col-md-4 .offset-md-2

这是我到目前为止所拥有的。

https://jsfiddle.net/m16yctyd/5/

.hold {
  width: 800px;
  margin: 0px auto;
  background: #ccc;
}

ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  list-style: none;
}

li {
  width: 33.333%;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  margin: 30px auto;
}

li:nth-child(1) {
  background: red;
}

li:nth-child(2) {
  background: yellow;
}

li:nth-child(3) {
  background: green;
}

li:nth-child(4) {
  background: blue;
}

li:nth-child(5) {
  background: orange;
}

<div class="hold">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

Answer 1

您可以使用justify-content: center，但您还需要从flex-items中左右移除margin。

＆＃13;

＆＃13;

.hold {
  margin: 0px auto;
  background: #ccc;
}
ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding-left: 0;
}
li {
  flex: 0 0 33%;
  text-align: center;
  margin: 30px 0;
}
li:nth-child(1) {background: red}
li:nth-child(2) {background: yellow}
li:nth-child(3) {background: green}
li:nth-child(4) {background: blue}
li:nth-child(5) {background: orange

＆＃13;

<div class="hold">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;