div 下的 CSS div答案

【问题标题】：CSS Div under Divdiv 下的 CSS div
【发布时间】：2016-03-21 14:23:08
【问题描述】：

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

我在想 MaterializeCSS。我的布局如下：

<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 类会起作用，但我的项目显然会出现在网站顶部...

如果有人遇到同样的问题，我将不胜感激！

【问题讨论】：

display: flex 增加了一些魔力，但是您是否需要使用子属性来管理这种魔力。如果您不知道 flexbox 的工作原理，请使用另一种技术（inline-block、float、table-cell 等）
你伪造了一个dot，.valign-wrapper btw
我的错，但这些点只是在这里丢失，而不是在实际代码中......@MarcosPérezGude 我正在使用 css 框架，我无能为力

【解决方案1】：

你需要添加flex方向：

.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/

【讨论】：