html – flex-wrap无法正常工作
发布时间:2020-12-14 18:46:12 所属栏目:资源 来源:网络整理
导读:我已经设置了一系列三个容器并应用了display:flex;和flex-wrap:wrap;对他们来说,但是当我减小窗户尺寸时他们没有包装? 我已经把代码放在下面,似乎无法解决问题的根源. body { font-family: arial;}p { color: white;}.container { background-color: #666
我已经设置了一系列三个容器并应用了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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |