Flex 容器使我的 div 無法轉到下一行

Question

我是 flex 容器的新手，但我試圖擁有一個帶有 justify: space-around 的容器，並且里面有一些 div。 如果屏幕太小，內部 div 應該間隔到下一行，但內部 div 固執地保持在同一行上，只是奇怪地調整它們的寬度。

.container{
  display: flex;
  justify-content: space-around;
}
.inner-div{
  width: 40%;
  display: inline-block;
}

你會認為如果我在容器中有三個內部 div，第三個就會轉到下一行，考慮到它們都有寬度：40%，但它們保持在同一行並擠壓第一個然后第二個 div .

Answer 1

flex-wrap:wrap; 在這種情況下會起作用。

CSS flex-wrap屬性用於指定是否將 flex 項強制為一行或多行。 flex-wrap屬性允許啟用線條堆疊的控制方向。 它用於指定單行或多行格式以在 flex 容器內彈性項目。

語法： flex-wrap: nowrap|wrap|wrap-reverse|initial;

Answer 2

將您的flex-wrap設置為wrap 。 一個小時前我剛剛回答了同樣的問題。 https://stackoverflow.com/a/59553958/1195615

Answer 3

在其他方面，我建議您使用媒體查詢而不是 flex，這樣您就可以控制不同的分辨率/設備大小。