使用 flexbox 使兩個 div 響應

Question

我正在創建一個聊天應用程序。 我有兩個帶有 flex 屬性的 div。 第一個 div 包含用戶列表，第二個 div 包含聊天數據。 在桌面視圖中，我能夠並排實現兩個 div。 但是當我在移動視圖上查看它時，我想以某種方式隱藏用戶列表 div（與 whatsapp 相同）。 我在媒體查詢中編寫了該邏輯，但它隱藏了所有 div，即我只能看到的空白頁面。

誰能指導我如何使用 flexbox 實現響應？

我錯過了什么嗎？

 .friendContainer { display: grid; grid-template-columns: 2fr 4fr; }.list { display: flex; flex-direction: column; overflow: auto; position: relative; max-height: calc(100vh - 5rem); }.singleListBlock { display: flex; flex-direction: row; justify-content: space-around; }.userIcon img { width: 60px; height: 60px; border-radius: 50%; margin-top: 5px; padding: 0; }.textStyle { padding-left: 10px; }.textStyle h4 { margin: 0; }.textStyle p { margin-top: 0; }.singleListBlock:hover { background-color: #2424; cursor: pointer; } /* chat */.chatList { display: flex; flex-direction: column-reverse; overflow: auto; position: absolute; bottom: 70px; max-height: calc(100vh - 5rem - 60px); }.chatListWithLeft { justify-content: flex-end; text-align: justify; background: #434343; padding: 5px; border-radius: 8px; word-break: break-all; max-width: 50%; margin-left: 0; margin-right: auto; }.chatListWithRight { justify-content: flex-end; text-align: justify; background: #434343; padding: 5px; border-radius: 8px; word-break: break-all; max-width: 50%; margin-left: auto; margin-right: 0; }.elementStyle { display: flex; flex-direction: row; margin: 0 auto; position: absolute; bottom: 0; width: 100%; } @media (max-width: 500px) {.singleListBlock { display: none; } }

 <section class='friendContainer'> <div class='list'> <div class='singleListBlock'> <div class='userIcon'> <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" /> </div> <div class='textStyle'> <h4>Test</h4> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam. </p> </div> </div> <div class='singleListBlock'> <div class='userIcon'> <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" /> </div> <div class='textStyle'> <h4>Test</h4> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam. </p> </div> </div> <div class='singleListBlock'> <div class='userIcon'> <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" /> </div> <div class='textStyle'> <h4>Test</h4> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam. </p> </div> </div> <div class='singleListBlock'> <div class='userIcon'> <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" /> </div> <div class='textStyle'> <h4>Test</h4> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam. </p> </div> </div> </div> <div class='list'> <div class='chatList'> <div class='chatListWithLeft'> <p>Hii...</p> </div> <div class='chatListWithRight'> <p>hi</p> </div> <div class='chatListWithLeft'> <p>hi</p> </div> <div class='chatListWithRight'> <p>hey</p> </div> <div class='chatListWithLeft'> <p>hi there</p> </div> <div class='chatListWithRight'> <p>how</p> </div> <div class='chatListWithLeft'> <p> is going. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente nobis temporibus, dignissimos hic placeat. </p> </div> <div class='chatListWithRight'> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam asperiores provident quo quae suscipit, error obcaecati placeat exercitationem accusamus animi sit eos quasi sunt aut corporis repudiandae iste officia. Aspernatur. </p> </div> <div class='chatListWithLeft'> <p>This is it no.</p> </div> <div class='chatListWithRight'> <p>This is it yes.</p> </div> <div class='chatListWithLeft'> <p>This is it ok.</p> </div> </div> <form> <div class='elementStyle'> <input type="text" style='width: "100%"' /> <button style='height: "60px"' '>Send</button> </div> </form> </div> </section>

Answer 1

將不同的 class 名稱分配給friendContainer 的兩個孩子。 即左列表和右列表。 並且在媒體查詢中給 display: none 到 list-left。

Answer 2

這里。

 .friendContainer { display: grid; grid-template-columns: 2fr 4fr; } @media (max-width: 500px) {.hideOnPhone { display: none;important. }:friendContainer { grid-template-columns; 6fr. } }:list { display; flex: flex-direction; column: overflow; auto: position; relative: max-height; calc(100vh - 5rem): min-height; calc(100vh - 5rem). }:singleListBlock { display; flex: flex-direction; row: justify-content; space-around. }:userIcon img { width; 60px: height; 60px: border-radius; 50%: margin-top; 5px: padding; 0. }:textStyle { padding-left; 10px. }:textStyle h4 { margin; 0. }:textStyle p { margin-top; 0. }:singleListBlock:hover { background-color; #2424: cursor; pointer. } /* chat */:chatList { display; flex: flex-direction; column-reverse: overflow; auto: position; absolute: bottom; 70px: max-height; calc(100vh - 5rem - 60px). }:chatListWithLeft { justify-content; flex-end: text-align; justify: background; #434343: padding; 5px: border-radius; 8px: word-break; break-all: max-width; 50%: margin-left; 0: margin-right; auto. }:chatListWithRight { justify-content; flex-end: text-align; justify: background; #434343: padding; 5px: border-radius; 8px: word-break; break-all: max-width; 50%: margin-left; auto: margin-right; 0. }:elementStyle { display; flex: flex-direction; row: margin; 0 auto: position; absolute: bottom; 0: width; 100%; }

 <section class='friendContainer'> <div class='list hideOnPhone'> <div class='singleListBlock'> <div class='userIcon'> <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" /> </div> <div class='textStyle'> <h4>Test</h4> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam. </p> </div> </div> <div class='singleListBlock'> <div class='userIcon'> <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" /> </div> <div class='textStyle'> <h4>Test</h4> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam. </p> </div> </div> <div class='singleListBlock'> <div class='userIcon'> <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" /> </div> <div class='textStyle'> <h4>Test</h4> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam. </p> </div> </div> <div class='singleListBlock'> <div class='userIcon'> <img src="https://images.unsplash.com/photo-1634926878768-2a5b3c42f139?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=456&q=80" /> </div> <div class='textStyle'> <h4>Test</h4> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, esse explicabo sit harum voluptatum numquam. </p> </div> </div> </div> <div class='list'> <div class='chatList'> <div class='chatListWithLeft'> <p>Hii...</p> </div> <div class='chatListWithRight'> <p>hi</p> </div> <div class='chatListWithLeft'> <p>hi</p> </div> <div class='chatListWithRight'> <p>hey</p> </div> <div class='chatListWithLeft'> <p>hi there</p> </div> <div class='chatListWithRight'> <p>how</p> </div> <div class='chatListWithLeft'> <p> is going. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente nobis temporibus, dignissimos hic placeat. </p> </div> <div class='chatListWithRight'> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam asperiores provident quo quae suscipit, error obcaecati placeat exercitationem accusamus animi sit eos quasi sunt aut corporis repudiandae iste officia. Aspernatur. </p> </div> <div class='chatListWithLeft'> <p>This is it no.</p> </div> <div class='chatListWithRight'> <p>This is it yes.</p> </div> <div class='chatListWithLeft'> <p>This is it ok.</p> </div> </div> <form> <div class='elementStyle'> <input type="text" style='width: "100%"' /> <button style='height: "60px"'>Send</button> </div> </form> </div> </section>