如何將標籤從頂部移動到左側並以flex形式將輸入保持100％長？

Question

換句話說，如何從這個獲得：

爲了這樣的事情：

換句話說，從輸入的頂部標籤上的標籤同時使輸入符合父寬度。

.row { 
 
     display: flex 
 
    } 
 
    
 
    .form-group { 
 
     display: flex 
 
     flex: 1 0 0 
 
     flex-direction: column 
 
    } 
 
    
 
    .col-12 { 
 
     // 
 
    } 
 
    
 
    .col-6 { 
 
     // 
 
    } 
 
    
 
    .col-4 { 
 
     // 
 
    }

<div class="row"> 
 
    <div class="form-group"> 
 
    <label class="col-6">First name</label> 
 
    <input class="col-6" type="text" value=""></input> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="col-6">Last name</label> 
 
    <input class="col-6" type="text" value=""></input> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="form-group"> 
 
    <label class="col-4">Message</label> 
 
    <input class="col-8" type="text" value=""></input> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="form-group"> 
 
    <label class="col-4">Message</label> 
 
    <input class="col-12" type="text" value=""></input> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="col-4">Message</label> 
 
    <input class="col-12" type="text" value=""></input> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="col-4">Message</label> 
 
    <input class="col-12" type="text" value=""></input> 
 
    </div> 
 
</div>

Answer 1

你並不需要在你的display:flexrow - 宣佈它的form-group就足夠了。然後在子元素上添加相應的彈性屬性（input和label）。

也非常重要：每次聲明後總是插入;，否則你會破壞整個規則塊。

/* essential rules */ 
 
.form-group { 
 
    display: flex; 
 
} 
 
label { 
 
    flex: 0 0 100px; 
 
} 
 
input { 
 
    flex: 1; 
 
} 
 

 

 
/* only for style */ 
 
.form-group { 
 
    margin-bottom:1em; 
 
} 
 
input{ 
 
    padding:.4em; 
 
    border-radius:2px; 
 
    border:1px solid #ccc; 
 
} 
 
label { 
 
    padding:.4em; 
 
    font-family:sans-serif; 
 
}

<div class="row"> 
 
    <div class="form-group"> 
 
    <label class="col-6">First name</label> 
 
    <input class="col-6" type="text" value=""> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="col-6">Last name</label> 
 
    <input class="col-6" type="text" value=""> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="form-group"> 
 
    <label class="col-4">Message</label> 
 
    <input class="col-8" type="text" value=""> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="form-group"> 
 
    <label class="col-4">Message</label> 
 
    <input class="col-12" type="text" value=""> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="col-4">Message</label> 
 
    <input class="col-12" type="text" value=""> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="col-4">Message</label> 
 
    <input class="col-12" type="text" value=""> 
 
    </div> 
 
</div>

注：input s爲無效的元素。他們不採取結束標籤。