使用flex-basis时Flex项溢出 [英] Flex item overflowing when using flex-basis

问题描述

我想使用flex-basis属性在元素之间创建间隔符.这样做可以使我在元素之间保持空间，而不必考虑弯曲方向".

I want to create spacers between elements using the flex-basis property. Doing this will allow me to maintain space between elements regardless of the ´flex-direction`.

这在使用flex-direction: column时效果很好，但是在使用flex-direction: row(默认值)时，行中的最后一项溢出并且被裁剪.

This works pretty well when using flex-direction: column, but when using flex-direction: row (default value), the last item in the row is overflowing, and cropped.

此处的完整示例: 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>

是否有解决方案或解决方法?

Is there a solution or work around to this?

推荐答案

老实说，我不确定为什么会发生这种裁剪，但是您可以通过更改间隔符以使用width而不是flex

I am honestly not sure why this cropping occurs but you can work around it by changing your spacers to use width instead of flex

input { margin: 0 }

.field {
  display: flex;
}

.field.stacked {
  flex-flow: column;
}

.label {
  display: flex;
}

.spacer.x1 {
  background: green;
  width: 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>

这篇关于使用flex-basis时Flex项溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！