生成Flex项目在列方向容器包装

所以，使用行布局中的所有我需要做的包装元素在Flex DIV是这样的：生成Flex项目在列方向容器包装

div { 
 
    display: flex; 
 
    flex-direction: row; /* I want to change this to column */ 
 
    flex-wrap: wrap;  /* wrap doesn't seem to work on column, only row */ 
 
}

<div> 
 
    <p>these</p> 
 
    <p>will</p> 
 
    <p>wrap</p> 
 
</div>

这适用于我的行，但我想使它适用于我的列。

我试着改变flex-direction到column，但它似乎没有工作。有谁知道如何获得这个功能？

来源

2017-05-07 Frank

行工作原理是，当项目达到视/容器它所包装的宽度，但对于列，自视不具有高度（默认是'auto'），它会继续增长，所以为了实际包裹，它需要一个设定的高度。 – LGSon

啊，你很聪明。我在父元素上设置了高度，但不是直接在我的弹性盒上。我只是把它设置为继承，瞧！有用！非常感谢！这是否意味着视口只跟踪宽度而不是高度？ – Frank

是的，一个页面的正常流向下，因此它会简单地开始滚动时，内容变得很大，横向它不 – LGSon

块级元素默认占用其包含块的全部宽度。实际上，这解析为width: 100%，其在水平方向上设置内容流的中断。

因此，flex项目可以默认包装在行方向容器中。

但是，HTML或CSS中的任何内容都不会在块级元素上设置默认高度。高度由内容驱动（height: auto）。

这意味着元素将垂直流动，而不会有任何理由中断。

（我猜某处演化线，可能可用性研究的基础上，会议决定，这将是好的Web应用程序的垂直扩展，而不是水平。）

这就是为什么Flexbox的没有按不会自动在列方向上包装物品。它需要作者定义的高度作为突破点。

但是，通常情况下，布局的高度是动态的，因此无法设置特定的高度。这使得flexbox无法用于在列方向上打包项目。一个伟大的选择是CSS Grid Layout，不需要高度设置在容器上：

div { 
 
    display: grid; 
 
    grid-gap: 10px; 
 
} 
 

 
p:nth-child(3n + 1) { 
 
    grid-row: 1; 
 
    background-color: aqua; 
 
} 
 

 
p:nth-child(3n + 2) { 
 
    grid-row: 2; 
 
    background-color: orange; 
 
} 
 

 
p:nth-child(3n + 3) { 
 
    grid-row: 3; 
 
    background-color: lightgreen; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    padding: 10px; 
 
}

<div> 
 
    <p>ONE</p> 
 
    <p>TWO</p> 
 
    <p>THREE</p> 
 
    <p>FOUR</p> 
 
    <p>FIVE</p> 
 
    <p>SIX</p> 
 
    <p>SEVEN</p> 
 
    <p>EIGHT</p> 
 
    <p>NINE</p> 
 
</div>

浏览器支持CSS电网

铬 - 全力支持2017年3月8日（版本57）
Firefox - 2017年3月6日全面支持（版本52）
野生动物园 - 全力支持2017年3月26日（10.1版）
边缘的 - 完全支持为2017年10月16日（16版）
IE11的 - 当前规范不支持;支持过时版本

下面是完整的画面：http://caniuse.com/#search=grid

来源

2017-05-07 17:09:54

谢谢，我会试试看。我目前正在使用'writing-mode：vertical-lr'和'flex-direction：row'来避免flexbox不适合包装内容的小错误，并且我在flexbox上设置了一个高度以获取要包装的内容。 – Frank

生成Flex项目在列方向容器包装

回答

相关问题