Question

我在flex div中显示相同大小的项目列表。我把它们对齐到了左边。不过，我希望整个列表能够集中在一起。有关如何做到这一点的任何建议吗？

请尝试在下面剪断。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我认为最好的方法是插入＆＃34;项目＆＃34;元素到新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;}

Answer 2

将 justify-content：center; 设置为 .list 时，这还不够？

然后，如果您需要将独立项目对齐到左侧，您可以设置其 margin-right：42px; （以补偿其旁边的空间）

Answer 3

您可以在不使用flex

的情况下执行相同的操作

<强> HTML

  <div class='list'>
    <div class='item'>item 1</div><div class='item'>item 2</div>
    <div class='item'>item 3</div><div class='item'>item 4</div>
    <div class='item'>item 5</div>
  </div>

<强> CSS

.list{
     display:inline-block;
     background-color: grey;
     width:100px;
     clear:both;
     justify-content: center;
}

.list .item{
    float:left;
    width:48%;
    background-color: skyblue;
    height: 40px;
    border: 1px solid black;

}
.list .item:last-child{
    margin-left:25%;
}

点击here获取JSFiddle示例

css flex收缩容器宽度以适合其项目

3 个答案: