元素之间的缩进（边距、填充）（css）

Question

我遇到了一个问题：有一个具有样式

justify-content: space-between

和

flex-wrap: wrap

的 flex wrapper 我希望左键、右键和文本块之间有一些 space包装前。在下一行的右键转换后， "border" 一侧不会有任何缩进。希望你明白。

.long-line {
    max-width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid;
}
button {
    background: #FFF;
    border: 1px solid;
    border-radius: 5px;
    padding: 10px 12px;
}

<div class="long-line">
  <div class="left-item"><button>Big left button</button></div>
  <div class="center-item">more and more text</div>
  <div class="right-item"><button>right button</button></div>
</div>

https://i.stack.imgur.com/ykxcI.png
https://i.stack.imgur.com/FtyXj.png
https://i.stack.imgur.com/80JbP.png

Answer 1

您可以为中心文本留出边距 div，这样它就不会粘在边框上。还有按钮的上边距，以防他们卡在某些视点上。

Answer 2

我找到了一种可能的解决方案：
1) 从 "long-line";
中删除填充 2) 在 div 中包裹按钮；
3) 向 "long-line" 的 children.

添加填充

.long-line {
    max-width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border: 1px solid;
}

.long-line > div {
    padding: 10px;
}

button {
    background: #FFF;
    border: 1px solid;
    border-radius: 5px;
    padding: 10px 12px;
}

<div class="long-line">
    <div class="left-item"><button>Big left button</button></div>
    <div class="center-item">more and more text</div>
    <div class="right-item"><button>right button</button></div>
</div>

元素之间的缩进（边距、填充）（css）

Indent (margin, padding) between elements (css)

html

css

margin

indentation

padding