Как убрать пробелы в flexbox?

Я создал вкладку во flexbox с :target, которая показывает .details div при нажатии. К сожалению, элемент div .details очень высокий и имеет огромный пробел внизу абзаца. Есть ли решение в 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>

введите здесь описание изображения


html css flexbox css-grid
person Mo.    schedule 12.09.2017    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Чтобы гибкие элементы помещались в контейнер с направлением столбца, вы должны установить высоту контейнера< /а>. Это устанавливает определенную точку останова, которая сообщает элементам, когда создавать новый столбец.

В вашем коде нет ограничения по высоте контейнера. Таким образом, упаковка зависит от размера содержимого и может варьироваться в зависимости от браузера. Причиной дополнительного пространства в поле сведений является align-items: stretch, flex по умолчанию, который указывает элементам использовать все свободное пространство в крест оси.

Вы можете отключить эту функцию с помощью 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

person Michael Benjamin    schedule 13.09.2017
comment
к сожалению, иногда размер контента может отличаться - person Mo.; 13.09.2017
comment
что вы думаете об этом в display: grid ? - person Mo.; 13.09.2017

arrow_upward
0
arrow_downward

(Скрипка выручила бы тонну)

Но проблема почти наверняка в margin внизу ваших кнопок.

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

Изменить: теперь, когда ваша проблема стала более очевидной, вот скрипка. https://jsfiddle.net/ocgjrzre/2/

(Я не использовал ваш код скрипки, потому что мне было проще начать с нуля, чтобы проиллюстрировать то, что я пытаюсь сделать.)

Проблема в том, что с flexbox действительно нужно учитывать расположение своих элементов.

В вашем случае, поскольку вам нужны кнопки слева и сообщения справа, вы захотите, чтобы они находились в двух отдельных гибких контейнерах, которые существуют рядом.

Изменить: вам также не нужно, чтобы элементы «детали» имели высоту 100%

person Pytth    schedule 12.09.2017
comment
Вопрос обновлен с помощью скрипки и изображения. Надеюсь, теперь вы сможете определить проблему - person Mo.; 13.09.2017
comment
Тем не менее, в .details есть пробел, такой же, как на рассматриваемом изображении. - person Mo.; 13.09.2017
comment
Я обновил свой ответ. Вы захотите разбить все свои данные на гибкий контейнер отдельно от ваших кнопок. - person Pytth; 13.09.2017

arrow_upward
-1
arrow_downward

Похоже, вам просто нужно удалить поле под последним элементом.

Добавь это:

.three { margin-bottom: 0; }

person jack    schedule 12.09.2017
comment
Вопрос обновлен с помощью скрипки и изображения. Надеюсь, теперь вы сможете определить проблему - person Mo.; 13.09.2017