在多行上下文中具有响应式等宽的项目组，最后一行问题

Question

在研究了一段时间的问题并考虑了所有 float 和 text-align 替代方案之后，我对使用 flexbox 找到的解决方案非常满意，但存在一个问题最后一行（当它溢出时）因为项目与前几行的宽度不同，因为允许它们拉伸更多（最大宽度）以尝试填充剩余的空 space.

我的要求很简单：
1.所有项目必须具有相同的宽度（包括最后一行）；
2. 如果行已满或左对齐（通常是最后一行），则所有项目必须相等 spaced；
3. 当达到最小宽度时，项目可以（必须）溢出（响应式调整大小）；
4. CSS-唯一的解决方案并可能避免媒体查询；
5. 我宁愿使用 flex-basis: 0 真正相同的宽度（最后一行问题站）；
6.非flexbox解决方案，只要满足其他要求即可考虑；

为清楚起见，我删除了供应商前缀，但我在实际页面上使用了它们。

CSS

nav {
  margin:           20px 0px;
}
nav #linkgroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* aligns left when not full */
  align-items: center;
  align-content: space-around;
}
nav #linkgroup .link {
  min-width: 120px;
  width: 120px;   /* only used because of Safari issue below */
  max-width: 160px;
  height: 30px;
  margin: 5px;
  flex-grow: 1;
  flex-basis: auto;   /* 0 gives all exact same size but have to use auto and set 'width' for Safari issue https://bugs.webkit.org/show_bug.cgi?id=136041 */
  line-height: 30px;   /* set equal to height, for vertical align trick */
  text-align: center;
}
nav #linkgroup .link a.btn {
  display: block;
  vertical-align: middle;
  line-height: normal;
  border-radius: 2px;
  padding: 5px 10px 5px 10px;
  border: solid #1f628d 2px;
  text-decoration: none;
}

HTML

  <nav>
    <div id="linkgroup">
      <div class="link"><a class="btn" href="#">A</a></div>
      <div class="link"><a class="btn" href="#">AB</a></div>
      <div class="link"><a class="btn" href="#">ABC</a></div>
      <div class="link"><a class="btn" href="#">ABCD</a></div>
      <div class="link"><a class="btn" href="#">ABCDE</a></div>
      <div class="link"><a class="btn" href="#">ABCDEF</a></div>
      <div class="link"><a class="btn" href="#">ABCDEFG</a></div>
    </div>
  </nav>

nav {
  margin:           20px 0px;
  padding:          0px 0px 5px 0px;   /* to space when multi-line */
}
nav #linkgroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* aligns left when not full */
  align-items: center;
  align-content: space-around;
}
nav #linkgroup .link {
  min-width: 120px;
  width: 120px;   /* only used because of Safari issue below */
  max-width: 160px;
  height: 30px;
  margin: 5px;
  flex-grow: 1;
  flex-basis: auto;   /* 0 gives all exact same size but have to use auto and set 'width' for Safari issue https://bugs.webkit.org/show_bug.cgi?id=136041 */
  line-height: 30px;   /* set equal to height, for vertical align trick */
  text-align: center;
}
nav #linkgroup .link a.btn {
  display: block;
  vertical-align: middle;
  line-height: normal;
  border-radius: 2px;
  padding: 5px 10px 5px 10px;
  border: solid #1f628d 2px;
  text-decoration: none;
}

<nav>
    <div id="linkgroup">
      <div class="link"><a class="btn" href="#">A</a></div>
      <div class="link"><a class="btn" href="#">AB</a></div>
      <div class="link"><a class="btn" href="#">ABC</a></div>
      <div class="link"><a class="btn" href="#">ABCD</a></div>
      <div class="link"><a class="btn" href="#">ABCDE</a></div>
      <div class="link"><a class="btn" href="#">ABCDEF</a></div>
      <div class="link"><a class="btn" href="#">ABCDEFG</a></div>
    </div>
  </nav>

Answer 1

尝试将 flex-grow 属性设置为 0 in nav #linkgroup .link:

flex-grow: 0;

它将避免在最后一行不必要地增加 div。

Answer 2

找到解决方案：
只需在一行中添加您期望的最大数量的 "empty" 项目（多一些不会造成伤害，但至少足够整行），然后添加与 [=12= 相关的两位] 来自下面的 CSS。

CSS

nav {
  margin:           20px 0px;
}
nav #linkgroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* aligns left when not full */
  align-items: center;
  align-content: space-around;
}
nav #linkgroup .link {
  min-width: 120px;
  width: 120px;   /* only used because of Safari issue below */
  max-width: 160px;
  height: 30px;
  margin: 5px;
  flex-grow: 1;
  flex-basis: auto;   /* 0 gives all exact same size but have to use auto and set 'width' for Safari issue https://bugs.webkit.org/show_bug.cgi?id=136041 */
  line-height: 30px;   /* set equal to height, for vertical align trick */
  text-align: center;
}
nav #linkgroup .link a.btn {
  display: block;
  vertical-align: middle;
  line-height: normal;
  border-radius: 2px;
  padding: 5px 10px 5px 10px;
  border: solid #1f628d 2px;
  text-decoration: none;
}
#linkgroup > div:empty {
    height: 0;   /* I think visibility: hidden; would do the same */
}
@media only screen
 and (min-width: 1030px) {
  #linkgroup > div:empty {
      display: none;
  }
}

HTML

  <nav>
    <div id="linkgroup">
      <div class="link"><a class="btn" href="#">A</a></div>
      <div class="link"><a class="btn" href="#">AB</a></div>
      <div class="link"><a class="btn" href="#">ABC</a></div>
      <div class="link"><a class="btn" href="#">ABCD</a></div>
      <div class="link"><a class="btn" href="#">ABCDE</a></div>
      <div class="link"><a class="btn" href="#">ABCDEF</a></div>
      <div class="link"><a class="btn" href="#">ABCDEFG</a></div>
      <div class="link"></div>
      <div class="link"></div>
      <div class="link"></div>
      <div class="link"></div>
      <div class="link"></div>
      <div class="link"></div>
    </div>
  </nav>

在多行上下文中具有响应式等宽的项目组，最后一行问题

Group of items with responsive equal width in multi-line context, issue with last-line

css

alignment

flexbox

multiline

responsive