flex 或 flex-grow, flex-grow 或 flex
[英]flex or flex-grow, flex-grow or flex
问题描述
我正在使用 flex 来调整这些元素的宽度； 主要，.aside1，.aside2。 页面如我所料。 据我所知，flex 是 flex-grow、flex-shrink 和 flex-basis 的简写。
因为 flex 的第一个简写是 flex-grow，所以我尝试将 flex 更改为 flex-grow 以对某些元素进行宽度调整，希望它会给出相同的结果，但结果并不如预期。
带有“flex”的代码
.container { margin: 0 auto; background-color: lightblue; width: 800px; } section { display: flex; flex-wrap: wrap; } section > * { flex-basis: 100%; } main { flex: 2; order: 2; background-color: tomato; text-align: center; } .aside1 { flex: 1; order: 1; background-color: green; text-align: center; } .aside2 { flex: 1; order: 3; background-color: mediumorchid; text-align: center; } footer { order: 4; background-color: teal; text-align: center; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Lagi</title> <link rel="stylesheet" a href="style.css"> </head> <body> <div class="container"> <section> <main> <h1>Main</h1> </main> <aside class="aside1"> <h1>Aside1</h1> </aside> <aside class="aside2"> <h1>Aside2</h1> </aside> <footer> <h1>Footer</h1> </footer> </section> </div><!--endContainer--> </body> </html>
我用 flex-grow 改变了 flex https://i.ibb.co/PrbZdXg/flexeded.png
这是当 flex 变为 flex-grow 时的样子：
为什么 flex-grow 不能正常工作
而是使用速记 'flex'，为缩放元素生成相同的输出。 我更喜欢使用 flex-grow。 所以，我不会被速记订单所迷惑
我还为 flex-grow 尝试了一个简单的代码行。 在这一行中，flex-grow 进展顺利
.container { display: flex; text-align: center; background-color: grey; width: 800px; } .box1 { flex-grow: 1; background-color: green; height: 300px; font-size: 30px; } .box2 { flex-grow: 2; background-color: red; height: 300px; font-size: 30px; } .box3 { flex-grow: 1; background-color: blue; height: 300px; font-size: 30px; }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex or flex-grow</title> </head> <body> <div class="container"> <div class="box1">A</div> <div class="box2">B</div> <div class="box3">C</div> </div> </body> </html>
3 个解决方案
解决方案1
2 2020-09-05 14:58:19
如果您只是将flex更改为flex-grow ，那么我认为您将失去flex-shrink和flex-basis的隐式属性。 如果您检查元素并查看 CSS 属性，您可以从速记中看到隐式属性。
因此，如果您只是将flex:2更改为flex-grow:2 ，则还需要声明flex-shrink和flex-basis （或者我认为）
解决方案2
1 2020-09-05 15:09:10
你应该这样做
flex: 1 0 100%
第一个参数是 flex-grow
第二个参数是 flex-shrink
第三个参数是 flex-basis
解决方案3
0 2020-09-05 18:44:29
我知道我的代码实际发生了什么。 我试图改变这一行section > * {flex-basis: 100%;}与section > * { flex-basis: 200px;} 。 改变main {flex-grow: 7;}改变footer {flex-basis: 800px;}
最后，一个 flex-grow 工作正常。 感谢大家抽出时间回答我的问题
了解 flex-grow
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.