【无标题】

父元素display：absolute 子元素flex失效

父元素:

<el-form class="login-form">
        <!-- 用户名 -->
        <el-form-item>
          <el-input/>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item>
          <el-input/>
        </el-form-item>
        <!-- 按钮 -->
       <el-form-item class="login-button">
          <el-button type="primary">登陆</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>  
  </el-form>

使用position: absolute布局

.login-form {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 0 20px;
    box-sizing: border-box;
  }

子元素button

<el-form-item class="login-button">
   <el-button type="primary">登陆</el-button>
   <el-button type="info">重置</el-button>
 </el-form-item>  

使用flex布局，此时justify-content: flex-end未生效

.login-button {
    display: flex;
    justify-content: flex-end;
  }

解决方法：
通过浏览器F12调试，发现justify-content: flex-end;语句加在el-form-item未生效，只有加在button内部样式才有效（el-form-item_content），多种方式尝试后，发现在el-form-item外套一层div，把login-button加给外层可以生效。

<div class="login-button">
   <el-form-item >
      <el-button type="primary">登陆</el-button>
      <el-button type="info">重置</el-button>
    </el-form-item>
 </div>

看了其他的博客，说在外层设置width:100%也可实现，可能为情况不一样，在本例中并未起效。

产生问题的原因还没有弄清，希望可以一起交流学习。