我已经设置了一系列三个容器并应用了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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。