我已经设置了一系列三个容器并应用了display：flex;和flex-wrap：wrap;对他们来说,但是当我减小窗户尺寸时他们没有包装？
body {
font-family: arial;
}
p {
color: white;
}
.container {
background-color: #666;
width: 800px;
height: 200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
padding: 10px;
Box-sizing: border-Box;
}
.item1 {
flex: 1;
background-color: red;
}
.item2 {
flex: 1;
background-color: blue;
}
.item3 {
flex: 1;
background-color: green;
}
<div class="container">
<div class="item item1">
<h1>ITEM1</h1>
<p>flex: 1</p>
</div>
<div class="item item2">
<h1>ITEM2</h1>
<p>flex: 1</p>
</div>
<div class="item item3">
<h1>ITEM3</h1>
<p>flex: 1</p>
</div>
</div>
解决方法
您需要在容器上使用max-width而不是width,您必须允许容器缩小以包装项目.
body {
font-family: arial;
}
p {
color: white;
}
.container {
background-color: #666;
max-width: 800px;
height: 200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
padding: 10px;
Box-sizing: border-Box;
}
.item1 {
flex: 1;
background-color: red;
}
.item2 {
flex: 1;
background-color: blue;
}
.item3 {
flex: 1;
background-color: green;
}
<div class="container">
<div class="item item1">
<h1>ITEM1</h1>
<p>flex: 1</p>
</div>
<div class="item item2">
<h1>ITEM2</h1>
<p>flex: 1</p>
</div>
<div class="item item3">
<h1>ITEM3</h1>
<p>flex: 1</p>
</div>
</div>
