Flexbox, одно исключение при равной высоте ячеек в строках

#css #flexbox

Вопрос:

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

Я сделал очень простой пример здесь:https://jsbin.com/fadizozija/edit?html ,css,вывод

HTML

 <div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4 <br/> prev / next column should expand in height</div>
  <div>5</div>
  <div>6</div>
    <div class="expand">7<br /> this column <br /> should <strong>not</strong> expand <br />the prev / next column</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>

CSS

 div.wrapper {
  display:flex;
  flex-wrap: wrap;
  
}
div.wrapper div {
  width: calc(50% - 20px);
  background: lightgrey;
  margin: 10px;
  padding: 10px;
  box-sizing:border-box;
}
/* div.wrapper  div.expand {
 position:absolute;
  background: white;
  width: calc(50% - 28px)
} */

Столбец 4 должен иметь ту же высоту, что и элементы в той же строке, так что это работает нормально. Однако для столбца 7 я бы хотел, чтобы он этого не делал. Оно должно сохранять текущую позицию, но не должно увеличивать высоту 8. Вместо этого он должен «плавать» выше 9, а 8 должен сохранять свою текущую высоту.

Абсолютная позиция делает то, что я хочу, но это заставляет столбец покидать сетку и занимать позицию впереди. Я прокомментировал это в CSS.

У кого-нибудь есть какие-либо предложения? Я могу решить это с помощью поплавков и некоторого выравнивателя высоты, но это кажется худшим решением.

1. Flexbox разработан так, чтобы в его строках были элементы одинаковой высоты. К сожалению, flexbox здесь не ваш вариант.

2. Спасибо Paulie_D, вероятно, поэтому я не смог это решить. 🙂

3. margin-bottom: авто; для восьмого элемента это исправит

4. Спасибо, Темани, это работает, но сдвигает следующую строку вниз, как с align-self: baseline

Ответ №1:

Используйте свойство CSS align-self

Используйте утилиты выравнивания для элементов flexbox, чтобы индивидуально изменять их выравнивание по поперечной оси (ось y для начала, ось x, если flex-direction: столбец ).

гибкий запуск:-

flex-start: край поля перекрестного начала элемента помещается на перекрестную начальную строку

 div.wrapper div:nth-child(8){align-self: flex-start;}

или

базовая линия:

baseline: элементы выровнены так, как выровнены их базовые линии

 div.wrapper div:nth-child(8){align-self: baseline;}

1. Спасибо, это работает, но следующая строка все еще опускается. Как и в случае с margin-bottom: auto;

2. Не могли бы вы прислать мне ссылку на скриншот? что происходит со следующей строкой? Здесь все работает нормально.

3. Я думаю, что у нас тот же результат ibb.co/jyx35mM но я бы хотел, чтобы 7 действовал как выпадающий список. Итак, если он открыт, он падает на 9. Теперь вся строка расширяется.

Ответ №2:

Я решил это, добавив дополнительный столбец div 7. Этот div позиционируется как абсолютный, а 7 — как относительный. С левым 0 и z-индексом 1 я могу разместить дополнительный div поверх 7, чтобы он выглядел как расширенный столбец.

Результат:
https://jsbin.com/pozuhadatu/edit?html ,css,вывод

HTML

 <div>7<br /><div class="expand">this column <br /> should <strong>not</strong> expand <br />the prev / next column</div></div>

CSS

 div.wrapper div.expand {
  position:absolute;
  left: -10px;
  width: calc(100%);
  z-index: 1;  
}