css - 当高度增加时如何将 flex 元素保持在容器顶部

Question

我正在开发一个 Accordion 下拉菜单，并使用 flexbox 来对齐页面上的所有内容。然而，我遇到了一个问题，即元素垂直居中，即使我希望它们保持在顶部。

您可以在这段代码笔中明白我的意思，我希望这些元素保留在顶部，并且仅在单击时按下下拉列表的一侧。

https://codepen.io/maciekmat/pen/QWLqred

.loh-faq-container{
    display: flex;
    margin: 2em 0 4em;
    align-items: flex-start;
    align-self: flex-start;
}

.loh-faq-wrap{
    margin: auto;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: flex-start;
}

据我了解，align-items: flex-start;应该可以，特别是在应用于子 flex 盒时，但我很可能是错的。这是怎么回事？

Answer 1

这似乎是您在 .loh-faq-wrap 上的 margin: auto; 正在执行此操作。

更改自:

.loh-faq-wrap {
    margin: auto;
}

对此:

.loh-faq-wrap {
    margin: 0 auto;
}

自动边距可用于使内容居中。所以我会推荐reading up on that 。