在flexbox

Question

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

看起来应该是这样的：

Answer 1

您只需将label的flex属性设置为：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>

Answer 2

只需将flex-order添加到标签和输入标签即可 见http://codepen.io/tantata/pen/KNoMWQ

div {
    display: flex;
    width: 300px;
    margin-bottom: 20px;
    border: 1px solid red;
    flex-wrap:nowrap;
}
label {
    height: 21px;
    line-height: 21px;
    font-size: 14px;
    color: black;
    flex-grow: 0;
}
input {
    margin-left: 20px;
    flex-grow: 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>