CSS基础测试8：根据数量自适应宽度布局

[wingmeng]

题目：

---

我的回答：

> 在线 Demo <

<div class="btn-group">
  <button class="btn btn-danger">按钮</button>
</div>
<div class="btn-group">
  <button class="btn btn-danger">按钮</button>
  <button class="btn btn-danger">按钮</button>
</div>
<div class="btn-group">
  <button class="btn btn-danger">按钮</button>
  <button class="btn btn-danger">按钮</button>
  <button class="btn btn-danger">按钮</button>
</div>

/* 解法1：grid 方案 */
.btn-group {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.btn-group + .btn-group {margin-top: 15px;}
.btn {
  padding: 6px 0;
  text-align: center;
  color: #666;
  background: transparent;
  border: 1px solid;
  border-radius: 10em;
}
.btn-danger {color: #ef7077;}

/* 解法2：flex 方案 */
.btn-group {
  display: flex;
  margin-left: -.5rem;
  margin-right: -.5rem;
}
.btn-group + .btn-group {margin-top: 15px;}
.btn {
  flex: 1;
  padding: 6px 0;
  margin: 0 .5rem;
  text-align: center;
  color: #666;
  background: transparent;
  border: 1px solid;
  border-radius: 10em;
}
.btn-danger {color: #ef7077;}

[wingmeng]

自我评分：优秀

优秀、良好、一般、差劲

学习收获：

1. 使用 flex: auto 比 flex: 1 在此处语义上更加适合；
2. grid-auto-flow: column；
3. grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
4. width:-webkit-fill-available

[wingmeng]

最佳实践：

仅包含关键代码

/* grid 方案 */
.btn-group {
  display: grid;
  grid-gap: 1rem;
  grid-auto-flow: column;
}

/* flex 方案 */
.btn-group {display: flex;}
.btn {
  flex: auto;
  /* 略 */
}
.btn:not(:last-child) {
    margin-right: 1rem;
}