FlexBox 容器没有保存我的 div，有人可以回答我为什么
[英]FlexBox container isn't holding my div, can someone provide me an answer as to why
问题描述
enter image description here
在此处输入图片说明
Hi, I was working on a school project I needed to create a canvas that fills all the remaining width but upon creating the flex box container my chat div wont join/enter the flexbox.嗨，我正在做一个学校项目，我需要创建一个填充所有剩余宽度的画布，但是在创建 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> I have no idea what is wrong with this but this is my first time using flex box I couldn't find anyone else with a similar problem我不知道这有什么问题，但这是我第一次使用 flex box 我找不到其他有类似问题的人
2 个解决方案
解决方案1
0 2021-11-06 22:36:32
From what I can see you have a lot of positioning going on that is somewhat unneeded when using flexbox.从我所看到的，你有很多定位在使用 flexbox 时有些不需要。 Ill give you a basic example.我给你一个基本的例子。 First I set all objects to box sizing border-box to help when using percentages.首先，我将所有对象设置为 box sizing border-box 以在使用百分比时提供帮助。 Position your container with position fixed and place it on the top right (you already have this done).将您的容器放置在固定位置并将其放在右上角（您已经完成了）。 Make it display flex and give it a flex direction of column so the objects stack on top of each other.使其显示 flex 并为其指定列的 flex 方向，以便对象堆叠在彼此的顶部。 Give it a height and width.给它一个高度和宽度。 I use vh(viewport height) and vw(viewport width).我使用 vh（视口高度）和 vw（视口宽度）。 Next your message area will have a property called flex-grow that is set to 1. This allows it to take up all the remaining available space.接下来，您的消息区域将有一个名为 flex-grow 的属性，该属性设置为 1。这允许它占用所有剩余的可用空间。 Next set the height on your chat container I set mine to 25 viewport height.接下来将聊天容器的高度设置为 25 视口高度。 This means your message area will take up all but 25% of the viewport height.这意味着您的消息区域将占据视口高度的 25% 以外的所有区域。 Then I just set the height and width of the chat textarea to 100% and since it now uses border-box box sizing it will just fill the container.然后我只是将聊天文本区域的高度和宽度设置为 100%，因为它现在使用边框框大小，它只会填充容器。
Flexbox and Grid are there to help you position objects while keeping them in the flow of the document so be careful when using position absolute when trying to move objects around. Flexbox 和 Grid 可以帮助您定位对象，同时将它们保持在文档流中，因此在尝试移动对象时使用绝对位置时要小心。 Here is a really good guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and here is more information on positioning.这是一个非常好的 flexbox 指南： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/ 这里有更多关于定位的信息。 Take a good look at how absolute moves objects out of the normal flow of the document https://developer.mozilla.org/en-US/docs/Web/CSS/position仔细看看绝对如何将对象移出文档的正常流程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>
解决方案2
0 2021-11-06 23:01:07
Incase the first answer does not help Ill give you an example on how to position objects using flexbox.如果第一个答案没有帮助，我将举例说明如何使用 flexbox 定位对象。 This keeps objects in the flow of the document and manipulates their position using display flex, flex direction and flex grow.这使对象保持在文档流中，并使用显示 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.