如何使水平框自动堆叠垂直基于屏幕宽度?

Question

我把这个简单的盒子放在一个有边框的框架中，框架有一个最大宽度

.outer {
display: flex;
max-width: 1000px;
border: 1px solid black;
}
.inner {
min-width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
color: white;
}

<div class='outer'>
<div class='inner'>1</div>
<div class='inner'>2</div>
<div class='inner'>3</div>
<div class='inner'>4</div>
<div class='inner'>5</div>
<div class='inner'>6</div>
<div class='inner'>7</div>

</div>

你可以看到，随着屏幕宽度的减小，盒子会脱离框架。我的问题是，这些盒子能否在框架内自动垂直堆叠，所以当屏幕宽度减小时，7在1下面，然后6在1下面，7在2下面，然后5在1下面，6在2下面，7在3下面，等等。

当屏幕宽度减小到最小值时，只剩下一列，依次垂直排列1,2,3,4,5,6,7。

在实际应用中，我有随机数量的盒子，所以堆栈需要自动。

Answer 1

我想你是在找flex-wrap: wrap;

.outer {
display: flex;
max-width: 1000px;
border: 1px solid black;
flex-wrap: wrap;
}
.inner {
min-width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
color: white;
}

<div class='outer'>
<div class='inner'>1</div>
<div class='inner'>2</div>
<div class='inner'>3</div>
<div class='inner'>4</div>
<div class='inner'>5</div>
<div class='inner'>6</div>
<div class='inner'>7</div>

</div>

Answer 2

使用CSS

flex-direction: column;

你可以从我的来源找到这些和更多:

https://www.w3schools.com/css/css3_flexbox_container.asp

Answer 3

这个问题可以而且应该通过CSS-Grid来解决。这确保了列在任何情况下都得到尊重，并且容器将利用全宽度，而不是由flex-wrap引起的空白(这是@Libra的答案的主要缺点)。

您可以使用auto-fit和minmax值。这将确保元素具有最小宽度，并将占用其余部分。然后，它将尽可能多的元素彼此相邻，并将其他元素推到下一行，但尊重列:

.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
/* for visualization purpsoe only */
.container {
gap: 0.5em;
}
.container > div {
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1;
background: blue;
font-size: 2em;
color: white;
}

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>