我想使用 `flex-basis` 属性在元素之间创建间距。这样做可以让我在不考虑 `flex-direction` 的情况下保持元素之间的间隔。
有没有解决方案或变通方法?
当使用 `flex-direction: column` 时,这种方法非常有效;但是当使用默认值 `flex-direction: row` 时,行中的最后一个项目会溢出并被裁剪。
完整的工作示例在此处:https://codepen.io/anon/pen/NVxaoy
input {
margin: 0;
}
.field {
display: flex;
}
.field.stacked {
flex-flow: column;
}
.label {
display: flex;
}
.spacer.x1 {
background: green;
flex: 0 0 8px;
}
.spacer.x2 {
background: red;
flex: 0 0 16px;
}
<h1>Horizontal</h1>
<div class="field">
<label class="label">
<input type="checkbox">
<div class="spacer x1"></div>
<div class="text">Apple</div>
</label>
<div class="spacer x2"></div>
<label class="label">
<input type="checkbox" />
<div class="spacer x1"></div>
<div class="text">Banana</div>
</label>
<div class="spacer x2"></div>
<label class="label">
<input type="checkbox" />
<div class="spacer x1"></div>
<div class="text">Orange</div>
</label>
</div>
<h1>Stacked</h1>
<div class="field stacked">
<label class="label">
<input type="checkbox">
<div class="spacer x1"></div>
<div class="text">Apple</div>
</label>
<div class="spacer x2"></div>
<label class="label">
<input type="checkbox" />
<div class="spacer x1"></div>
<div class="text">Banana</div>
</label>
<div class="spacer x2"></div>
<label class="label">
<input type="checkbox" />
<div class="spacer x1"></div>
<div class="text">Orange</div>
</label>
</div>