Question

我在布局上工作，我无法弄清楚如何让这些列高度相等，特别是文本包装时的绿色区域。你能帮我吗？

我的html模板，里面有更多的.category-containers ...

<div class="flex-container">
  <div class="category-container">
    <a href="#" class="img-gallery-col medium-internal-page-static-image" style="background-image: url('http://placehold.it/800/800');">
    </a>
    <h4 class="text-center">Salads &amp; Sides</h4>
  </div>
</div>

我对flex-container的css是......

.flex-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

如果这有助于http://codepen.io/johnsonjpj/pen/evopaV?editors=1100

，那么这是一个代码链接

编辑：我更新了笔并为类别容器添加了一个高度，并将其显示为：flex。然后我添加了flex-grow到h4。如何在绿色区域内垂直居中？

Answer 1

您的代码中没有任何高度定义。因此，您的文本块没有理由具有相同的高度。它们的高度由内容定义，这是默认设置（WITH {input} AS S UNWIND S AS stat WITH stat.key.str as K, stat.value as value UNWIND K as key WITH apoc.convert.fromJsonMap(key) as map, value ...）。

您需要在布局中的某个位置定义高度，无论是在height: auto元素上还是在靠近文本的容器元素上。然后，您可以建立相等的高度，并使用flex属性进行垂直和水平对齐。

Answer 2

当您调整页面大小时，所有文本框都在一行上的点，以及它们全部在两行上的点（将浏览器调整为宽/窄）。

由于你在这个问题的中间地带有这个问题，我建议使用CSS @media查询将.category-container h4的高度属性更改为你知道看起来没问题的预定值。

等高柱 - Flexbox＆amp; flex-wrap：wrap

2 个答案: