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

image

这是我现在的代码,两个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>
阅读 7.5k
6 个回答

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

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

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

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%
    }
}

个人认为使用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-containerbtn-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;
    }
}
.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;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题