帶有無序列表的Flexbox

Question

我正在學習flexbox，我非常喜歡它。我正在嘗試使用動態寬度進行播放，當我使用div進行播放時，它可以正常工作。如果我嘗試用李的方式來做，它不會起作用。我的代碼是codepen。

div.example 
    ul 
    li 
     | 1 
    li 
     | 2 
    li 
     | 3 
    li 
     | 4 
    li 
     | 5 
    li 
     | 6 

div.container 
    div.col 
    | 1 
    div.col 
    | 2 
    div.col 
    | 3 
    div.col 
    | 4 
    div.col 
    | 5 
    div.col 
    | 6 

SASS代碼

.container { 
    border: 1px solid #000; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    width: 50%; 

    .col { 
    width: calc(100%/3); 
    height: 120px; 
    text-align: center; 
    } 
} 

.example { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    width: 50%; 
    border: 1px solid #000; 
    margin: 1em 0; 

    ul { 
    width: 100%; 
    padding-left: 0; 
    } 

    li { 
    list-style: none; 
    display: inline-block; 
    width: calc(100%/3); 
    height: 120px; 
    text-align: center; 
    } 
} 

Answer 1

您需要將柔性屬性應用於<ul>

ul { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

把上<div>屬性告訴它顯示在柔性的<ul>，不<li>。

Answer 2

根據您的標記，請注意<li>元素是<ul>的孩子，而不是.example分割元件。

<div class="example"> 
    <ul> 
    <li>1</li> 
    </ul> 
</div> 

由於<li>元件的直接父是<ul>，請使用<ul>的flex屬性是圍繞所述多個包裹外<div>元件代替<li>元件：

.example { 
    width: 50%; 
    border: 1px solid #000; 
    margin: 1em 0; 

    ul { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    width: 100%; 
    padding-left: 0; 
    } 

    li { 
    list-style: none; 
    display: inline-block; 
    width: calc(100%/3); 
    height: 120px; 
    text-align: center; 
    } 
} 

http://codepen.io/anon/pen/NGPBbg