带/不带 flex 的盒子定位答案

【问题标题】：Box positioning with/without flex带/不带 flex 的盒子定位
【发布时间】：2014-07-29 04:38:48
【问题描述】：

我在这里保存了代码：http://codepen.io/anon/pen/FxKHB 也许你最好看看它并尝试帮助我。

我的问题是我必须将带有“甜点”的框放在带有“Entrée”的框下方：之间没有空格。

我在容器中使用 flexbox 布局：

.menuContainer
{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
}

问题：“甜点”框被推到下方，因为“Plat”框中的线条过多。

也许我选择了错误的布局。我之所以选择这个，是因为当窗口/设备的宽度太小时，我需要将所有内容放在一列中。我不能仅仅改变我的盒子的相对位置，因为每个内容都不是静态的。我的意思是，它可以有更多的行。

我该怎么办？有可能吗？

感谢您的帮助！

【问题讨论】：

标签： css layout flexbox

【解决方案1】：

优雅的替代方法是将容器的 align-items 属性更改为 stretch，然后通过将项目设置为弹性框来垂直居中。

我猜这不是理想的效果，但在不更改标记的情况下，这是我能想到的最佳解决方案。

PEN

【讨论】：

感谢您的回复。确实，它很优雅，但并不完美。在钢笔中，我添加了一些边框，但最终结果是没有。也许我必须完全改变布局，只做两列，但在此之后做出响应并不容易，因为它不仅仅是一列接一列。
类似你的意思是在我添加的笔上吗？我看到一个 1px 实心 #FF594E 边框。不久前我遇到了类似的问题，最终使用我的解决方案来获得良好的响应式布局。如果您真的想要，您可以根据视口更改整个布局，但这是另一回事 :)
“根据视口更改布局” 嗯，我觉得这还不错！我会尽力。谢谢！
您应该可以通过这种方式解决您的问题，但请记住，如果您创建两个不同的布局并使用媒体查询隐藏一个布局，您将加载两倍的内容，因此页面加载速度会变慢！跨度>
是的，这就是我在尝试过程中的想法。最后，我决定只使用两个简单的列并反转“Plat”和“Dessert”，以便在所有内容都在一列中时获得良好的顺序。 codepen.io/Rictus/pen/uqyDK我觉得更好。当我们有两个列时，“甜点”在“平台”之后并不重要，因为我们可以看到所有内容。