如何扩展弹性项目的空白边距？

【问题标题】：How can I expand the empty margins on flex items?如何扩展弹性项目的空白边距？
【发布时间】：2020-06-09 22:54:35
【问题描述】：

深灰色区域可点击，但蓝色边距没有动作。如何扩展其余较小尺寸的项目以填充空间？

div.scrollmenu {
    display:flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #333;
    overflow: auto;
    flex-wrap: nowrap;

}

div.scrollmenu a {
    display: flex;
    color: white;
    text-align: left;
    padding: 14px;
    text-decoration: none;
    margin: auto;
    min-width: 25%;
    max-width: 25%;
}

【问题讨论】：

标签： css flexbox navbar margin expand

【解决方案1】：

~~将 align-items: stretch; 属性添加到您的 div.scrollmenu 并~~稍微调整您的代码。

div.scrollmenu {
  display:flex;
  /* align-items: stretch; */ /* redundant */
  background-color: #333;
  flex-wrap: nowrap;
}

div.scrollmenu a {
  display: flex;
  align-items: center;
  /* uncomment this if you want them to be centered horizontally  */
  /*justify-content: center;*/
  padding: 1 14px;
  color: white;
  text-align: left;
  text-decoration: none;
  flex: 1;
}

希望这会有所帮助。

编辑您甚至不需要align-items: stretch，因为我相信这是默认属性，因为即使您忽略它，结果也是一样的。

【讨论】：