html - CSS 按钮与除最后一个 div 之外的所有 div 对齐

Question

我想显示所有对齐以填充整个 div 宽度 的按钮，除了最后一个按钮。我的代码如下，但最后一个 div 很短并且正在扩展整个宽度，我不希望最后一个 div 是这样。

注意:按钮是动态生成的。

.block {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}

.button {
  background-color: #cec;
  border: none;
  color: white;
  margin: 15px;
  padding: 15px;
  display: inline-block;
  font-size: 16px;
  flex: 1 0 auto;
}

<div class="block">
  <div class="button"><a href="#">#1 - A LONG TEXT GOES HERE</a>
  </div>
  <div class="button"><a href="#">#2 - ANOTHER LONG TEXT HERE</a>
  </div>
  <div class="button"><a href="#">#3 - SOME TEXT HERE</a>
  </div>
  <div class="button"><a href="#">#4 - SHORT TEXT</a>
  </div>
  <div class="button"><a href="#">#5 - SHORT</a>
  </div>
  <div class="button"><a href="#">#6 - SHORT</a>
  </div>
</div>

Answer 1

您可以为短期类(class)单独开设类(class)。

.block {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}

.button {
  background-color: #cec;
  border: none;
  color: white;
  margin: 15px;
  padding: 15px;
  display: inline-block;
  font-size: 16px;
  flex: 1 0 auto;
}

.short {
  max-width: 20vw;
}

<div class="block">
  <div class="button"><a href="#">#1 - A LONG TEXT GOES HERE</a>
  </div>
  <div class="button"><a href="#">#2 - ANOTHER LONG TEXT HERE</a>
  </div>
  <div class="button"><a href="#">#3 - SOME TEXT HERE</a>
  </div>
  <div class="button"><a href="#">#4 - SHORT TEXT</a>
  </div>
  <div class="button short"><a href="#">#5 - SHORT</a>
  </div>
  <div class="button short"><a href="#">#6 - SHORT</a>
  </div>
</div>