Question

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

justify-content: space-between

和

flex-wrap: wrap

的flex包装器，我希望左按钮，右按钮和文本块在包装前之间要有一些空间。在下一行的右键转换之后，“边框”侧将没有任何缩进。希望你能理解。

.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）从“长线”中删除填充；
2）将按钮包装在div中；
3）向“长线”的孩子添加填充。

.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）之间的缩进（边距，填充）

2 个答案: