防止在可滾動的柔性容器和垂直空間柔性物品中收縮

我想在單行上顯示它們（最終在容器上有一個水平滾動條）或者包裝成多行。

我以爲使用Flexbox佈局模塊。兩個例子在這個位置可見：

.single-line { 
 
    border: solid 1px blue; 
 
    width: 50%; 
 
    overflow-x: scroll; 
 
} 
 
.wrap-line { 
 
    border: solid 1px green; 
 
    width: 50%; 
 
} 
 
ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-around; 
 
} 
 
.single-line ul { 
 
    flex-wrap: nowrap; 
 
} 
 
.wrap-line ul { 
 
    flex-wrap: wrap; 
 
} 
 
li { 
 
    display: block; 
 
    width: 40px; 
 
    height: 40px; 
 
    background: gray; 
 
    text-align: center; 
 
    border: solid 1px red; 
 
    line-height: 40px; 
 
}

<div class="single-line"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    </ul> 
 
</div> 
 

 
<br> 
 

 
<div class="wrap-line"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    </ul> 
 
</div>

jsFiddle：

最重要的代碼如下：

ul { 
    display: flex; 
    flex-direction: row; 
    justify-content: space-around; 
} 

.single-line ul { 
    flex-wrap: nowrap; 
} 

.wrap-line ul { 
    flex-wrap: wrap; 
}

這是接近我想要什麼但有一些問題：

第一個示例收縮內部塊，因此容器不可滾動。如何解決這個問題？
在第二個示例中，如何在行之間添加垂直分隔，但不在容器的邊緣添加垂直分隔？我想過margin-bottom每個LI但這不是正確的解決方案（我不能設置集裝箱固定高度）

來源

2016-12-21 Luca Detomi

你是否想要製作一個網格？如果這樣做，你可以使用一些小技巧：用與列寬相同的空白div填充網格（div必須等於網格將具有的最大列數-1）。檢查[這個小提琴]（https://jsfiddle.net/guzgarcia/n7j7afma/1/）（調整輸出大小）。 –

這是一個有趣的解決方案，不是我需要的，但肯定有人會發現它很有用 –

請不要在同一問題中提出多個問題 – Oriol

我做了這樣的事情：https://jsfiddle.net/yduhj30L/18/ flex-shrink: 0使得該撓性元件可以溢出。

另一方面，我只將margin-top設置爲一個元素，並將位置設置爲flex-end。

編輯：將項目對齊到flex-start使滾動的項目可以訪問。

來源

2016-12-21 13:24:35 Ula

感謝'flex-shrink：0'解決方案。請你能解釋一下爲什麼'flex-end'允許整個第二行與第一行相隔？如果超過2行？帶有柔性端部元件的 –

定位到容器的底部並且邊緣保持第一條線位於頂部。 – Ula

好的，太棒了，但是隻有當包裝成2行時，它才能正確運行。在3或更多的情況下...它不會產生良好的佈局... :-( –

您已經爲第一個問題提供答案。

關於第二個，你需要的只是一個小技巧。

在所有項目上設置頁邊空白。

要隱藏第一行的這一頁邊距，請爲ul設置相同金額的負邊距。由於你具有外容器，所述UL坐在所需上部magin量此容器外部是不可見

懸停UL收縮並測試它

.wrap-line { 
 
    border: solid 1px green; 
 
    width: 70%; 
 
    transition: width 5s; 
 
} 
 

 
.wrap-line:hover { 
 
    width: 30%; 
 
} 
 
ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-around; 
 
} 
 
.wrap-line ul { 
 
    flex-wrap: wrap; 
 
    margin-top: -10px; /* added */ 
 
} 
 
li { 
 
    display: block; 
 
    width: 40px; 
 
    height: 40px; 
 
    background: gray; 
 
    text-align: center; 
 
    border: solid 1px red; 
 
    line-height: 40px; 
 
    margin-top: 10px; /* added */ 
 
}

<div class="wrap-line"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    </ul> 
 
</div>

來源

2016-12-21 17:13:53 vals

防止在可滾動的柔性容器和垂直空間柔性物品中收縮

回答

相關問題