我需要这个:
容器宽度固定宽度,元素在行方向流动,最后换行。
每个元素都应该是max-width: 400px
,溢出的内容应该被剪掉。
元素的最小宽度应由内容决定,但是:它绝不能短于 200px
。
这是我的 CSS 代码,它不包括“最小内容”方面。 min-content 由 w3 在他们的 Flexbox 工作草案中建议,但在我的情况下似乎不起作用:
.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>
最佳答案
问题是 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;
}
<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>
关于css - 通过内容或 200px(以较大者为准)与最大宽度一起设置最小宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29289071/