边距取决于元素的数量答案

【问题标题】：Margin depending on quantity of elements边距取决于元素的数量
【发布时间】：2016-03-28 14:33:48
【问题描述】：

我有一个包含 960 像素宽度容器和按钮的页面。我想做这样的按钮：

960px 宽度
/---------------\
[btn]边距[btn]

和

960px 宽度
/---------------\
[btn]m[btn]m[btn]

我想进行边距自动设置。

【问题讨论】：

你的意思是想让按钮居中对齐
@geeksal 不，我想根据按钮的数量制作保证金
这可能有助于stackoverflow.com/questions/4108726/…
看看答案然后告诉我@fox
@aless80 但这有可能在不给出百分比的情况下实现吗？（我要 100 个 / 数量）

标签： html css

【解决方案1】：

Flexbox 可以做到这一点

.container {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
  max-width: 960px;
  margin-bottom: 10px;
  border: 1px solid grey;
}

<div class="container">
  <button>button1</button>
  <button>button2</button>
  <button>button3</button>
</div>
<div class="container">
  <button>button1</button>
  <button>button2</button>
</div>
<div class="container">
  <button>button1</button>
  <button>button2</button>
  <button>button3</button>
  <button>button4</button>
</div>

【讨论】：

【解决方案2】：

使用弹性盒布局

div{
  width:100%;
  display:flex;
  flex-direction: row; 
  justify-content: space-between;
  }

<div>
  <button>button1</button>
  <button>button2</button>
  <button>button3</button>
  </div>

第二次sn-p

div{
  width:100%;
  display:flex;
  flex-direction: row; 
  justify-content: space-between;
  }

<div>
  <button>button1</button>
  <button>button2</button>
  <button>button3</button>
  <button>button4</button>
  </div>

如需完整指南，请访问：A complete guide to flexbox

【讨论】：