html-如何针对不同的高度元素水平而不是垂直排列CSS列？

我的每一列都有不同的高度.如何使用CSS将列排序为水平而不是垂直？同样,将鼠标悬停在每个项目上时,高度会稍微增加一点,而不会重叠在下面的项目上.

.parent{
    /*display: flex;
    flex-flow: column wrap;
    height:600px; */

    column-count: 3;
    column-gap: 20px;
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
}
.child{
}
.child:hover{
    min-height:300px;
}

<div class="parent">
    <div class="child" style="height:100px">1</div>
    <div class="child" style="height:120px">2</div>
    <div class="child"  style="height:200px">3</div>
    <div class="child"  style="height:100px">4</div>
    <div class="child"  style="height:50px">5</div>
    <div class="child"  style="height:100px">6</div>
    <div class="child"  style="height:100px">7</div>
    <div class="child"  style="height:100px">8</div>
    <div class="child"  style="height:100px">9</div>
</div>

当前订单是

147
258
369

但是我需要

123
456
789

最佳答案

一种可能性是使用flex列,并根据它们对模3的位置排序.此外,插入伪元素以强制换行

.parent {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  height: 500px;
  width: 300px;
}

.child {
  margin: 5px;
  width: 100px;
  background-color: lightgreen;
  transition: padding 1s;
}

.child:hover {
   padding: 30px 0px;
}

.child:nth-child(3n + 1) {
  order: 1;
}

.child:nth-child(3n + 2) {
  order: 10;
}

.child:nth-child(3n) {
  order: 20;
}

.parent:before,.parent:after {
  content: "";
  width: 0px;
  height: 999px;
}

.parent:before {
  order: 5;
}

.parent:after {
  order: 15;
}

<div class="parent">
  <div class="child" style="height:100px">1</div>
  <div class="child" style="height:120px">2</div>
  <div class="child" style="height:200px">3</div>
  <div class="child" style="height:100px">4</div>
  <div class="child" style="height:50px">5</div>
  <div class="child" style="height:100px">6</div>
  <div class="child" style="height:100px">7</div>
  <div class="child" style="height:100px">8</div>
  <div class="child" style="height:100px">9</div>
</div>