如何让 div 的 flex 容器只使用一列

Question

我需要在 React 中重构 GetStream 聊天。我的问题是它有足够的 space 但消息只使用了所有可用 space 的一半。当我开始在浏览器中查看布局时，我注意到 div 容器被分成两边，我怀疑这是我的问题的原因。

我只需要一个大列而不是两个大列，或者即使第二个列能够根据需要使用尽可能多的 space，但不知道如何在 Flex 中实现。

抱歉，如果问题很空，我还是 flex 的新手

Answer 1

您选择了(?):

width: 100%;
display: flex;
flex-direction: column;
align-content: flex-start;

justify-content 不会在列的“左”或“右”方向上工作，这只会改变“顶部”和“底部”（或中心）。例如，您需要 align-content。

Answer 2

你应该尝试这样做。

width: (your own value)
display: flex
flex-direction: column
justify-content: flex-start or center ( Depending on your preference )

确保您没有为同一 div 多次设置不同的样式

How to make div container with flex use only one column