问题:今天遇到一个css样式问题,我父div用了 display: flex; 然后有两个子div 第一个子div我设置了100%的宽度,第二个子div也设置了100%的宽度 ,但是两个子div还是同行显示 ,不对我现在想让第一个子div已经占满了第一行,第二个子div就换行显示(也要完整展示)
具体代码展示
<!-- 展示聊天界面-->
<div class="a_single_examinee_chat">
<!-- 聊天内容区域 -->
<div class="chat-window">
</div>
<!-- 输入框-->
<div class="input-box">
<!-- <input type="text" @keyup.enter="sendMessage">-->
</div>
</div>
css样式如下
.a_single_examinee_chat {
display: flex;
flex-wrap: wrap; /* 设置 flex 容器换行显示 */
background-color: rgba(255, 255, 255, 1);
width: 40%;
height: 682px;
}
.chat-window {
width: 100%;
border-top: 7px solid rgba(196, 229, 255, 1);
height: 510px;
overflow-y: auto;
background-color: #dbd2d2;
}
.input-box {
width: 100%;
height: 172px;
opacity: 1;
background: rgba(242, 243, 245, 1);
}
效果图如下:
底下箭头样式为:input-box
justify-content: center 和 align-items: center 分别表示水平和垂直居中