FLEX PROPERTIES

CSS flex property

The flex property in CSS is shorthand for flex-grow, flex-shrink, and flex-basis. It only works on the flex-items, so if the container's item is not a flex-item, the flex property will not affect the corresponding item.This property is used to set the length of flexible items. The positioning of child elements and the main container is easy with this CSS property. It is used to set how a flex-item will shrink or grow to fit in the space. The flex property can be specified by one, two, or three values.
Syntax :

    flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit;

Property Values :

flex-grow : It is a positive unitless number that determines the flex-grow factor. It specifies how much the item will grow compared to the other flexible-items. Negative values are not allowed. If it is omitted, then it sets to the value 1.

flex-shrink : It is the positive unitless number that determines the flex shrink factor. It specifies how much the item will shrink compared to the other flexible-items. Negative values are not allowed. If it is omitted, then it sets to the value 1.

flex-basis : It is the length in relative or absolute units that defines the initial length of the flex-item. It is used to set the length of the flex-item. Its values can be auto, inherit, or a number followed by the length units such as em, px, etc. Negative values are not allowed. If it is omitted, then it sets to the value 0.

auto : This value of the flex property is equivalent to 1 1 auto.

none : This value of the flex property is equivalent to 0 0 auto. It neither grows nor shrinks the flex-items.

initial : It sets the property to its default value. It is equivalent to 0 0 auto.

inherit : It inherits the property from its parent element.

Now we are going see it with example :
Eg:

    < !DOCTYPE html>  
    < html>  
    < head>  
    < title>CSS flex Property< /title>  
    < style>  
        .container {  
            width: 200px;  
            height: 100px;  
            border: 1px solid black;  
            display: flex;  
            margin: 15px;  
            background-color: blue;  
        }  
        .flex-item{  
            flex: 1; // unitless number: flex-grow  
        }  
        .flex-item1{  
            flex: 0 50px; // flex-grow, flex-basis  
        }  
        .flex-item2{  
            flex: 2 2; // flex-grow, flex-shrink  
        }  
        .flex-item, .flex-item1, .flex-item2 {  
            background-color: lightblue;  
            margin: 4px;  
        }  
    < /style>  
    < /head>  
    < body>  
    < h1> CSS flex Property < /h1>  
    < h3> flex: 1; < /h3>  
    < div class = "container">  
    < div class = "flex-item">  
    < /div>  
    < div class = "flex-item">  
    < /div>  
    < div class = "flex-item">  
    < /div>  
    < /div>  
    < h3> flex: 0 50px; < /h3>  
    < div class = "container">  
    < div class = "flex-item1">  
    < /div>  
    < div class = "flex-item1">  
    < /div>  
    < div class = "flex-item1">  
    < /div>  
    < /div>  
    < h3> flex: 2 2; < /h3>  
    < div class = "container">  
    < div class = "flex-item2">  
    < /div>  
    < div class = "flex-item2">  
    < /div>  
    < div class = "flex-item2">  
    < /div>  
    < /div>  
    < /body>  
    < /html>

Output :

CSS flex Property

flex: 1;

flex: 0 50px;

flex: 2 2;

CSS justify-content

This CSS property is used to align the items of the flexible box container when the items do not use all available space on the main-axis (horizontally). It defines how the browser distributes the space around and between the content items.
This CSS property can't be used to describe containers or items along the vertical axis. To align the items vertically, we have to use the align-items property.

    justify-content: center | flex-start | flex-end | space-around | space-evenly | space-between | initial | inherit;

The default value of this property is flex-start. Let's understand its property values in detail.
Property values :

enter :As its name implies, it set the position of items at the center of the container.

flex-start :It is the default value that positioned the items at the beginning of the container.

flex-end :It set the position of items at the end of the container.

space-around :It positioned the items with equal spacing from each other. It evenly distributes the items in the line along with the same space around them.

space-between :Items are evenly spaced in which the first item is at the beginning, and the last item is at the end.

space-evenly :It also positioned the items with equal space, but the spacing from the corners differs.

