使用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%?

Answer 2

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

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

Answer 3

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

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

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

Answer 4

个人认为使用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>

Answer 5

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

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

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

Answer 6

.btn-login-container{
    display:flex;
}

然后下面两个同级的子类，就是那两个按钮，加一个相同的类名

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

.btn-login-container .btn{
    width: calc(50% - 20px);
    margin-right: calc(20px + 20px / 1); //自己琢磨出来的公式。如果有3个子类就是calc(20px + 20px / 2)
    text-align: center;
    background: blue;
    color: #fff;
}
.btn-login-container .btn:last-child{
    margin-right:0;
}