如何消除 flexbox 中的空白？

Question

我在 flexbox 中使用:target 构建了一个选项卡，单击它时会显示.details div。不幸的是，.details div 非常高，并且在段落底部有一个巨大的空白。 CSS 中是否有解决方案来消除这种差距？

演示：https://jsfiddle.net/ocgjrzre/

p {
  margin: 10px;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.my-wrap {
  // height: 200px;
  width: 90%;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
  border: 1px solid #eee;
  color: #fff;
}

.wrap-one {
  background-color: tomato;
}

.wrap-two {
  background-color: deepskyblue;
}

.wrap-three {
  background-color: greenyellow;
}

.button{
  text-decoration: none;
  background-color: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  transition: all 0.25s;
  &:hover{
    text-decoration: none;
    color: #333;
    background-color: #fff;
  }
}
.button{
  width: 25%;
  margin-bottom: 0.5rem;
}
.details{
  width: 70%;
  display: none;
  height: 100%;
  order: 1;
}
.one{
  // display: block;
  // order: 1;
}
.two{
  // display: block;
}
.three{
  // display: block;
}


div:target{
  display: block;
}

<div class="my-wrap">
  <a href="#one" class="wrap-button-one button">Wrap One</a>
  <div id="one" class="wrap-one one details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <a href="#two" class="wrap-button-two button">Wrap Two</a>
  <div id="two" class="wrap-two two details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <a href="#three" class="wrap-button-three button">Wrap Three</a>
  <div id="three" class="wrap-three three details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

Answer 1

（一个小提琴会帮助很多）

但问题几乎可以肯定是按钮底部的margin。

.wrap-button-three.button {
     margin-bottom: 0;
}

编辑：现在您的问题更加明显，这是一个小提琴。 https://jsfiddle.net/ocgjrzre/2/

（我没有使用你的小提琴代码，因为我更容易从头开始说明我想要表达的观点。）

问题是，对于 flexbox，确实需要考虑元素的布局。

在您的情况下，因为您想要左侧的按钮和右侧的消息，所以您需要将它们放在并排存在的两个单独的 flex 容器中。

编辑：您还需要不要使“详细信息”项目的高度为 100%

Answer 2

看起来您只需要删除最后一项下方的边距。

添加这个：

.three { margin-bottom: 0; }

Answer 3

为了让弹性项目包装在一个列方向容器中，你应该set a height on the container。这会设置一个明确的断点，告诉项目何时创建新列。

在您的代码中，容器没有高度限制。因此，换行基于内容大小，可能因浏览器而异。详细信息框中额外空间的原因是align-items: stretch，这是一个弹性默认值，它告诉项目消耗cross axis 中的所有可用空间。

您可以使用disable this feature 和align-items: flex-start（以及其他值）来解决问题，但它会产生一个新问题：弹性项目可能不再换行。

因此，除非您想重新构建 HTML 或使用其他技术，例如 CSS Grid，否则最好的选择是在容器上设置一个高度，这会给您带来更多的稳定性和控制力。

这是您的布局版本，在容器上带有 max-height：

p {
  margin: 10px;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.my-wrap {
  max-height: 200px;
  width: 90%;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
  color: #fff;
}

.wrap-one {
  background-color: tomato;
}

.wrap-two {
  background-color: deepskyblue;
}

.wrap-three {
  background-color: greenyellow;
}

.button {
  text-decoration: none;
  background-color: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  transition: all 0.25s;
  &:hover {
    text-decoration: none;
    color: #333;
    background-color: #fff;
  }
}

.button {
  width: 25%;
  margin-bottom: 0.5rem;
}

.details {
  width: 70%;
  display: none;
  height: 100%;
  order: 1;
}

.one {
  // display: block;
  // order: 1;
}

.two {
  // display: block;
}

.three {
  // display: block;
}

div:target {
  display: block;
}

<div class="my-wrap">
  <a href="#one" class="wrap-button-one button">Link One</a>
  <div id="one" class="wrap-one one details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <a href="#two" class="wrap-button-two button">Link Two</a>
  <div id="two" class="wrap-two two details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <a href="#three" class="wrap-button-three button">Link Three</a>
  <div id="three" class="wrap-three three details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

这是您的布局与 CSS Grid 完美搭配：

.my-wrap {
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-gap: .5rem;
  width: 90%;
  margin: 50px auto;
  color: #fff;
  grid-template-areas: " link-one details "
                       " link-two details "
                       " link-three details "   
                       "    ....     details "
}

.wrap-one {
  background-color: tomato;
}

.wrap-two {
  background-color: blue;
}

.wrap-three {
  background-color: green;
}

.button {
  text-decoration: none;
  background-color: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  transition: all 0.25s;
  }

.button:hover {
    background-color: #000;
}

.details {
  grid-area: details;
  display: none;
}

.wrap-button-one {
  grid-area: link-one;
}

.wrap-button-two {
  grid-area: link-two;
}

.wrap-button-three {
  grid-area: link-three;
}

div:target {
  display: block;
}

p {
  margin: 10px;
}

<div class="my-wrap">
  <a href="#one" class="wrap-button-one button">Link One</a>
  <div id="one" class="wrap-one one details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <a href="#two" class="wrap-button-two button">Link Two</a>
  <div id="two" class="wrap-two two details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <a href="#three" class="wrap-button-three button">Link Three</a>
  <div id="three" class="wrap-three three details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

jsFiddle demo