Question

以下CSS / HTML给了我我想要的结果-连续三个框，中间的框具有固定的宽度，外面的框消耗（等量）两侧的空间：

#container {
  display: flex;
}
#container > * {
  background: #efefef;
}
#container .fixed-width-40px {
  width: 40px;
  background: #ccc;
}
.fill-available-horizontal-space {
  flex-grow: 1;
}
<div id="container">
    <div class="fill-available-horizontal-space">aaa</div>
    <div class="fixed-width-40px">bbb</div>
    <div class="fill-available-horizontal-space">ccc</div>
</div>

但是，如果我在第三个框中添加表单（以及其中的文本输入字段），则第三个框会变宽，第一个框会变短。

我希望第一个和第三个框保持相等的宽度，但是文本输入字段的介绍却毁了这个。

请您知道我该如何克服吗？

<div id="container">
    <div class="fill-available-horizontal-space">aaa</div>
    <div class="fixed-width-40px">bbb</div>
    <div class="fill-available-horizontal-space">
        <form>
            <input type="text" name="test"/>
        </form>
    </div>
</div>

Answer 1

关键是“弹性增长：1；”在您要填充可用空间的孩子中。

* {
  box-sizing: border-box;
}
#container {
  display: flex;
}
#container > * {
  background: #efefef;
}
#container .fixed-width-40px {
  width: 40px;
  background: #ccc;
}
.fill-available-horizontal-space {
  flex-grow: 1;
  width: 50%;
}
input {
  width: 100%;
  padding: .5rem;
}

<div id="container">
    <div class="fill-available-horizontal-space"></div>
    <div class="fixed-width-40px">bbb</div>
    <div class="fill-available-horizontal-space"><input></div>
</div>

当flexbox包含文本输入字段时，如何防止它变宽？

1 个答案: