div 左右两侧的浮动按钮

Question

我有div固定尺寸的不同长度的按钮：

div {
  background: blue;
  width: 400px;
  height: 200px;
}

<div>
  <button>Click Me</button>
  <button>No, Click Me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>Alright, you can click them</button>
  <button>What about me?</button>
  <button>I don't care</button>
  <button>Click Whoever</button>
  <button>OMG I'm a button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
</div>

默认情况下，按钮都排在左侧，当然，如果您float:right那么它们将在右侧对齐。

我想知道如何让每一行中最左边的按钮与左边对齐，最右边与右边对齐，同时在该行中的按钮之间均匀地分割额外的空间。

有没有什么简单的方法可以实现这样的目标？

这是一个代码笔：点击我

Answer 1

使用弹性盒模型我们可以实现你想要的：

div {
  background: blue;
  width: 400px;
  height: 200px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

<div>
  <button>Click Me</button>
  <button>No, Click Me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>No, me</button>
  <button>Alright, you can click them</button>
  <button>What about me?</button>
  <button>I don't care</button>
  <button>Click Whoever</button>
  <button>OMG I'm a button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
  <button>Filler Button</button>
</div>

请记住，如果没有所需的前缀，将会出现一些兼容性问题。