html - 元素之间的缩进(边距，填充)(css)

Question

我遇到了一个问题:有一个具有样式的 flex 包装器

justify-content: space-between

and

flex-wrap: wrap

I want left button, right button and text block to have some space between before wrapping. And after right button's transition on the next line there won't be any indentation on the "border" side. Hope you understand.

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

/image/ykxcI.png
/image/FtyXj.png
/image/80JbP.png

Answer 1

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