Click here to Skip to main content
14,773,657 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.

This is my code pen for a code flex or flex-grow[^]

This is how it looks when a flex change to flex-grow https://i.ibb.co/PZsHSM7/flex-or-flex-grow.png[^]

This is my html:
<blockquote class="quote"><div class="op">Quote:</div><!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></blockquote>

This is my css:
<blockquote class="quote"><div class="op">Quote:</div>.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;
}


What I have tried:

I am still learning a Flexbox. so I don't know how to.
Need help.
Posted
Updated 7-Sep-20 2:08am
v4

1 solution

Look at the MDN documentation:
One-value syntax: the value must be one of:
  • a <number>: In this case it is interpreted as flex: <number> 1 0; the <flex-shrink> value is assumed to be 1 and the <flex-basis> value is assumed to be 0.
So:
flex: 2;
is equivalent to:
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;
If you change it to:
flex-grow: 2;
you lose the flex-shrink and flex-basis values. flex-shrink defaults to 1, but you've set the default flex-basis to 100%:
section > *
{
  flex-basis: 100%;
}
That means the elements will stretch to fill the full width of the container, which is why you're getting a "stacked" layout.

If you add flex-basis: auto; to each element which you change to flex-grow, you will keep the same layout:
flex or flex-grow[^]
   
Comments
Dec Fathani 8-Sep-20 0:54am
   
Thanks a lot..

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900