等高列- Flexbox &Flexbox包装:包装
等高列- Flexbox &Flexbox包装:包装
提问于 2017-04-04 21:10:50
我正在做一个布局，我不知道如何使这些列的高度相等，特别是当文本包装时的绿色区域。你能帮上忙吗？
我的html模板，里面有更多.类别容器.
<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 & Sides</h4>
</div>
</div>我的弹性容器的css是.
.flex-container {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}这是一个代码链接，如果这有助于http://codepen.io/johnsonjpj/pen/evopaV?editors=1100的话
编辑：，我已经更新了钢笔，并在类别容器中增加了一个高度，并使其显示: flex。然后我在h4中添加了flex-grow。我怎么才能把它垂直地放在那片绿地里？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-04-04 21:27:50
代码中任何地方都没有定义高度。因此，您的文本块没有理由具有相同的高度。它们的高度由内容定义，这是一个默认设置(height: auto)。
您需要在布局中的某个位置定义一个高度，无论是在body元素的高处，还是在靠近文本的容器元素上。然后，您可以建立等高，并使用flex属性进行垂直和水平对齐。
Stack Overflow用户
发布于 2017-04-04 21:19:52
当您调整页面的大小时，所有文本框都位于一行上的点和位于两行上的点(将浏览器的大小调整为宽/窄)。
由于您的问题处于中间位置，我建议使用CSS @media查询将.category-container h4的高度属性更改为预先确定的值，您知道这些值看起来还可以。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43217786
复制相关文章
相似问题
腾讯云开发者
