使用 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>