html - css flex 收缩容器宽度以适应其元素

Question

我在 flex div 中显示相同大小的元素列表。我已将它们对齐到左侧。但是我希望列表作为一个整体居中。有关如何执行此操作的任何建议？

请尝试在下方截图。

$('button').click(function(){
  $('.list').toggleClass('hack')
});

.item {
      width: 40px;
      height: 40px;
      background-color: skyblue;
      border: 1px solid black;
    }
    .list-container {
      width: 100px;
      background-color: grey;
      flex-direction: row;
      display: flex;
    }
    .spacer {
      flex: 1;
    }
    .list.hack {
      width: 84px;
    }
    .list {
      display: inline-flex;
      flex-direction: row;
      flex-wrap: wrap;
      background-color: yellow;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='list-container'>
  <div class='spacer'></div>
  <div class='list'>
    <div class='item'></div><div class='item'></div>
    <div class='item'></div><div class='item'></div>
    <div class='item'></div>
  </div>
  <div class='spacer'></div>
</div>

<button>Toggle fixed list width (hack)</button>

Answer 1

我认为最好的方法是将“item”元素插入到新的 div 中，设置:

  <div style="margin:0 auto;width: 85px;">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

同时应用 .item{float:left;}