如何在 3 列 css flex box 中制作动态宽度 div
[英]How to make dynamic width div in 3 coloumn css flex box
问题描述
I want to make 3 column layout with flex box.
我想用弹性框制作 3 列布局。 The goal is to make first and last div widths dynamic.目标是使第一个和最后一个 div 宽度动态化。 But the 2nd div max-width is static.但是第二个 div max-width是静态的。
Code:代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body{ min-height: 100% !important; height: 100%; } body{ margin: 0; background-color: #ddd; display: flex; justify-content: space-between; } .left , .center, .right{ height: 100%; } .left{ width: auto; background-color: antiquewhite; } .center{ display: flex; min-height: 100vh; flex-direction: column; width: 100%; max-width: 1200px; background-color: green; } .right{ width: auto; background-color: blue; } </style> </head> <body> <div class="left"> </div> <div class="center"> </div> <div class="right"> </div> </body> </html> Now I am getting the center max width is constant that I expected.现在我得到的center最大宽度是我预期的常数。 But left & right div's not appear always.但left与right div的并不总是出现。 I want to make right & left div appear with dynamic width that based on browser window size.我想打right及left格与基于浏览器窗口大小动态宽度出现。
Update:更新：
current layout:当前布局：
Expected layout:预期布局：
How can I make it work?我怎样才能让它工作？
2 个解决方案
解决方案1
1 已采纳 2020-02-22 13:43:55
Here you go.干得好。
Just apply flex:1 to all of the divs but flex: 1 0 100%;只需将flex:1应用于所有 div，但flex: 1 0 100%; to the center div so it defaults to as wide as it can before hitting the max-width you wanted.到中心 div，因此在达到您想要的max-width之前，它默认为尽可能宽。
html, body { min-height: 100% !important; height: 100%; } body { margin: 0; background-color: #ddd; display: flex; } .left, .center, .right { flex: 1; height: 100%; } .left { width: auto; background-color: red } .center { display: flex; min-height: 100vh; flex-direction: column; flex: 1 0 100%; width: 100%; max-width: 1200px; background-color: green; } .right { width: auto; background-color: blue; }
<div class="left"> </div> <div class="center"> </div> <div class="right"> </div>
解决方案2
0 2020-02-22 07:33:47
does this help?这有帮助吗？
.flex-container { display: flex; justify-content: space-between; background-color: DodgerBlue; } .flex-container > .side { background-color: green; width: 100%; } .flex-container > .center { background-color: #f1f1f1; color: green; max-width: : 100%; height: 100px; } <!DOCTYPE html> <html> <head> </head> <body> <div class="flex-container"> <div class="side"></div> <div class="center"> this will expand as your content grows </div> <div class="side"></div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.