在此處輸入圖片說明
嗨，我正在做一個學校專案，我需要創建一個填充所有剩余寬度的畫布，但是在創建 flex box 容器時，我的聊天 div 不會加入/進入 flexbox。
#Right-Box-Wrapper{
display: flex;
position: fixed;
width: 320px;
min-width: 320px;
height: 100% !important;
right: 0px;
top: 0px;
border: 8px solid black;
border-radius: 10px;
background-color: #484848;
}
#Input-Wrapper{
display: flex;
justify-content: center;
}
#mwrap{
width: 100%;
display: flex;
justify-content: center;
}
#message-wrapper::-webkit-scrollbar{
width: 5px;
}
#message-wrapper::-webkit-scrollbar-thumb{
background: black;
border-radius: 5px;
}
#message-wrapper::-webkit-scrollbar-track{
background: rgb(85, 85, 85);
border-radius: 5px;
}
#message-wrapper{
top: 12px;
position: absolute;
height: 80%;
width: 95%;
background-color: #333333;
border: 3px solid black;
overflow: auto;
overflow-wrap: break-word;
}
#a{
position: fixed;
height: 100%;
width: 10px;
background-color: #262626;
top: 0px;
right: 0px;
}
#inpbox{
background-color: #333333;
position: absolute;
width: 95%;
height: 50%;
top: 80px;
text-align: left;
color: whitesmoke;
border: 3px black solid;
font-family: sans-serif;
font-size: 13px;
resize: none;
}
#inpbox::-webkit-scrollbar{
width: 5px;
}
#inpbox::-webkit-scrollbar-thumb{
background: black;
border-radius: 5px;
}
#inpbox::-webkit-scrollbar-track{
background: rgb(85, 85, 85);
border-radius: 5px;
}
#inpbox:focus{
outline: none;
}
#Chat-Wrapper{
position: absolute;
bottom: 0px;
right: 0px;
z-index: 50;
width: 100%;
height: 25%;
}
.Inputs{
color: whitesmoke;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top: black solid 2px;
border-bottom: black solid 2px;
font-family: sans-serif;
}
.Tlc{
color:red;
font-weight: 1000;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top: black solid 2px;
border-bottom: black solid 2px;
font-family: sans-serif;
}
.dice_roll{
color:greenyellow;
font-weight: 1250;
padding-top: 8px;
padding-bottom:8px;
padding-right: 3px;
padding-left: 3px;
border-top:greenyellow solid 2px;
border-bottom: greenyellow solid 2px;
font-family: sans-serif;
}
#canvas-wrapper{
justify-content: center;
display: flex;
min-width: 350px;
height: 400px;
background-color: rgb(112, 112, 78);
}
#screen-wrap{
display: flex;
flex-direction: row;
}
body{
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
}
#flxt{
display: flex;
flex-direction: row;
} <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="site.css">
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div id = "screen-wrap">
<div id = "canvas-wrapper">
<canvas id = "canv">
</canvas>
</div>
<div style="background-color: aqua;width: 100px;height: 100px;">
<canvas id = "canv">
</canvas>
</div>
<div id = "Right-Box-Wrapper">
<div id = "mwrap">
<div id = "message-wrapper">
</div>
</div>
<div id = "Chat-Wrapper">
<div id = "Input-Wrapper">
<textarea placeholder="Type here...." id = "inpbox"></textarea>
</div>
</div>
</div>
</div>
<div id = "flxt">
<div style="padding: 10px;background-color: aqua;">
asdasdasd
</div>
<div style="padding: 10px;background-color: aqua;">
asdasdasdasdasd
</div>
</div>
<script src="site.js"></script>
</body>
</html>我不知道這有什么問題，但這是我第一次使用 flex box 我找不到其他有類似問題的人
uj5u.com熱心網友回復：
從我所看到的，你有很多定位在使用 flexbox 時有些不需要。我給你一個基本的例子。首先，我將所有物件設定為 box sizing border-box 以在使用百分比時提供幫助。將您的容器放置在固定位置并將其放在右上角（您已經完成了）。使其顯示 flex 并為其指定列的 flex 方向，以便物件堆疊在彼此的頂部。給它一個高度和寬度。我使用 vh（視口高度）和 vw（視口寬度）。接下來，您的訊息區域將有一個名為 flex-grow 的屬性，該屬性設定為 1。這允許它占用所有剩余的可用空間。接下來將聊天容器的高度設定為 25 視口高度。這意味著您的訊息區域將占據視口高度的 25% 以外的所有區域。
Flexbox 和 Grid 可以幫助您定位物件，同時將它們保持在檔案流中，因此在嘗試移動物件時使用絕對位置時要小心。這是一個非常好的 flexbox 指南：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/ 這里有更多關于定位的資訊。仔細看看絕對如何將物件移出檔案的正常流程https://developer.mozilla.org/en-US/docs/Web/CSS/position
* {
box-sizing: border-box;
}
.chat-container {
position: fixed;
right: 0;
top: 0;
display: flex;
flex-direction: column;
height: 100vh;
width: 40vh;
}
.message {
flex-grow: 1;
background-color: #808080;
border: 4px solid #000;
border-bottom: 2px solid #000;
border-radius: 10px 10px 0 0;
}
.chat {
height: 25vh;
border: 4px solid #000;
border-top: 2px solid #000;
border-radius: 0 0 10px 10px;
}
.chat-area {
width: 100%;
height: 100%;
background-color: #808080;
border-radius: 0 0 5px 5px;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1 */
color: #fff;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #fff;
}<div class="chat-container">
<div class="message"></div>
<div class="chat">
<textarea placeholder="input message here" class="chat-area"></textarea>
</div>
</div>uj5u.com熱心網友回復：
如果第一個答案沒有幫助，我將舉例說明如何使用 flexbox 定位物件。這使物件保持在檔案流中，并使用顯示 flex、flex 方向和 flex 增長來操縱它們的位置。
body {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
height: 100vh;
width: 100vw;
}
.remaining-area {
flex-grow: 1;
background-color: #f2f2f2;
}
.chat-area {
width: 30vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.message {
flex-grow: 1;
background-color: #ccc;
}
.chat {
height: 25vh;
}<div class="wrapper">
<div class="remaining-area">
<p>this area is left empty</p>
</div>
<div class="chat-area">
<div class="message">
<p>message area</p>
</div>
<div class="chat">
<p>chat area</p>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/351320.html
標籤：javascript html css 弹性盒