使用Flexbox的中心div

我正在嘗試使用Flexbox將外部「div」容器居中。我有一個無序列表3 li's。 li's的寬度是：width: calc(100%/3)。 ul's寬度爲70%。問題是，當我嘗試集中ul（justify-content: center）時，它不會居中。使用Flexbox的中心div

我終於想出了問題的根源。當我刪除該行：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>

來源

2015-10-23 Jessica

當我刪除行：寬度：理論值（100％/ 3），它集中正確

你不應該計算在您使用flex佈局的寬度，因爲那是什麼flex本身應該這樣做。

如果您正在尋找對齊文本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>

來源

2015-10-23 08:13:21 Abhitalks

我怎樣才能讓它們的寬度都一樣，只有3列？ – Jessica

@Jessica：默認情況下，它們的寬度與我的答案中的第一種情況相同。你的意思是連續只有3個？根據你的問題，你只有3個「李」。你有不確定數量的「李」嗎？你想把這些'li's連續包裝3個？如果是的話，那麼你應該在你的問題中明確指出它。請更新你的問題，幷包括所有必要的細節，你到底想要做什麼。我仍然不確定你的用例。您尚未澄清我的答案中的哪兩個案例適合您的使用案例。 – Abhitalks

我修改你的代碼：

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>

來源

2015-10-23 08:01:17

感謝您的回答！但我正在嘗試以＃flexContainer爲中心＃ – Jessica

試試這個：

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

來源

2015-10-23 12:41:08 Paul

使用Flexbox的中心div

回答

相關問題