Flex Box столбцы против рядов

Question

$(".logo").hover(function() {
  $(this).closest('.partner').find('.info').slideDown();
}, function() {
  $('.info').slideUp();
});

#partnerBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.partner {
  flex-basis: 25%;
  background-color: grey;
  margin: 20px;
  box-shadow: 0 10px 40px 0px #00000014;
}

.logo {
  height: 150px;
}

.info {
  background-color: lightgrey;
  height: 100px;
  display: none;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="partnerBox">
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
  <div class="partner">
    <div class="logo"></div>
    <div class="info"></div>
  </div>
</div>

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

Обычно я мог бы сделать это, используя столбцы начальной загрузки, но я решил придерживаться flex box

https://jsfiddle.net/xpvt214o/915957/

Answer 1

Я решил это, добавив оболочку 'column'. Самое простое решение, которое я мог бы найти, может быть, есть более оптимальный путь.

Если вы хотите 3 столбца, просто добавьте класс .col и поместите туда содержимое этого столбца

.col {
  flex: 1;
}

и HTML:

<div id="partnerBox">
  <div class="col">
    <div class="partner">
      <div class="logo"></div>
      <div class="info"></div>
    </div>
    <div class="partner">
      <div class="logo"></div>
      <div class="info"></div>
    </div>
    <div class="partner">
      <div class="logo"></div>
      <div class="info"></div>
    </div>
   </div>
   <div class="col">
     <div class="partner">
       <div class="logo"></div>
       <div class="info"></div>
     </div>
     <div class="partner">
       <div class="logo"></div>
       <div class="info"></div>
     </div>
     <div class="partner">
       <div class="logo"></div>
       <div class="info"></div>
     </div>
   </div>
   <div class="col">
     <div class="partner">
       <div class="logo"></div>
       <div class="info"></div>
     </div>
     <div class="partner">
       <div class="logo"></div>
       <div class="info"></div>
     </div>
     <div class="partner">
       <div class="logo"></div>
       <div class="info"></div>
     </div>
   </div>
 </div>

Рабочая jsfiddle

Обратите внимание, что это быстрое исправление немного нарушает ваш стиль, вам нужно немного отрегулировать ширину.