如何使柔性箱體與垂直流動一起工作？

我喜歡爲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

如何使柔性箱體與垂直流動一起工作？

回答

相關問題