flex或flex-grow、flex-grow或flex
我使用flex来调整这些元素的宽度: main、.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 https://i.ibb.co/PrbZdXg/flexeded.png更改flex
这是flex更改为flex-grow时的样子：
flex-grow为什么不能正常工作
取而代之的是使用速记“flex”来生成与缩放元素相同的输出。我更喜欢使用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
Stack Overflow用户
发布于 2020-09-05 22:58:19
如果您只将flex更改为flex-grow，那么我认为您将丢失flex-shrink和flex-basis的隐式属性。如果检查元素并查看CSS属性，则可以从速记中看到隐式属性。
因此，如果您只是将flex:2更改为flex-grow:2，则还需要声明flex-shrink和flex-basis (至少我是这么认为的)
Stack Overflow用户
发布于 2020-09-05 23:09:11
你应该这样做
flex: 1 0 100%第一个参数是flex-grow
第二个参数是flex- is
第三个参数是flex-basis
Stack Overflow用户
发布于 2020-09-06 02:44:29
我知道我的代码实际发生了什么。我试着用section > * { flex-basis: 200px;}修改section > * {flex-basis: 100%;}这一行。更改main {flex-grow: 7;}更改footer {flex-basis: 800px;}
最后，弹性增长的工作就是它应该做的。感谢大家抽出时间来回答我的问题
https://stackoverflow.com/questions/63755161
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号