Div Div下的CSS Div

Question

我在设置div以显示在另一个div下时遇到了很多麻烦（就像他们正常做的那样）。

我正在使用MaterialiseCSS。我的布局如下：

<div class="container valign-wrapper">
    <div class="customClass"></div>
    <div class="customClass"></div>
</div>

和css：

.valign-wrapper{
    display: flex;
    align-items: center;
}

.customClass{
    margin: 0 auto;
    /* text and font css */
}

但是，即使添加width:100%或更改显示类也不会使两个div垂直显示，它们会并排显示。我发现删除valign-wrapper课程会有效，但我的项目显然会显示在网站的顶部......

如果有人遇到同样的问题我会很感激帮助！

Answer 1

您需要添加弹性方向：

.valign-wrapper { flex-direction: column; }

这样，弹性项目就被定位为一列。或者，如果您需要使用flex-direction: row;（默认），则可以使用

.valign-wrapper { flex-wrap: wrap; }
.customClass { flex-basis: 100%; }

仍然保持行样式，但让你的两个项目换行并最终定位在彼此之上。

尽管帖子是从2013年开始的，但它仍然以一种很好的方式教导了flexbox的神奇之处，我可以建议所有人阅读它：https://css-tricks.com/snippets/css/a-guide-to-flexbox/