Как отключить колонки одинаковой высоты в Flexbox?

У меня есть три элемента, которые я пытаюсь выровнять в моем макете.

Сначала у меня есть div для обратной связи, затем ввод для поиска, а затем элемент div для предложений.

Я хочу, чтобы первый и последний элемент имели ширину 20%, а ввод для поиска имел ширину 60%. Используя Flexbox, я добиваюсь того, чего хочу.

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

Есть ли хитрость, чтобы не увеличивать div с самым высоким элементом? Просто сделай дивы (#feedback а также #suggestions) есть высота содержания в них?

#container_add_movies {
  display: flex;
}
#container_add_movies #feedback {
  width: 20%;
  background-color: green;
}
#container_add_movies #search {
  width: 60%;
  background-color: red;
}
#container_add_movies #suggestions {
  width: 20%;
  background-color: yellow;
}
<div id='container_add_movies'>
  <div id='feedback'>
    Feedback
  </div>
  <div id='search'>
    Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>
  </div>
  <div id='suggestions'>
    Suggestions
  </div>
</div>

http://codepen.io/alucardu/pen/PPjRzY

Источник

4 ответа

Решение

Вы столкнулись с гибкой колонкой равной высоты.

Начальная настройка гибкого контейнера align-items: stretch,

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

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

Чтобы переопределить этот параметр по умолчанию, добавьте align-items: flex-start к гибкому контейнеру:

#container_add_movies {
   display: flex;
   align-items: flex-start;
}


#container_add_movies {
  display: flex;
  align-items: flex-start;       /* NEW */
}

#container_add_movies #feedback {
  width: 20%;
  background-color: green;
  display: block;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#container_add_movies #suggestions {
  width: 20%;
  background-color: yellow;
}
<div id='container_add_movies'>
  <div id='feedback'>Feedback</div>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>

... или же align-self: flex-start к гибким предметам:

#feedback {
    align-self: flex-start;
    width: 20%;
    background-color: green;
}

 #suggestions {
    align-self: flex-start; 
    width: 20%;
    background-color: yellow;
}


#container_add_movies {
  display: flex;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#feedback {
  align-self: flex-start;  /* NEW */
  width: 20%;
  background-color: green;
}

#suggestions {
  align-self: flex-start;  /* NEW */
  width: 20%;
  background-color: yellow;
}
<div id='container_add_movies'>
  <div id='feedback'>Feedback</div>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>

align-items устанавливает значение по умолчанию align-self, С align-self Вы можете переопределить настройки по умолчанию для отдельных элементов.

Больше деталей в спецификации:

8.3. Выравнивание по оси align-items а также align-self свойства

Элементы Flex могут быть выровнены по поперечной оси текущей строки контейнера Flex, аналогично justify-content но в перпендикулярном направлении.

align-items устанавливает выравнивание по умолчанию для всех элементов flex-контейнера, включая анонимные элементы flex.

align-self позволяет этому выравниванию по умолчанию быть переопределенным для отдельных элементов flex.

Немного истории

С самого начала CSS возникли две проблемы с версткой, которые регулярно расстраивали, ставили в тупик и раздражали разработчиков переднего плана:

  1. Как центрировать вещи, особенно вертикально, и
  2. Как создать столбцы одинаковой высоты (таблицы в стороне)

Сегодня, с появлением flexbox, эти проблемы прошли.

Сосредоточение вещей никогда не было проще:

#container {
    display: flex;
    justify-content: center;    /* center flex items along the main axis */
    align-items: center;        /* center flex items along the cross axis */
}

Просто. Легко. Эффективное. Сумасшествие прошло.

С точки зрения столбцов одинаковой высоты, flexbox также выделяется: он делает это по умолчанию.

#container {
    display: flex;
    flex-direction: row;        /* not even necessary; default rule */
    align-items: stretch;       /* not even necessary; default rule */
}

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

Из одного популярного ответа для столбцов одинаковой высоты:

Дать overflow: hidden к контейнеру и большим (и равным) отрицательным полям и положительным отступам к столбцам. Обратите внимание, что у этого метода есть некоторые проблемы, например, якорные ссылки не будут работать в вашем макете.

Теперь это взломать!

Маятник теперь начинает качаться в другую сторону: дизайнеры спрашивают, как ВЫКЛЮЧИТЬ столбцы одинаковой высоты.

Источник

Можете добавить align-items: flex-start на ваш #container_add_movies, Вот пример

Источник

чтобы иметь неравные столбцы в бутстрапе 4, прежде всего ему нужно знать, как он делает их равными по высоте столбцов, поэтому причина в том, что

      align-items: stretch

чтобы удалить это свойство, необходимо добавить align-items: flex-start поэтому для этого я добавил class = "align-items-start", и проблема исправлена,

Источник

Установка дочернего элемента, который вызывал проблему flex:none сделал трюк для меня.

Источник
Другие вопросы по тегам