CSS Flexbox（或网格）：2 列，换行，无增长，内边距

Question

我正在尝试获得类似这张图片的结果（模拟）：

这是我迄今为止尝试过的，但它显然不能正常工作。

.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>

我得到了一个动态的按钮列表，我更愿意将宽度设置为特定的 %，而不是为了让 flexbox 工作而将其向下舍入到不太具体的值。或者，如果有另一种方法可以将列数设置为特定的数字，那也可以。

编辑：我正在编辑以指定按钮的数量是动态的，因此它可能是奇数或偶数。对于左对齐的示例，这无关紧要，但对于居中的最终项目示例，这可能会出现问题。

Answer 1

为此考虑 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>

Answer 2

将边距放在一边，使用 flex: 0 0 calc(50% - 5px); 作为项目宽度，使用 justify-content: space-between; 作为 flex 父级。

要获得最后一个元素居中的第二个版本，您可以简单地设置其侧边距auto。

.flex-container {
	width: 50%;
	border: 2px dashed blue;
	margin-bottom: 40px;
}
.flex-container > .wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: -10px;
}
.flex-container > .wrapper > input {
	flex: 0 0 calc(50% - 5px);
	margin-top: 10px;
}

/*
  make that
  .flex-container > .wrapper.alt1 > input:nth-child(odd):last-child
  actually, so that it only applies to last child when it's an odd one
*/
.flex-container > .wrapper.alt1 > input:last-child {
	margin: 10px auto 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>

如果 wrapper 的负 margin-top 会影响布局的其余部分，您也可以取消前两项的 margin-top，

.flex-container > .wrapper > input:nth-child(1),
.flex-container > .wrapper > input:nth-child(2) {
  margin-top:0;
}