使用Flexbox的中心div

Question

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

我终于想出了问题的根源。当我删除该行：width: calc(100%/3)时，它正确居中。我的问题是：我怎样才能让它正确居中？我试过margin: auto，但是没有奏效。

这里的JSFiddle，和这里的代码片段：

#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); 
 
}

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

Answer 1

当我删除行：宽度：理论值（100％/ 3），它集中正确

你不应该计算在您使用flex布局的宽度，因为那是什么flex本身应该这样做。

1. 如果您正在寻找对齐文本li S的内部，然后text-align是你所需要的。您还应该从li中删除width，并使用flex属性代替。

段：

* { 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; 
 
}

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

如果你正在寻找具有可变的宽度li当时的justify-content是你需要什么。您应该通过width属性控制宽度，并根据需要使用flex属性来展开或缩小。

段：

* { 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%; }

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

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