Question

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

我的要求很简单：
1.所有项目必须具有相同的宽度（包括在最后一行）;
2.如果线条已满，则所有项目必须等间隔;如果不是，则所有项目必须对齐（通常是最后一行）; 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>

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

尝试在nav #linkgroup .link：

中将flex-grow属性设置为0

flex-grow: 0;

它将避免在最后一行上不必要的div增长。

Answer 2

找到解决方案：
只需添加尽可能多的＆＃34;空＆＃34;你期望一行中的最大值（多一些不会受到伤害，但至少足以满一行），然后从下面的CSS中添加与div:empty相关的两位。 / p>

<强> 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>

在多行上下文中具有响应相等宽度的项目组，与最后一行

2 个答案: