使用 Flexbox 将列中的 div 元素彼此对齐

Question

我目前正在构建一个聊天网络应用程序，并且已经在前端工作了一段时间。我刚刚遇到 flexbox，因为我想知道如何将 div 元素居中，但我不知道如何按照我想要的方式居中。我的目标是将蓝色背景的 2 个元素移动到“聊天”标题正下方的中心，因此它们也与标记为绿色的 2 个元素（黑色方块的位置）处于同一级别.我在这里遇到的问题是，我正在尝试同时使用列和行方向，因为绿色和蓝色框中的 2 个元素垂直对齐，并且两个框应该彼此水平对齐。我尝试将绿色和蓝色元素分别放在一个 flex 容器中，然后将一个容器包裹起来，使它们水平对齐，但它也没有得到我想要的结果，我认为有更好的方法来做到这一点。谢谢你帮助我！

 <div class="container-2">

            <div class="room-section" id="display-room">
                {{room}}
            </div>

            <div class="room-section">
                <nav id="sidebar">
                    <h4>Rooms</h4>
                    {% for room in rooms %}
                        <button id="{{ room|title }}" class="select-room">{{ room|title }}</button>
                    {% endfor %}
                </nav>
            </div>

            <div class="message-section" id="display-message-section"></div>

            <div class="input-section" id="input-area">
                <input type="text" id="user_message" placeholder="Type message..." autocomplete="off">
                <button type="button" id="send_message">SEND</button>
            </div>

        </div>

.container-2 {
    display: flex;
    flex-direction: column;
}

Answer 1

usr flex-direction: row 横向显示

Answer 2

VS code

Answer 3

你可以这样做：

.container-2 {
display: flex; 
justify-content: space-between;//or you can check the other properties of justify-content
}

但是这里你可能会因为这条线而遇到一些问题：

<div class="room-section" id="display-room">
                {{room}}
            </div>

            <div class="room-section">
                <nav id="sidebar">
                    <h4>Rooms</h4>
                    {% for room in rooms %}
                        <button id="{{ room|title }}" class="select-room">{{ room|title }}</button>
                    {% endfor %}
                </nav>
            </div>

您可能需要做的是将它们都放在同一个父 div 中。