彈性盒與連續圖像

Question

我正在使用引導面板在一行中顯示三個圖像。假設如果我總共有六個圖像，我想在連續顯示三個圖像，並且隨着我移動滾動條，接下來的三個應該會一個接一個地顯示。

爲了應用滾動條，我做了overflow-x:visible，但沒有任何東西出現在屏幕上。

此外，第四張圖像在連續三張圖像下方。

我該怎麼做才能使圖像水平滾動，同時三個圖像一次顯示在屏幕上？

的codepen鏈接到我的代碼是：Link

Answer 1

這是你在找什麼？

.container { 
 
    display: flex; 
 
    max-width: 225px; 
 
    overflow-x: scroll; 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/75x50/000000"> 
 
    <img src="http://placehold.it/75x50/ff0000"> 
 
    <img src="http://placehold.it/75x50/333333"> 
 
    <img src="http://placehold.it/75x50/00ff00"> 
 
    <img src="http://placehold.it/75x50/666666"> 
 
    <img src="http://placehold.it/75x50/0000ff"> 
 
</div>