未包装在列方向容器中的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项目

回答

相关问题