css - 使用 Flexbox 将列中的 div 元素对齐
问题描述
我目前正在构建一个聊天网络应用程序,并且已经在前端工作了一段时间。我刚刚遇到了 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;
}
解决方案
你可以这样做:
.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 中。
推荐阅读
- android - TFLite - 对象检测 - 自定义模型 - 无法从带有 * 字节的 Java 缓冲区复制到带有 * 字节的 TensorFlowLite 张量
- mysql - MySQL - 使用二级索引列获取数据时的结果顺序保证
- c++ - 我是否适合在构建系统中使用 shell 脚本而不是 AX_CHECK_COMPILE_FLAG?
- java - 可以在朴素贝叶斯算法之前应用 PCA 输出特征 - Apache Spark
- python - 用于在 python 中循环浮点数
- powershell - 在 Powershell 中动态使用数组值作为 API POST 参数
- javascript - 处理事件输入和去抖动功能
- python - Python 集允许添加重复的元组坐标而不识别存在的要删除的元组
- pdf - 使用 Ghostscript 更改 PDF 不透明度
- swift - 在委托中仅传递索引而不是 UICollectionViewCell