文章标题 原创 翻译 转载 文章内容 用过Qt的QHBoxLayout,QVBoxLayout再看flex布局有很多相似之处,特别要注意的是flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,后面两个是可以省略的。当一个容器没有显示出来时要注意它应该设置宽高或者flex值是不是大于0。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { display: flex; flex-direction: row; background-color: rgb(255, 255, 255); justify-content: center; } .main { display: flex; flex-direction: column; background-color: rgb(15, 15, 16); width: 760px; height: 600px; border: 1px solid rgb(14, 148, 150); -webkit-border-radius: 5px 5px 0px 0px; border-radius:5px 5px 0px 0px; } .title { display: inline-flex; height: 40px; background-color: rgb(14, 148, 150); color: rgb(255, 255, 255); align-items: center; padding-left: 20px; } .content { display: flex; flex-direction: row; flex: 1; } .left { border-right: 1px solid rgb(60, 60, 65); background-color: rgb(20, 20, 21); width: 200px; } .left .search { display: flex; } .left .searchInput { flex: 1; height: 38px; background-color: rgb(15, 15, 16); font-size: 14px; border: none; border-bottom: 1px solid rgb(46, 46, 51); color: rgb(255, 255, 255); padding-left: 5px; padding-right: 5px; } .right { display: flex; flex: 1; flex-direction: column; } .right .profile { flex: 1; background-color: rgb(30, 30, 33); border-bottom: 1px solid rgb(69, 69, 75); } .right .chat { flex: 7; background-color: rgb(20, 20, 21); } .right .input { flex: 2; background-color: rgb(15, 15, 16); border-top: 1px solid rgb(50, 52, 56); } </style> </head> <body> <div class="main"> <div class="title"> Flex Layout Test </div> <div class="content"> <div class="left"> <div class="search"> <input class="searchInput" type="text"> </div> <div class="list"> </div> </div> <div class="right"> <div class="profile"> </div> <div class="chat"> </div> <div class="input"> </div> </div> </div> </div> </body> </html> ``` **效果图** ![flex布局效果图](/upload/o_1bb5r8g101tfbifke56411n5ia.png) 文章类别 Python Mobile Android Java Shell Life Database Bug Windows IOS Tools Boost Node.js Mac Product Tips C/C++ Golang Javascript React Qt MQ MongoDB Design Web Linux LLM ChatGPT RAG AI 提交