居中时可以忽略边距 [英] Flex to ignore side margin when centering elements

问题描述

在包裹时，我很难将其弯曲到中心元素(带有边距).

I am having trouble getting flex to center elements (with margin) when it wraps.

在宽屏幕时看起来很完美

It looks perfect when the screen is wide

但是它在换行时并没有居中(因为第一个按钮的右边距)

But it is not centering it when it wraps (because of the right-margin of the first button)

这是我的代码: https://jsfiddle.net/dLz7120k/2/

footer { display: flex; flex-flow: row wrap; justify-content: center; }
button { margin: 0 20px 10px 0; }
button:last-child { margin-right: 0; }

有什么方法可以使它在换行时忽略第一个按钮的右边距吗?
(我不想更改按钮之间的间距，也不想在第一个/最后一个按钮之前/之后添加不必要的边距)

Is there any way to make it ignore the right-margin of the first button when it wraps?
(I don't want to change the spacing between the buttons, or add unnecessary margins before/after the first/last button)

推荐答案

拆分 button元素之间的边距 -将二者都设置为margin: 5px 10px您可以在两个按钮环绕时在两个按钮之间保持20px，在两个按钮之间垂直保持5px.

Split the margins between the button elements - make it margin: 5px 10px for both so that you can retain 20px between the buttons horizontally and 5px between them vertically when they wrap.

为避免包装太早，您可以在footer容器元素上使用负边距来调整导致此早期包装的边距(感谢 LGSon 指出了这一技巧).请参见下面的修改后的演示:

To avoid the wrapping a bit too early, you can use negative margins on the footer container element to adjust for the margins causing this early wrapping (thanks to LGSon for pointing out this trick). See modified demo below:

* {
  font-size: 18px;
}
#modal {
  margin: 10%;
  padding: 15px;
  width: 50%;
  border: 1px solid blue;
}
p {
  text-align: center;
}

footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0 -20px; /* extend by this amount on both sides */
}
button {
  margin: 5px 10px; 
}

<div id='modal'>
  <p>Some text and some paragraph</p>
  <footer>
    <button>Cancel</button>
    <button>Continue</button>
  </footer>
</div>

这篇关于居中时可以忽略边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！