Vue 表单布局

 Vue代码

    <el-form :inline="true" class="demo-form-inline">
       <el-row :gutter="20" type="flex" justify="space-between">
         <el-col :span="12" style="background-color: coral;">
           <el-form-item label="姓名">
             <el-input></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12" style="background-color: #42b983;text-align:right">
          <el-form-item label="身份证号码">
            <el-input></el-input>
          </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20" type="flex" justify="space-between" >
         <el-col :span="12" style="background-color: coral;">
           <el-form-item label="性别">
             <el-input></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12" style="background-color: #42b983;text-align:right" >
           <el-form-item label="出生日期">
             <el-input></el-input>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>

页面样式：

 form中 :inline="true"代表在一行显示

el-row中 :gutter="20"  代表col中的栅格间距

type="flex" justify="space-between" 组合使用， 两端对其， justify属性还有center，end,space-around

el-col 中:span="12"代表把24平分12格，占row元素的一半。