我正在尝试获得像这样的图像(模拟)的结果:
这是我迄今为止尝试过的方法,但显然效果不佳。
.flex-container {
width: 50%;
border: 2px dashed blue;
margin-bottom: 40px;
}
.flex-container > .wrapper {
display: flex;
flex-wrap: wrap;
margin: -5px;
}
.flex-container > .wrapper > input {
flex-basis: 45%;
flex-shrink: 1;
flex-grow: 1;
margin: 5px;
}
.wrapper.alt1 > input {
flex-basis: 50%;
flex-grow: 0;
}
.wrapper.alt2 > input {
flex-basis: 45%;
flex-grow: 0;
}
<div class="flex-container">
<div class="wrapper">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
</div>
</div>
<div class="flex-container">
<div class="wrapper alt1">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
</div>
</div>
<div class="flex-container">
<div class="wrapper alt2">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
</div>
</div>
我得到了一个动态的按钮列表,我更愿意将宽度设置为特定的百分比,而不是将其四舍五入到不太具体的值,只是为了让 flex 盒工作。或者,如果有其他方法将列数设置为特定数字,那就没问题了。
编辑:我正在编辑以指定按钮的数量是动态的,因此它可能是奇数或偶数。对于左对齐示例来说这并不重要,但对于居中最终元素示例来说这可能会出现问题。
最佳答案
为此考虑 CSS 网格:
.container {
width: 50%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
border: 2px dashed blue;
margin-bottom: 40px;
}
input {
grid-column: span 2;
}
.alt :nth-child(odd):last-child {
grid-column: 2/span 2;
}
<div class="container">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
</div>
<div class="container alt">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
</div>
<div class="container alt">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
<input type="button" value="Example">
</div>
关于html - CSS Flexbox(或Grid): 2 columns, 行换行,无增长,内边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59016030/