未包裝在列方向容器中的Flex項目

我想使用flex-direction:column來獲取特定佈局。未包裝在列方向容器中的Flex項目

我通常使用標準flex-direction:row，所以我有一些問題使用column。我不知道如何控制它，並沒有發現任何有用的谷歌。

我有一個定期UL列表，我想是這樣的：

1 3 5 7 

2 4 6

我目前得到的是這樣的：

我當前的簡化的代碼是這樣的：

.ul{ 
    display: flex; 
    flex-direction: column; 

    li{ 
    width: 25%; 
    } 
}

來源

2016-12-27 Stratboy

上應用總heightul並使之成爲wrap。

然後將flex-basis應用於ul li（這是身高因爲我們已應用flex-direction: column）至50％。像：

ul { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: column; 
    height: 100px; 
} 
ul li { 
    flex-basis: 50%; /* which in this case will be '50px' */ 
}

看一看下面的代碼片段：

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    height: 100px; 
 
} 
 
ul li { 
 
    flex-basis: 50%; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
</ul>

希望這有助於！

來源

2016-12-27 15:48:16

您需要給flex容器一個確定的高度。

沒有容器上的固定高度，項目不知道在哪裏包裝。

您還需要添加flex-wrap: wrap，因爲柔性容器上的初始設置爲nowrap。

來源

2016-12-27 15:44:58

首先你需要設置高度flex-container和flex-wrap: wrap。接下來，您可以在flex-item上設置flex-basis: 50%，那樣會得到理想的結果。

ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 200px; 
 
} 
 
li { 
 
    flex-basis: 50%; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
</ul>

來源

2016-12-27 15:47:00

在ul使用flex-wrap:wrap;。你不需要高度嚴格設置爲一個值，但它的高度不應該能夠包含超過2在同一時間，但應該能夠容納2

li{ 
 
    width:50px; 
 
    list-style-type:none; 
 
    height:50px; 
 
    margin:5px; 
 
    background-color:green; 
 
    color:white; 
 
} 
 
ul{ 
 
    height:150px; 
 
    display:flex; 
 
    flex-direction:column; 
 
    flex-wrap:wrap; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
</ul>

來源

2016-12-27 15:47:09 ab29007

對於列表可以跨越多個列：

您必須指定一個定義高度。
將其設置使用flex-wrap: wrap包（由默認設置爲nowrap）

請參見下面的演示：

ul { 
 
    list-style: none; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 50px; 
 
} 
 
li { 
 
    width: 25%; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
</ul>

來源

2016-12-27 15:49:03 kukkuz

未包裝在列方向容器中的Flex項目

回答

相關問題