我需要设置动态框。 示例我有div包装器和内部，示例三个div。 每一个div里面有10px的边距，我想用开始，结束，第一个和最后一个框中间的文本hedaer。 如果我删除边距20px，这是好的，但我需要边距在div no和关闭宽度内
https://codepen.io/mihaufs/pen/jowaxxg
HTML
<div class="wrapper">
<div class="header">
<div>Welcome </div>
<div>Logout </div>
</div>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
SCSS
.wrapper {
width: 100%;
padding: 100px;
background: aqua;
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.main {
display: flex;
:nth-child(1){
width: 30%;
background: red;
margin: 20px
}
:nth-child(2){
width: 30%;
background: yellow;
margin: 20px
}
:nth-child(3){
width: 30%;
background: green;
margin: 20px
}
}
}
您可以在单个服务器上使用flex-grow然后使用margin:
可能的更新:
.main {
display: flex;
:nth-child(1){
background: red;
}
:nth-child(2){
margin:0 20px;
background: yellow;
}
:nth-child(3){
background: green;
}
div {
flex-grow:1;
}
}
演示:
null
.wrapper {
padding: 100px;
background: aqua;
}
.wrapper .header {
display: flex;
justify-content: space-between;
align-items: center;
}
.wrapper .main {
display: flex;
}
.wrapper .main :nth-child(1) {
background: red;
}
.wrapper .main :nth-child(2) {
margin: 0 20px;
background: yellow;
}
.wrapper .main :nth-child(3) {
background: green;
}
.wrapper .main div {
flex-grow: 1;
}<div class="wrapper">
<div class="header">
<div>Welcome </div>
<div>Logout </div>
</div>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>