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

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

            <aside class="aside1">

            <aside class="aside2">




This is my css:
<blockquote class="quote"><div class="op">Quote:</div>.container
    margin: 0 auto;
    background-color: lightblue;
    width: 800px;

    display: flex;
    flex-wrap: wrap;   

section > *
  flex-basis: 100%;

    flex: 2;
    order: 2;
    background-color: tomato;
    text-align: center;

    flex: 1;
    order: 1;
    background-color: green;
    text-align: center;

    flex: 1;
    order: 3;
    background-color: mediumorchid;
    text-align: center;

    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.
Updated 7-Sep-20 2:08am

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