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

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

<el-form-item v-if="loginMode === 'tourist'">
<div class='btn-login-container'>
<div>
<div @click="handleLogin">重新登录</div>
</div>
<div>
<div>游客模式</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>

回答

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

如果两个按钮的容器可以固定，那么可以给容器设置justify-content: space-between;，如果不能固定宽度，可以在元素中间加一个固定宽度的<div></div>。如果不考虑换行，那么可以直接给每个按钮（容器）使用css

.button-container:not(:last-child) {
  margin-right: 10px;
}

justify-content: space-between两边对齐
两个按钮宽度小于50%中间就会留出间隙了

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

.btn-login-container {
    display: flex;
    justify-content: space-between;
    .btn-retry{
        width: 40%
    }
}

个人认为使用grid更好一点
gird的使用可以看阮一峰的gird布局

<style rel="stylesheet/scss" lang="scss">
.btn-login-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap:20px;
    .btn-retry-container {
      box-sizing: border-box;
      .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 {
      box-sizing: border-box;
      /*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>

我理解的是你不想额外多一层容器 btn-retry-container 和 btn-tourist-container，那可以这样：

<div class='btn-login-container'>
    <div>重新登录</div>
    <div>游客模式</div>
</div>

.btn-login-container {
    display: flex;
    .btn {
        flex: 1;
        /* 原先的按钮样式 */
    }
    .btn + .btn {
        margin-left: 20px;
    }
}