Eg:

    < !DOCTYPE html>   
    < html>   
    < head>   
    < title>CSS filter property< /title>   
    < style>   
        #flexstart{  
            display:flex;  
            justify-content: flex-start;  
        }  
        #flexend{  
            display:flex;  
            justify-content: flex-end;  
        }  
        #cent{  
            display:flex;  
            justify-content: center;  
        }  
        #evenly{  
            display:flex;  
            justify-content: space-evenly;  
        }  
        #around{  
            display:flex;  
            justify-content: space-around;  
        }  
        #between{  
            display:flex;  
            justify-content: space-between;  
        }  
        .flex-item{  
            width:30px;
            height:30px;
            margin:3px;
            padding:3px;
            color:white;
            font-size:1em;
            font-weight:bold;
            text-align:center;
            border: 1px solid black;
            background-color:blue; 
        }  
    < /style>   
    < /head>   
    < body>   
    < div id="flexstart">  
    < h1>flex-start< /h1>  
    < div class="flex-item">1< /div>  
    < div class="flex-item">2< /div>  
    < div class="flex-item">3< /div>  
    < div class="flex-item">4< /div>  
    < div class="flex-item">5< /div>  
    < /div>  
    < div id="flexend">  
    < h1>flex-end< /h1>  
    < div class="flex-item">1< /div>  
    < div class="flex-item">2< /div>  
    < div class="flex-item">3< /div>  
    < div class="flex-item">4< /div>  
    < div class="flex-item">5< /div>  
    < /div>  
    
    < div id="cent">  
    < h1>center< /h1>  
    < div class="flex-item">1< /div>  
    < div class="flex-item">2< /div>  
    < div class="flex-item">3< /div>  
    < div class="flex-item">4< /div>  
    < div class="flex-item">5< /div>  
    < /div>  
    < h1>space-evenly< /h1>  
    < div id="evenly">  
    < div class="flex-item">1< /div>  
    < div class="flex-item">2< /div>  
    < div class="flex-item">3< /div>  
    < div class="flex-item">4< /div>  
    < div class="flex-item">5< /div>  
    < /div>  
    < h1>space-around< /h1>  
    < div id="around">  
    < div class="flex-item">1< /div>  
    < div class="flex-item">2< /div>  
    < div class="flex-item">3< /div>  
    < div class="flex-item">4< /div>  
    < div class="flex-item">5< /div>  
    < /div>  
    < h1>space-between< /h1>  
    < div id="between">  
    < div class="flex-item">1< /div>  
    < div class="flex-item">2< /div>  
    < div class="flex-item">3< /div>  
    < div class="flex-item">4< /div>  
    < div class="flex-item">5< /div>  
    < /div>  
    < /body>   
    < /html>

Output :

flex-start

flex-end

center

space-evenly

space-around

space-between

CSS flex-basis property :
This CSS property specifies the initial size of the flex item. It only works on the flex-items, so if the container's item is not a flex-item, the flex-basis property will not affect the corresponding item. Generally, this CSS property is used with the other flex properties that are flex-shrink and flex-grow and usually defined by the flex shorthand to ensure that all values are set.
Syntax :

    flex-basis: auto | width | initial | inherit;

Values :

auto : It is the default value. This value sets the item's width equal to the value of its width property, if defined. But if the width property is not specified for the flex-item, it sets the width according to the content.

width : This value is defined using relative or absolute units. It defines the initial length of the flex-item. It does not allow negative values.

initial : It sets the property to its default value.

inherit : It inherits the property from its parent element.

    < !DOCTYPE html>  
    < html>  
    < head>  
    < style>  
        .container {  
            display: flex;  
            background-color: lightblue;  
        }  
        .flex-item {  
            background-color: white;  
            text-align: center;  
            line-height: 40px;  
            font-size: 25px;  
            margin: 5px;  
        }  
    < /style>  
    < /head>  
    < body>  
    < h1> Example of the flex-basis property < /h1>  
    < div class = "container">  
    < div class = "flex-item" style = "flex-basis: auto;"> auto < /div>  
    < div class = "flex-item" style = "flex-basis: initial;"> initial < /div>  
    < div class = "flex-item" style = "flex-basis: inherit;"> inherit < /div>  
    < div class = "flex-item" style = "flex-basis: 150px;"> 150px < /div>  
    < div class = "flex-item" style = "flex-basis: auto"> auto < /div>  
    < /div>  
    < /body>  
    < /html>

Output :

Example of the flex-basis property

auto

initial

inherit

100px

auto

Example for flex-basis property :

    < !DOCTYPE html>  
    < html>  
    < head>  
    < style>  
        .container {  
            height: 50px;  
            border: 2px solid red;  
            display: flex;  
            background-color: blue;  
        }  
        .container div{  
            padding-top: 25px;  
            flex-basis: 100px;  
        }  
        .flex-item{  
            text-align: center;  
            font-size: 25px;  
        }  
        .container div:nth-of-type(1) {  
            flex-basis: 50%;  
        }  
        .container div:nth-of-type(3) {  
            flex-basis: 200px;  
        }  
        .container div:nth-of-type(5) {  
            flex-basis: 7em;  
        }  
    < /style>  
    < /head>  
    < body>  
        < h1>The flex-basis Property< /h1>  
        < div class = "container">  
            < div class = "flex-item" style= "background-color: lightblue;">50%< /div>  
            < div class = "flex-item" style= "background-color: yellow;">100px< /div>  
            < div class = "flex-item" style= "background-color: pink;">200px< /div>  
            < div class = "flex-item" style= "background-color: orange;">100px< /div>  
            < div class = "flex-item" style= "background-color: lightgreen;">7em< /div>  
        < /div>  
    < /body>  
    < /html>

