我的想法是给出一个自适应div宽度.当我只有一个项目时,宽度应该与容器div中的项目相同.
有关如何做到这一点的任何建议？
示例：http://codepen.io/tomasfrancisco/pen/PNvLLw
HTML：
<div id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div id="container"> <div class="item"></div> </div>
CSS：
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 200px;
padding: 10px;
margin: 20px;
background-color: blue;
}
#container .item {
width: 80px;
height: 50px;
background-color: red;
margin: 10px;
}
解决方法
您可以使用display：inline-flex
#container {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 200px;
padding: 10px;
margin: 20px;
background-color: blue;
}
#container .item {
width: 80px;
height: 50px;
background-color: red;
margin: 10px;
}
<div id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div id="container"> <div class="item"></div> </div>
