flex or flex-grow, flex-grow or flex

Question

i am using a flex to adjust a width for these element; main, .aside1, .aside2. a page comes as i expected. as i know flex is a shorthand for flex-grow, flex-shrink, and flex-basis.
because a first shorthand for a flex is a flex-grow, so i try to change a flex to flex-grow to make width adjustment for some elements hoping it will give a same results, but a results are not as expected.

The code with '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>

i change flex with flex-grow https://i.ibb.co/PrbZdXg/flexeded.png

this is how it looks when a flex change to flex-grow:

why flex-grow doesn't work as it should

instead using a shorthand 'flex', to make same output for scalling an element . i prefer using a flex-grow. so, i'm not confuse by a shorthand order

i also tried a simple code line for a flex-grow. in this line a flex-grow is going well

.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>

Please include your code & images in the question, rather than linking to external resources. This is especially important in case of your question being useful in the future to others, but the external resources no longer being available. — Reed
And it's not clear to me from your question what code you are changing. Are you simply replacing every single flex with flex-grow? Or are you writing flex: 1; flex-grow: whatever to override just the shorthand? Are you only changing some of them? — Reed
@Reed thanks for a suggestion and info. i've added a new description in a question — Dedec

Reed Reed · Accepted Answer · 2020-09-05T14:58:19

If you're only changing flex to flex-grow, then I think you lose the implicit properties for flex-shrink and flex-basis. If you inspect the elements & view the CSS property, you can see the implicit properties from the shorthand.

So if you'r ejust changing flex:2 to flex-grow:2, you'll need to also declare the flex-shrink and flex-basis (or so I think)

flex or flex-grow, flex-grow or flex

3 Answers