嚴格經由柔性盒

Question

同樣和動態分配寬度如何使用一個柔性箱強制寬度等於分佈不管其內部的內容大小的？

我有ul元素包含三個li元素必須是相等的寬度。如演示中所示，使用flex: 1 0 0無法正常工作。第三個li元素佔據了所有的空間。

UPDATE 該列表是動態創建的，使用Javascript來計算百分比並不是我正在尋找的。

ul { 
 
    list-style: none; 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
    background-color: #F00; 
 
    padding: 2px; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
li { 
 
    background-color: #eee; 
 
    border: 1px solid #000; 
 
    flex: 1 0 0; 
 
}

<ul> 
 
<li>AAAAAAA</li> 
 
<li>BBB</li> 
 
<li>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</li> 
 
</ul>

Answer 1

Flexbox，就不能做到這一點，但還有另一種選擇。

CSS表

當然，如果文本太長，會溢出，我們可以修復與word-break:break-all。

ul { 
 
    list-style: none; 
 
    display: table; 
 
    width: 100%; 
 
    background-color: #F00; 
 
    padding: 2px; 
 
    margin: 0; 
 
    margin-bottom: 10px; 
 
    box-sizing: border-box; 
 
    table-layout: fixed; 
 
} 
 
li { 
 
    display: table-cell; 
 
    background-color: #eee; 
 
    border: 1px solid #000; 
 
    word-break: break-all; 
 
}

<ul> 
 
    <li>AAAAAAA</li> 
 
    <li>BBB</li> 
 
    <li>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</li> 
 
</ul> 
 

 

 
<ul> 
 
    <li>AAAAAAA</li> 
 
    <li>BBB</li> 
 
    <li>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</li> 
 
    <li>DDDDDDDDDDDDDDDDDD</li> 
 
</ul>

Answer 2

使用flex-basis財產。 （這個問題在更新之前這個答案被張貼。）

ul { 
 
    list-style: none; 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
    background-color: #F00; 
 
    padding: 2px; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
li { 
 
    background-color: #eee; 
 
    border: 1px solid #000; 
 
    flex: 1 0 33.33%;    /* adjusted */ 
 
    overflow: hidden;    /* new */ 
 
    box-sizing: border-box;  /* new */ 
 
}

<ul> 
 
    <li>AAAAAAA</li> 
 
    <li>BBB</li> 
 
    <li>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</li> 
 
</ul>