Вопрос по html, css, wordpress, css3, flexbox – Удаление большого промежутка между строками в макете flexbox [дубликат]

6

На этот вопрос уже есть ответ:

Удалите пробелы (промежутки) между несколькими строками гибких элементов при их переносе 1 ответ

У меня есть боковая панель, которая длиннее содержимого (предварительный просмотр с миниатюрами).

Я использую flexbox для создания макета, и когда боковая панель длиннее превью, между ними возникает огромный разрыв.

Я хочу, чтобы в каждой строке не было промежутка, как если бы боковая панель была короткой и красивой.

Я бросил вместе Codepen.

//page wrapper for sidebar
.flexPageWrapper {
  display:flex;
  /* Centering the page */
  max-width:1500px;
  margin:0 auto;
}
//search results flexbox container
.searchContentWrap {
  flex-grow: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-right: 1em;
  flex-direction: row;
}

Ваш Ответ

1   ответ
16

align-content: stretch.

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

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

Вы можете переопределить это поведение по умолчанию с помощьюalign-content: flex-start.

.searchContentWrap {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-right: 1em;
    flex-direction: row;
    align-content: flex-start; /* NEW */
}

Усовершенствованный Codepen

Похожие вопросы