Столбцы flex box против строк

$(".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, я хочу, чтобы он толкал его столбец, а не строку.

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

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

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

Paulie_D 31.10.2018 12:44
1
1
131
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Если вам нужно 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

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

Это также нарушает порядок вашего списка - я не знаю, актуально ли это?

Jonas Praem 31.10.2018 12:44

Удивительный. И такое простое решение! Спасибо за это :)

Fez Abbas 31.10.2018 12:59

Другие вопросы по теме