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

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

重新登录

游客模式

.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;

}

}

}

回答

justify-content: space-between??

可是你width不是50%?

如果两个按钮的容器可以固定，那么可以给容器设置justify-content: space-between;，如果不能固定宽度，可以在元素中间加一个固定宽度的

.button-container:not(:last-child) {

margin-right: 10px;

}

justify-content: space-between两边对齐

两个按钮宽度小于50%中间就会留出间隙了

重新登录

游客模式

.btn-login-container {

display: flex;

justify-content: space-between;

.btn-retry{

width: 40%

}

}

个人认为使用grid更好一点

gird的使用可以看阮一峰的gird布局

.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;

}

}

}

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

重新登录

游客模式

.btn-login-container {

display: flex;

.btn {

flex: 1;

/* 原先的按钮样式 */

}

.btn + .btn {

margin-left: 20px;

}

}