Flexbox - ＆＃34;空间 - ＆＃34; - 零宽度元素会导致不需要的空间

Question

我正在尝试创建一种＆＃34;词汇表＆＃34;使用flexbox元素。我有一个滚动到右边字母的导航。

有我的问题： 我在每个字母的第一个元素之前放置了锚链接。即使元素有宽度，这也会导致不需要的空间：0px; visibility：hidden的;我想我几乎尝试了所有的东西......希望你能找到解决方案。

注意：在这种情况下，不能将锚链接设置为position：absolute！

＆＃13;

＆＃13;

*, *:before, *:after {
	padding: 0;
	margin: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
}

.letters {
	background: #fff;
	border-bottom: 1px solid #ccc;
	text-align: center;
	padding: 10px;
	margin-bottom: 20px
}

.letters ul li {
	display: inline-block;
	height: 34px;
	line-height: 34px;
	list-style: outside none none;
	text-align: center;
	width: 34px;
	margin: 0 .27em;
}

.letters ul li a {
	background: #ad1800 none repeat scroll 0 0;
	border: 1px solid #ad1800;
	color: #fff;
	display: block;
	line-height: 32px;
	text-decoration: none;
}

.letter_around {
	list-style: none;
	padding: 20px 50px;
	position: relative;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.glossary_item {
	padding: 15px 20px 20px;
	width: 22%;
	background: #fff;
	border: 1px solid #ccc;
	transition: 0.4s all;
	overflow: hidden;
	margin-bottom: 20px;
}

.glossary_letter {
	width: 0px;
	height: 0px;
	overflow: hidden;
	position: relative;
	visibility: hidden;
}

＆＃13;

<div class="wrapper glossary_wrapper">
  <div class="content clearfix">
    <div class="letters clearfix">
      <ul class="letters_ul">
        <li class="glossarylink">
          <a href="#A">A</a>
        </li>
        <li class="glossarylink">
          <a href="#B">B</a>
        </li>
        <li class="glossarylink">
          <a href="#C">C</a>
        </li>
        <li class="glossarylink">
          <a href="#D">D</a>
        </li>
        <li class="glossarylink">
          <a href="#E">E</a>
        </li>
      </ul>
    </div>
    <div class="letter_around">
      <a class="glossary_letter" id="A" name="A"></a>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="B" name="B"></a>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="C" name="C"></a>
      <div class="glossary_item"><span class="glossary-title">C - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="D" name="D"></a>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="E" name="E"></a>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

最简单的解决方案是添加

.glossary_letter {
  display: none;
}

所以它会有效，但你的额外空间会消失。

Answer 2

好的，尝试另一种方式，它可以保持锚链接工作：

.glossary_letter {
  flex: 0 0 100%;
}

Answer 3

这种解决方案并不是特别干净。理想情况下，拥有更多知识的人将提供更好的解决方案。

1. 从justify-content
删除.letter-around媒体资源
2. 将margin-right: auto添加到glossary-item以在项目之间创建空格。
3. 使用nth-of-type选择器定位每个网格中的最后一项，并删除边距。

我已将glossary-letter从a更改为span，我认为这在语义上更有意义。我还将一些css规则从.glossary-item移到了span。

＆＃13;
＆＃13;
*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.letters {
  background: #fff;
  border-bottom: 1px solid #ccc;
  text-align: center;
  padding: 10px;
  margin-bottom: 20px
}

.letters ul li {
  display: inline-block;
  height: 34px;
  line-height: 34px;
  list-style: outside none none;
  text-align: center;
  width: 34px;
  margin: 0 .27em;
}

.letters ul li a {
  background: #ad1800 none repeat scroll 0 0;
  border: 1px solid #ad1800;
  color: #fff;
  display: block;
  line-height: 32px;
  text-decoration: none;
}

.letter_around {
  list-style: none;
  padding: 20px 50px;
  position: relative;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  flex-flow: row wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.glossary_item {
  transition: 0.4s all;
  overflow: hidden;
  margin-bottom: 20px;
  width: 22%;
  margin-right: auto;
}

.glossary_item span {
  padding: 15px 20px 20px;
  background: #fff;
  border: 1px solid #ccc;
  display: block;
}

.glossary_item:nth-of-type(4n) {
  margin-right: 0;
}
＆＃13;
<div class="wrapper glossary_wrapper">
  <div class="content clearfix">
    <div class="letters clearfix">
      <ul class="letters_ul">
        <li class="glossarylink">
          <a href="#A">A</a>
        </li>
        <li class="glossarylink">
          <a href="#B">B</a>
        </li>
        <li class="glossarylink">
          <a href="#C">C</a>
        </li>
        <li class="glossarylink">
          <a href="#D">D</a>
        </li>
        <li class="glossarylink">
          <a href="#E">E</a>
        </li>
      </ul>
    </div>
    <div class="letter_around">
      <span class="glossary_letter" id="A" name="A"></span>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <span class="glossary_letter" id="B" name="B"></span>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <span class="glossary_letter" id="C" name="C"></span>
      <div class="glossary_item"><span class="glossary-title">C - Lorem ipsum dolor </span></div>
      <span class="glossary_letter" id="D" name="D"></span>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <span class="glossary_letter" id="E" name="E"></span>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 4

为我自己找到了解决方案。这不是我猜的最佳解决方案，但它运作正常。

我填充了flexbox本身计算出的空格，左边是保留左边的减去值。所以在我的案例中，元素的大小是22％。这4倍是整个容器宽度的88％。这意味着元素的计算边距约为容器宽度的4％。因此，如果您将锚元素的边距减少4％，您将获得正确的方框位置。

我知道这不是最好的解决方案，但它确实有效。如果你有一个更好的，请告诉我。 ：）

*, *:before, *:after {
	padding: 0;
	margin: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
}

.letters {
	background: #fff;
	border-bottom: 1px solid #ccc;
	text-align: center;
	padding: 10px;
	margin-bottom: 20px
}

.letters ul li {
	display: inline-block;
	height: 34px;
	line-height: 34px;
	list-style: outside none none;
	text-align: center;
	width: 34px;
	margin: 0 .27em;
}

.letters ul li a {
	background: #ad1800 none repeat scroll 0 0;
	border: 1px solid #ad1800;
	color: #fff;
	display: block;
	line-height: 32px;
	text-decoration: none;
}

.letter_around {
	list-style: none;
	padding: 20px 10px;
	position: relative;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.glossary_item {
	padding: 15px 20px 20px;
	width: 22%;
	background: #fff;
	border: 1px solid #ccc;
	transition: 0.4s all;
	overflow: hidden;
	margin-bottom: 20px;
}

.glossary_letter {
	width: 0px;
	height: 0px;
	overflow: hidden;
	position: relative;
	visibility: hidden;
  margin-left: -4%;
}

<div class="wrapper glossary_wrapper">
  <div class="content clearfix">
    <div class="letters clearfix">
      <ul class="letters_ul">
        <li class="glossarylink">
          <a href="#A">A</a>
        </li>
        <li class="glossarylink">
          <a href="#B">B</a>
        </li>
        <li class="glossarylink">
          <a href="#C">C</a>
        </li>
        <li class="glossarylink">
          <a href="#D">D</a>
        </li>
        <li class="glossarylink">
          <a href="#E">E</a>
        </li>
      </ul>
    </div>
    <div class="letter_around">
      <a class="glossary_letter" id="A" name="A"></a>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="B" name="B"></a>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="C" name="C"></a>
      <div class="glossary_item"><span class="glossary-title">C - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="D" name="D"></a>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="E" name="E"></a>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
    </div>
  </div>
</div>

Answer 5

设置justify-content: space-around与将auto设置为所有灵活项目的左右边距基本相同（可用空间将在左侧和上方均匀分配他们每个人的权利）。因此，要从可用空间分布中排除某些项目，您可以删除justify-content并仅将等效边距设置为所需的项目：

*, *:before, *:after {
	padding: 0;
	margin: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
}

.letters {
	background: #fff;
	border-bottom: 1px solid #ccc;
	text-align: center;
	padding: 10px;
	margin-bottom: 20px
}

.letters ul li {
	display: inline-block;
	height: 34px;
	line-height: 34px;
	list-style: outside none none;
	text-align: center;
	width: 34px;
	margin: 0 .27em;
}

.letters ul li a {
	background: #ad1800 none repeat scroll 0 0;
	border: 1px solid #ad1800;
	color: #fff;
	display: block;
	line-height: 32px;
	text-decoration: none;
}

.letter_around {
	list-style: none;
	padding: 20px 50px;
	position: relative;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	flex-flow: row wrap;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.glossary_item {
	padding: 15px 20px 20px;
	width: 22%;
	background: #fff;
	border: 1px solid #ccc;
	transition: 0.4s all;
	overflow: hidden;
	margin: auto;
	margin-bottom: 20px;
}

.glossary_letter {
	width: 0;
	margin: 0;
}

<div class="wrapper glossary_wrapper">
  <div class="content clearfix">
    <div class="letters clearfix">
      <ul class="letters_ul">
        <li class="glossarylink">
          <a href="#A">A</a>
        </li>
        <li class="glossarylink">
          <a href="#B">B</a>
        </li>
        <li class="glossarylink">
          <a href="#C">C</a>
        </li>
        <li class="glossarylink">
          <a href="#D">D</a>
        </li>
        <li class="glossarylink">
          <a href="#E">E</a>
        </li>
      </ul>
    </div>
    <div class="letter_around">
      <a class="glossary_letter" id="A" name="A"></a>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">A - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="B" name="B"></a>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">B - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="C" name="C"></a>
      <div class="glossary_item"><span class="glossary-title">C - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="D" name="D"></a>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">D - Lorem ipsum dolor </span></div>
      <a class="glossary_letter" id="E" name="E"></a>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
      <div class="glossary_item"><span class="glossary-title">E - Lorem ipsum dolor </span></div>
    </div>
  </div>
</div>