javascript - 在包装上应用不同的 CSS 样式

Question

我一辈子都想不出从哪里开始 - 基本上我想要实现的是一个三列的行，如果列不能水平放置，它们可以在彼此下面换行。行的高度应该是最小的以适合元素，当所有单元格都排成一行时，行的高度是固定的。如果行对它们来说太大，“单元格”的内容应该垂直居中，例如:

[           ] [ Big     ] [           ]
[  Content1 ] [         ] [ Content2  ]
[           ] [ Content ] [           ]

应该包装类似...

[           ] [ Big     ]
[  Content1 ] [         ] 
[           ] [ Content ]
      [ Content2  ]

然后...

[  Content1 ] 
 [ Big     ]
 [         ] 
 [ Content ]
[ Content2  ]

我遇到的问题是..我怎样才能缩小/增加“单元格”的高度，使它们自己的内容和水平邻居的内容更大？

我最好的想法是使用 JS 查看 offsetHeight 以确定它们是否在同一“行”上，然后相应地调整高度..但它看起来有点笨拙。有更好的想法吗？

谢谢大家!

Answer 1

是这样的吗？

.row {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
}

.row div {
    border: 1px solid;
    margin: .5em;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

p {
    margin: .5em;
}

<div class="row">
    <div>
        <p>Content 1</p>
    </div>
    <div>
        <p>Big</p>
        <p>Content</p>
    </div>
    <div>
        <p>Content 1</p>
    </div>
</div>

(参见 jsfiddle)