Flex or flex-grow, flex-grow or flex

Question

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:

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:

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 5-Sep-20 4:16am

Dec Fathani

Updated 7-Sep-20 1:08am

Richard Deeming

v4

Add a Solution

1 solution

Add a Solution

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

Richard Deeming · Accepted Answer · 2020-09-07T03:16:00

Look at the MDN documentation:

flex - CSS: Cascading Style Sheets | MDN[^]:
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:

CSS

flex: 2;

is equivalent to:

CSS

flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;

If you change it to:

CSS

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%:

CSS

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[^]

Flex or flex-grow, flex-grow or flex

1 solution

Solution 1

Add your solution here

Preview 0

Flex or flex-grow, flex-grow or flex

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us