在flexbox中创建元素的动态宽度

Question

嗯,我对弹性不好,因为我不经常使用它,但我认为没有其他方法可以实现这一点.我想制作一个简单的表格,它的右侧有描述和输入的标签.此描述可以具有任何大小,输入将增加其大小以满足父级.这是代码:

div {
    display: flex;
    width: 300px;
    margin-bottom: 20px;
    border: 1px solid red;
}
label {
    height: 21px;
    line-height: 21px;
    font-size: 14px;
    color: black;
    flex: 1;
}
input {
    margin-left: 20px;
    flex: 1;
}

<div>
    <label>Company</label>
    <input type="text">
</div>
<div>
    <label>Street</label>
    <input type="text">
</div>
<div>
    <label>Who are you?</label>
    <input type="text">
</div>

它应该是这样的:

Answer 1

您只需将flex属性设置label为:flex: 0 1 auto.这意味着:flex-grow: 0,flex-shrink: 1 flex-basis: auto

div {
    display: flex;
    width: 300px;
    margin-bottom: 20px;
    border: 1px solid red;
}
label {
    height: 21px;
    line-height: 21px;
    font-size: 14px;
    color: black;
    flex: 0 1 auto;
}
input {
    margin-left: 20px;
    flex: 1;
}

<div>
    <label>Company</label>
    <input type="text">
</div>
<div>
    <label>Street</label>
    <input type="text">
</div>
<div>
    <label>Who are you?</label>
    <input type="text">
</div>