英文:
Limit the space between of the child items when using using display flex space between
问题
我有一个宽度为100%的div，里面有3个按钮。我需要让它们之间有一点间距。
我使用了Bootstrap，并且当我使用display flex和space-between选项时，得到了以下效果。
.container {
display: flex;
flex-direction: row;
text-align: center;
font-weight: normal;
font-size: 16px;
line-height: 19px;
align-items: center;
justify-content: space-between;
}
.child-element {
background: #FFFFFF;
box-sizing: border-box;
width: 100px;
height: 60px;
border: solid 1px #C4C4C4;
}
.child-element .selected {
background: #FFED00;
}
<div class="container">
<button class="child-element" data-option="1"><span style="color:#000">First</span></button>
<button class="child-element" data-option="2"><span style="color:#000">Second</span></button>
<button class="child-element" data-option="3"><span style="color:#000">Third</span></button>
</div>
这是我想要看到的效果：
在这里，我需要做哪些更改？此外，我认为使用margin-left和margin-right不是一个好选择。但如果我错了，请纠正我。
英文:
I have a div (100% width) with 3 buttons in it. I need to keep them with a little margin one to another.
I used bootstrap and this is what I get when I used display flex and space-between option.
The code;
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
flex-direction: row;
text-align: center;
font-weight: normal;
font-size: 16px;
line-height: 19px;
align-items: center;
justify-content: space-between;
}
.child-element {
background: #FFFFFF;
box-sizing: border-box;
width: 100px;
height: 60px;
border: solid 1px #C4C4C4;
}
.child-element .selected {
background: #FFED00;
}
<!-- language: lang-html -->
<div class="container">
<button class="child-element" data-option="1"><span style="color:#000">First</span></button>
<button class="child-element" data-option="2"><span style="color:#000">Second</span></button>
<button class="child-element" data-option="3"><span style="color:#000">Third</span></button>
</div>
<!-- end snippet -->
This is how I want to see them;
What are the changes I need to do here? Also, I think using margin-left,right is not a good option. But correct me if I'm wrong
答案1
得分: 2
You could remove justify-content: space-between and add some gap such as gap: 8px:
.container {
display: flex;
flex-direction: row;
text-align: center;
font-weight: normal;
font-size: 16px;
line-height: 19px;
align-items: center;
/* add gap */
gap: 8px;
}
.child-element {
background: #FFFFFF;
box-sizing: border-box;
width: 100px;
height: 60px;
border: solid 1px #C4C4C4;
}
.child-element .selected {
background: #FFED00;
}
<div class="container">
<button class="child-element" data-option="1"><span style="color:#000">First</span></button>
<button class="child-element" data-option="2"><span style="color:#000">Second</span></button>
<button class="child-element" data-option="3"><span style="color:#000">Third</span></button>
</div>
英文:
You could remove justify-content: space-between and add some gap such as gap: 8px:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
flex-direction: row;
text-align: center;
font-weight: normal;
font-size: 16px;
line-height: 19px;
align-items: center;
/* add gap */
gap: 8px;
}
.child-element {
background: #FFFFFF;
box-sizing: border-box;
width: 100px;
height: 60px;
border: solid 1px #C4C4C4;
}
.child-element .selected {
background: #FFED00;
}
<!-- language: lang-html -->
<div class="container">
<button class="child-element" data-option="1"><span style="color:#000">First</span></button>
<button class="child-element" data-option="2"><span style="color:#000">Second</span></button>
<button class="child-element" data-option="3"><span style="color:#000">Third</span></button>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论