Output : < h1>The flex-basis Property< /h1>

50%

100px

200px

100px

7em

Example for flex-shrink property :

< !DOCTYPE html>  
    < html>  
    < head>  
    < style>   
        .container {  
            height: 50px;  
            border: 2px solid red;  
            display: flex;  
        }  
        .container div{  
            padding-top: 10px;  
            flex: 0 0 100px;  
        }  
        .flex-item{  
            text-align: center;  
            font-size: 25px;  
        }  
    < /style>  
    < /head>  
    < body>  
    < h1>The flex-basis Property< /h1>  
        < div class = "container">  
            < div class = "flex-item" style= "background-color: lightblue;">1< /div>  
            < div class = "flex-item" style= "background-color: yellow;">2< /div>  
            < div class = "flex-item" style= "background-color: pink;">3< /div>  
            < div class = "flex-item" style= "background-color: orange;">4< /div>  
            < div class = "flex-item" style= "background-color: lightgreen;">5< /div>  
        < /div>  
    < /body>  
    < /html>

Output :

The flex-basis Property

Example for flex-grow property :

    < !DOCTYPE html>  
    < html>  
    < head>  
    < style>  
        .container {  
            display: -webkit-flex;  
            display: flex;  
            background-color: lightblue;  
        }  
        .flex-item {  
            background-color: lightgreen;  
            text-align: center;  
            font-size: 25px;  
            width: 100px;  
            height: 100px;  
            padding-top: 20px;  
            margin: 5px;  
        }  
    < /style>  
    < /head>  
    < body>  
        < h1> flex-grow: 0; < /h1>  
        < div class="container">  
            < div class="flex-item" style = "flex-grow: 0;"> flex-item 1 < /div>  
            < div class="flex-item" style = "flex-grow: 0;"> flex-item 2 < /div>  
            < div class="flex-item" style = "flex-grow: 0;"> flex-item 3 < /div>  
        < /div>  
        < h1> flex-grow: 1; < /h1>  
        < div class="container">  
            < div class="flex-item" style = "flex-grow: 1;"> flex-item 1 < /div>  
            < div class="flex-item" style = "flex-grow: 1;"> flex-item 2 < /div>  
            < div class="flex-item" style = "flex-grow: 1;"> flex-item 3 < /div>  
        < /div>   
    < /body>  
    < /html>

Output :

flex-grow: 0;

flex-item 1

flex-item 2

flex-item 3

flex-grow: 1;

flex-item 1

flex-item 2

flex-item 3

Example for flex-shrink property :

    < !DOCTYPE html>  
    < html>  
    < head>  
    < style>  
        .container {  
            width: 400px;  
            height: 100px;  
            border: 5px solid red;  
            display: flex;  
            background-color: blue;  
            margin: 30px;  
        }  
        .flex-item{  
            background-color: lightblue;  
            font-size: 25px;  
            margin: 5px;  
            flex-grow: 1;  
            flex-shrink: 1;  
            flex-basis: 100px;  
        }  
    < /style>  
    < /head>  
    < body>  
        < h1> Example of the flex-shrink property < /h1>  
        < div class="container">  
            < div class = "flex-item">< /div>  
            < div class = "flex-item">< /div>  
            < div class = "flex-item" style = "flex-shrink: 5;"> 5 < /div>  
            < div class = "flex-item" style = "flex-shrink: initial;"> initial < /div>  
            < div class = "flex-item" style = "flex-shrink: inherit;"> inherit < /div>  
        < /div>  
        < div class="container">  
            < div class = "flex-item">< /div>  
            < div class = "flex-item" style = "flex-shrink: 8;"> 8 < /div>  
            < div class = "flex-item" style = "flex-shrink: 10;"> 10 < /div>  
            < div class = "flex-item" style = "flex-shrink: 6;"> 6 < /div>  
            < div class = "flex-item">< /div>  
        < /div>  
    < /body>  
    < /html>

Output :

Example of the flex-shrink property

initial

inherit

« Previous Next Topic » (SQL - Constraints)