如何使柔性箱体与垂直流动一起工作？

我喜欢为web完成以下水平布局，其中用户将使用水平滚动而不是垂直滚动。如何使柔性箱体与垂直流动一起工作？

源代码类似于以下内容：

<html> 
<head><title>Sample</title></head> 
<body> 
<main> 
    <section class="cover"></section> 
    <section> 
    <h1>Title</h1> 
    <div class="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p> 
    </div> 
</section> 
<section> 
    <h2>Page2</h2> 
    <img src="someimage.jpg" alt="Some Title"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p> 
</section> 
</main> 
</body> 
</html>

我认为这将是通过设置主易display : flex，因为我不知道有多少列将有我只会设置section pcolumn-width : 600px。我希望该部分的容器能够获得尽可能多的宽度，但它不起作用。取决于垂直流动内容，容器变得更大，而不是依赖于垂直流动内容，容器变得很小，并且因为它将低于600px，所以只有一列，其余的内容向下流动。

我喜欢容器给用户尽可能多的列需要呈现的内容和它的父容器增长的宽度尽可能多的需要持有的内容。

来源

2016-07-27 Mark

您可以在Flex的容器设置固定height和使用flex-direction: column与flex-wrap: wrap

main { 
 
    display: flex; 
 
    height: 400px; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
} 
 
.content { 
 
    display: flex; 
 
} 
 
.content p { 
 
    flex: 1; 
 
    margin: 20px; 
 
}

<main> 
 
    <section class="cover"></section> 
 
    <section> 
 
    <h1>Title</h1> 
 
    <div class="content"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat 
 
     massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit 
 
     laoreet semper ut placerat eros.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat 
 
     massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit 
 
     laoreet semper ut placerat eros.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat 
 
     massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit 
 
     laoreet semper ut placerat eros.</p> 
 
    </div> 
 
    </section> 
 
    <section> 
 
    <h2>Page2</h2> 
 
    <div class="content"> 
 
     <img src="http://placehold.it/350x350"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat 
 
     massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit 
 
     laoreet semper ut placerat eros.</p> 
 
    </div> 
 
    </section> 
 
</main>

来源

2016-07-27 14:11:39

为什么我还没有将其标记为一个答案，只是还没有的原因是，我还在研究你提出的答案。它将所有段落放在一起，而期望的行为是它应该将所有段落放在彼此之下，直到到达底部，然后继续放在旁边的新列中。但也许这是一个好的方向。 – Mark

问题是你有CSS列宽看起来很理想，但只看宽度，并尝试自动计算它需要的列。不过，如果我可以给它列高和列宽，它会更好。所以它会尝试使用列宽的宽度将列填充到列高的高度。当到达结尾时，它会添加另一列，列宽和列高。 – Mark

我也看了一下CSS区域，但是你必须在正手上定义它们，但是因为我不知道正面的文章大小，所以它没用。 – Mark

如何使柔性箱体与垂直流动一起工作？

回答

相关问题