CSS properties - flex-related

revision: March 16, 2024

Content

flex property flex-basis property flex-direction property flex-flow property flex-grow property flex-shrink property flex-wrap property

flex property

top

- is a shorthand property for: "flex-grow", "flex-shrink", "flex-basis".

The flex property sets the flexible length on flexible items.

Note: If the element is not a flexible item, the flex property has no effect.

CSS syntax : flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

Property values:

flex-grow : a number specifying how much the item will grow relative to the rest of the flexible items

flex-shrink : a number specifying how much the item will shrink relative to the rest of the flexible items

flex-basis : the length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit

auto : same as 1 1 auto.

initial : same as 0 1 auto

none : same as 0 0 auto.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.flex="1"

example: flex property

RED

BLUE

Green div with more content.

In this example, the percentage of flex creates different layouts for different screen sizes.

Resize the browser window to see that the direction changes when the screen size is 900px or smaller.

code:

                    <div>
                        <div id="Div-A">
                            <div style="background-color:coral;">RED</div>
                            <div style="background-color:lightblue;">BLUE</div>  
                            <div style="background-color:lightgreen;">Green div with more content.</div>
                        </div><br>
                        <p>In this example, the percentage of flex creates different layouts for different 
                        screen sizes.</p>
                        <p><b>Resize the browser window to see that the direction changes when the screen 
                        size is 900px or smaller.</b></p>
                        <div id="Div-B">
                            <div class="flex-item-left">1</div>
                            <div class="flex-item-right">2</div>
                        </div>
                    </div>
                    <style>
                        #Div-A {width: 20vw; height: 20vh; border: 0.2vw solid black; display: flex;}
                        #Div-A div {-ms-flex: 1;  /* IE 10 */flex: 1;}
                        #Div-B { display: flex; flex-wrap: wrap; font-size: 2vw;text-align: center;}
                        .flex-item-left {background-color: #f1f1f1;padding: 1vw; flex: 50%;}
                        .flex-item-right {background-color: dodgerblue; padding: 1vw;flex: 50%;}
                        /* Responsive layout - makes a one column-layout instead of a two-column layout */
                        @media (max-width: 900px) {
                            .flex-item-right, .flex-item-left { flex: 100%;}
                        }
                    </style>

flex-basis property

top

- specifies the initial length of a flexible item.

Note: If the element is not a flexible item, the flex-basis property has no effect.

CSS syntax : flex-basis: number | auto | initial | inherit;

Property values:

number : a length unit, or percentage, specifying the initial length of the flexible item(s)

auto : default value. The length is equal to the length of the flexible item. If the item has no length specified, the length will be according to its content.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.flex="1"

example: flex-basis property

Set the initial length of the flex items to 50 pixels, with an exception; set the initial length of the second flex item to 100 pixels:

4vw

8vw

4vw

code:

                <div>
                    <p>Set the initial length of the flex items to 50 pixels, with an exception; set the initial length of the second flex item to 100 pixels:</p>
                    <div id="Div-C">
                        <div style="background-color:coral;">4vw</div>
                        <div style="background-color:lightblue;">8vw</div>
                        <div style="background-color:khaki;">4vw</div>
                        <div style="background-color:pink;">4vw</div>
                        <div style="background-color:lightgrey;">4vw</div>
                    </div>
                </div>
                <style>
                    #Div-C {width: 24vw; height: 10vh; border: 0.2vw solid #c3c3c3; display: flex; }
                    #Div-C div {flex-grow: 0; flex-shrink: 0;flex-basis: 4vw;}
                    #Div-C div:nth-of-type(2) {flex-basis: 8vw;} 
            
                </style>

flex-direction property

top

- specifies the direction of the flexible items.

Note: If the element is not a flexible item, the flex-direction property has no effect.

CSS syntax : flex-direction: row | row-reverse | column | column-reverse | initial | inherit;

Property values:

row : default value. The flexible items are displayed horizontally, as a row

row-reverse : same as row, but in reverse order

column : the flexible items are displayed vertically, as a column

column-reverse : same as column, but in reverse order

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.flexDirection="column-reverse"

example: flex-direction property

code:

                <div>
                    <div id="Div-D">
                        <div style="background-color:coral;">A</div>
                        <div style="background-color:lightblue;">B</div>
                        <div style="background-color:khaki;">C</div>
                        <div style="background-color:pink;">D</div>
                        <div style="background-color:lightgrey;">E</div>
                        <div style="background-color:lightgreen;">F</div>
                    </div>
                    
                </div>
                <style>
                    #Div-D {width: 40vw; height: 20vh; border: 0.1vw solid #c3c3c3; display: flex; 
                        flex-direction: row-reverse;}
                    #Div-D div {width: 5vw;  height: 5vh;}
            
                </style>

