使用flex布局，有没有简单的方式实现中间有空隙

Question

这是我现在的代码，两个div宽度50%，然后再嵌入div感觉很冗余

<el-form-item style="width:100%;" v-if="loginMode === 'tourist'">
        <div class='btn-login-container'>
          <div class="btn-retry-container">
            <div class="btn-retry" @click="handleLogin">重新登录</div>
          </div>
          <div class="btn-tourist-container">
            <div class="btn-tourist">游客模式</div>
          </div>
        </div>
      </el-form-item>

<style rel="stylesheet/scss" lang="scss">
.btn-login-container {
    display: flex;
    .btn-retry-container {
      width: 50%;
      box-sizing: border-box;
      padding-right: 10px;
      .btn-retry {
        width: 100%;
        background: #409EFF;
        white-space: nowrap;
        cursor: pointer;
        font-weight: 500;
        color: #FFF;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .btn-tourist-container {
      width: 50%;
      box-sizing: border-box;
      padding-left: 10px;
      /*background: #409EFF;*/
      height: 100%;
      .btn-tourist {
        width: 100%;
        background: #409EFF;
        white-space: nowrap;
        cursor: pointer;
        font-weight: 500;
        color: #FFF;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

</style>

Answer 1

justify-content: space-between??
可是你width不是50%?