我需要这个:
容器宽度固定宽度,物品沿行方向流动并在末端包裹。
每个项目应为max-width: 400px
,应删除溢出的内容。
项目的最小宽度应由内容决定,但:它不应小于200px。
这是我的CSS代码,它没有涵盖“min-content”方面。 w3在他们的flexbox工作草案中建议使用min-content,但在我的情况下它似乎不起作用:
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.container .box {
-webkit-flex: 1;
flex: 1;
min-width: 200px;
max-width: 400px;
height: 200px;
background-color: #fafa00;
overflow: hidden;
}
和html是:
<div class="container">
<div class="box">
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
<div class="box">
<table>
<tr>
<td>Content</td>
</tr>
</table>
</div>
<div class="box">
<table>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
[...]
</div>
答案 0 :(得分:65)
问题在于flex: 1
设置flex-basis: 0
。相反,你需要
.container .box {
min-width: 200px;
max-width: 400px;
flex-basis: auto; /* default value */
flex-grow: 1;
}
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.container .box {
-webkit-flex-grow: 1;
flex-grow: 1;
min-width: 100px;
max-width: 400px;
height: 200px;
background-color: #fafa00;
overflow: hidden;
}
&#13;
<div class="container">
<div class="box">
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
<div class="box">
<table>
<tr>
<td>Content</td>
</tr>
</table>
</div>
<div class="box">
<table>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
</div>
&#13;