flex-flow property

top

- is a shorthand property for: "flex-direction" and "flex-wrap".

Note: If the elements are not flexible items, the flex-flow property has no effect.

CSS syntax : flex-flow: flex-direction flex-wrap | initial | inherit;

Property values:

flex-flow : possible values: row, row-reverse, column, column-reverse, initial, inherit. Default value is "row". Specifying the direction of the flexible items

flex-wrap : possible values: nowrap, wrap, wrap-reverse, initial, inherit. Default value is "nowrap". Specifying whether the flexible items should wrap or not

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.flexFlow="column nowrap"

example: flex property

code:

                <div>
                    <div id="Div-E">
                        <div style="background-color:coral;">A</div>
                        <div style="background-color:lightblue;">B</div>
                        <div style="background-color:khaki;">C</div>
                        <div style="background-color:pink;">D</div>
                        <div style="background-color:lightgrey;">E</div>
                        <div style="background-color:lightgreen;">F</div>
                    </div>
                    
                </div>
                <style>
                    #Div-E {width: 20vw; height: 20vh; border: 0.1vw solid #c3c3c3; display: flex; 
                        flex-flow: row-reverse wrap;}
                    #Div-E div {width: 5vw;  height: 5vh;}
            
                </style>

flex-grow property

top

- specifies how much the item will grow relative to the rest of the flexible items inside the same container.

Note: If the elements is not a flexible item, the flex-grow property has no effect.

CSS syntax : flex-grow: number | initial | inherit;

Property values:

number : a number specifying how much the item will grow relative to the rest of the flexible items. Default value is 0

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.flexGrow="5"

example: flex-grow property

code:

                <div>
                    <div id="Div-F">
                        <div style="background-color:coral;">A</div>
                        <div style="background-color:lightblue;">B</div>
                        <div style="background-color:khaki;">C</div>
                        <div style="background-color:pink;">D</div>
                        <div style="background-color:lightgrey;">E</div>
                        <div style="background-color:lightgreen;">F</div>
                    </div>
                    
                </div>
                <style>
                    #Div-F {width: 30vw; height: 10vh; border: 0.1vw solid #c3c3c3; display: flex; }
                    #Div-F div:nth-of-type(1){flex-grow: 1;}
                    #Div-F div:nth-of-type(2){flex-grow: 3;}
                    #Div-F div:nth-of-type(3){flex-grow: 1;}
                    #Div-F div:nth-of-type(4){flex-grow: 1;}
                    #Div-F div:nth-of-type(5){flex-grow: 2;}
                    #Div-F div:nth-of-type(6){flex-grow: 1;}
                </style>

flex-shrink property

top

- specifies how the item will shrink relative to the rest of the flexible items inside the same container.

Note: If the elements is not a flexible item, the flex-shrink property has no effect.

CSS syntax : flex-shrink: number | initial | inherit;

Property values:

number : a number specifying how much the item will shrink relative to the rest of the flexible items. Default value is 0

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.flexShrink="5"

example: flex-shrink property

code: issue to be solved

                <div id="Div-G">
                    <div style="background-color:coral;">A</div>
                    <div style="background-color:lightblue;">B</div>
                    <div style="background-color:khaki;">C</div>
                    <div style="background-color:pink;">D</div>
                    <div style="background-color:lightgrey;">E</div>
                </div>
                <style>
                    #Div-G {width: 30vw; height: 10vh; border: 0.1vw solid #c3c3c3; display: flex; }
                    #Div-G div{flex-basis:5vw; flex-shrink: 1; flex-grow: 1;}
                    #Div-G div:nth-of-type(2){flex-shrink: 3;}
                </style>

flex-wrap property

top

- specifies whether the flexible items should wrap or not.

Note: If the elements are not flexible items, the flex-wrap property has no effect.

CSS syntax : flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

Property values:

nowrap : default value. Specifies that the flexible items will not wrap

wrap : specifies that the flexible items will wrap if necessary

wrap-reverse : specifies that the flexible items will wrap if necessary, in reverse order

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.flexWrap="nowrap"

example: flex-wrap property

code:

                <div id="Div-H">
                    <div style="background-color:coral;">A</div>
                    <div style="background-color:lightblue;">B</div>
                    <div style="background-color:khaki;">C</div>
                    <div style="background-color:pink;">D</div>
                    <div style="background-color:lightgrey;">E</div>
                    <div style="background-color:lightgreen;">F</div>
                </div>
                
                <style>
                    #Div-H {width: 25vw; height: 10vh; border: 0.1vw solid #c3c3c3; display: flex; flex-wrap: wrap;}
                    #Div-H div{width: 6vw; height: 3vh;}
                </style>