Question

我正试图将外部＆＃39;容器使用Flexbox。我有一个3 li's的无序列表。 li's宽度为：width: calc(100%/3)。 ul's宽度为70%。问题在于，当我尝试将ul（justify-content: center）居中时，它并不会居中。

我终于找到了问题的根源。当我删除该行：width: calc(100%/3)时，它会正确居中。我的问题是：我怎样才能让它正确居中？

我尝试了margin: auto，但这没有用。

此处为JSFiddle，以及此处的代码段：

＆＃13;

#flex-container {
  width: 70%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-justify-content: center;
  justify-content: center;
}
li {
  box-sizing: border-box;
  background-color: tomato;
  width: calc(100%/3);
}

＆＃13;

<ul id="flex-container">
  <li class="flex-item">First</li>
  <li class="flex-item">Second</li>
  <li class="flex-item">Third</li>
</ul>

＆＃13;

Answer 1

当我删除行：width：calc（100％/ 3）时，它正确居中

使用flex布局时，不应计算宽度，因为这是flex本身应该做的事情。

如果您希望将li s内的文字对齐，那么text-align就是您所需要的。您还应该从width中删除li，然后使用flex属性。

<强>段：

＆＃13;

* { box-sizing: border-box; padding: 0; margin: 0; }
#flex-container {
    list-style-type: none;
    width: 70%; display: flex; 
}
li {
    flex: 1 1 auto;
    background-color: tomato; border: 1px solid #fff;
    text-align: center;   
}

＆＃13;

<ul id="flex-container">
    <li class="flex-item">First</li>
    <li class="flex-item">Second</li>
    <li class="flex-item">Third</li>
</ul>

＆＃13;

如果您希望宽度li变宽，那么justify-content就是您所需要的。您应该通过width属性控制宽度，并根据需要使用flex属性进行扩展或缩小。

<强>段：

＆＃13;

* { box-sizing: border-box; padding: 0; margin: 0; }
#flex-container {
    list-style-type: none; width: 70%;
    display: flex; justify-content: center;
    background-color: #eee;
}
li {
    flex: 0 0 auto; width: 15%;
    background-color: tomato; border: 1px solid #fff;
}
li:first-child { width: 20%; }
li:last-child { width: 30%; }

＆＃13;

<ul id="flex-container">
    <li class="flex-item">First</li>
    <li class="flex-item">Second</li>
    <li class="flex-item">Third</li>
</ul>

＆＃13;

Answer 2

我修改了你的代码：

http://jsfiddle.net/hrr65ajr/2/

#flex-container {
    width: 70%;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-justify-content: center;
    justify-content: center;
}
li {
    box-sizing: border-box;
    background-color: tomato;
    margin: auto;
    width: calc(100%/3);
    text-align: center;
}

<ul id="flex-container">
    <li class="flex-item">First</li>
    <li class="flex-item">Second</li>
    <li class="flex-item">Third</li>
</ul>

Answer 3

试试这个：

<强> HTML

<div class="center">
<ul id="flex-container">
    <li class="flex-item">First</li>
    <li class="flex-item">Second</li>
    <li class="flex-item">Third</li>
</ul>
</div>

<强> CSS

.center {
    display:flex;
    -webkit-justify-content: center;
    justify-content: center;
}
#flex-container {
    width: 70%;
    list-style-type: none;
    padding: 0;
    margin: auto 0;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-justify-content: center;
    justify-content: center;
}
li {
    box-sizing: border-box;
    background-color: tomato;
    width: calc(100%/3);
}

使用Flexbox的中心div

3 个答案: