×

Html & Html5

The World's best Software Development Study Portal

CSS3

Introduction to CSS


CSS Flexbox



It is new layout mode in CSS and it is used to design flexible layout structure without using float or position property. It provides a more efficient way to layout, align and distribute space among items in the container.

It is mainly used to make CSS3 capable to change its item?s width and height to best fit for all available spaces. It is preferred over block model.The most impressive thing of flexbox is that it is a responsive layout structure.

The CSS3 flexbox contains flex containers and flex items.

Flex container:The flex container specifies the properties of the parent. It is declared by setting the display property of an element to either flex or inline-flex.

Flex items:The flex items specify properties of the children. There may be one or more flex items inside a flex container.

flexbox-model

Let's take an example to show three flex items within a flex container. By default, they are set along the horizontal flex line, from left to right.

See an example:


<!DOCTYPE html>

<html>

<head>

<style>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
.flex-container {

          display:-webkit-flex;

          display:flex;

          width: 400px;

          height: 200px;

          background-color:lightpink;

}

.flex-item {

          background-color: brown;

          width: 100px;

          height: 100px;

          margin: 10px;

          font-size:30px;

          color:white;

          text-align:center;

}

</style>

</head>

<body>

<div class="flex-container">

<div class="flex-item"> 1 </div>

<div class="flex-item"> 2 </div>

<div class="flex-item"> 3 </div>

</div>

</body>

</html>

Output of the Program:

1
2
3

Note: You can also change the direction of the flex line by using direction property. If you want to set the direction line right-to-left then set direction property to rtl.

Here in flexbox we are having a flex container which contains the elements and this container is having some following property :-

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content


Flex direction property:


This property specifies in which direction should the flex elements be . We are having 4 values in this direction property
  • row :- the flex elements here will be in horizontal manner(left to right).
  • row-reverse :- the flex elements here will be in reverse horizontal manner (right to left).
  • column :- the flex elements here will be in vertical manner (top to bottom).
  • column-reverse :- the flex elements here will be in reverse-vertical manner (bottom to top).

  • Let's understand this by the following program :-

    The "flex-direction: row;" stacks the flex items horizontally (from left to right):

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    .flex-container1 {

              display:flex;

              flex-direction:row;

              width: 400px;

              height: 200px;

              background-color:lightpink;

    }

    .flex-item1 {

              background-color: brown;

              width: 100px;

              height: 100px;

              margin: 10px;

              font-size:30px;

              color:white;

              text-align:center;

    }

    </style>

    </head>

    <body>

    <div class="flex-container1">

    <div class="flex-item1"> 1 </div>

    <div class="flex-item1"> 2 </div>

    <div class="flex-item1"> 3 </div>

    </div>

    </body>

    </html>

    Output of the Program:

    The "flex-direction: row;" stacks the flex items horizontally (from left to right):

    1
    2
    3

    The "flex-direction: row-reverse;" stacks the flex items reverse horizontal manner (from right to left):

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    .flex-container2 {

              display:flex;

              flex-direction:row-reverse;

              width: 400px;

              height: 200px;

              background-color:lightpink;

    }

    .flex-item2 {

              background-color: brown;

              width: 100px;

              height: 100px;

              margin: 10px;

              font-size:30px;

              color:white;

              text-align:center;

    }

    </style>

    </head>

    <body>

    <div class="flex-container2">

    <div class="flex-item2"> 1 </div>

    <div class="flex-item2"> 2 </div>

    <div class="flex-item2"> 3 </div>

    </div>

    </body>

    </html>

    Output of the Program:

    The flex-direction Property

    The "flex-direction: row-reverse;" stacks the flex items reverse horizontal (from right to left):

    1
    2
    3

    The "flex-direction: column;" stacks the flex items vertically (from top to bottom):

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    .flex-container3 {

              display:flex;

              flex-direction:column;

              width: 400px;

              height: 200px;

              background-color:lightpink;

    }

    .flex-item3 {

              background-color: brown;

              width: 100px;

              height: 100px;

              margin: 10px;

              font-size:30px;

              color:white;

              text-align:center;

    }

    </style>

    </head>

    <body>

    <div class="flex-container3">

    <div class="flex-item3"> 1 </div>

    <div class="flex-item3"> 2 </div>

    <div class="flex-item3"> 3 </div>

    </div>

    </body>

    </html>

    Output of the Program:

    The flex-direction Property

    The "flex-direction: column;" stacks the flex items vertically (from top to bottom):

    1
    2
    3

    The "flex-direction: column-reverse;" stacks the flex items reverse vertically manner (but from bottom to top):

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    .flex-container4 {

              display:flex;

              flex-direction:column-reverse;

              width: 400px;

              height: 200px;

              background-color:lightpink;

    }

    .flex-item4 {

              background-color: brown;

              width: 100px;

              height: 100px;

              margin: 10px;

              font-size:30px;

              color:white;

              text-align:center;

    }

    </style>

    </head>

    <body>

    <div class="flex-container4">

    <div class="flex-item4"> 1 </div>

    <div class="flex-item4"> 2 </div>

    <div class="flex-item4"> 3 </div>

    </div>

    </body>

    </html>

    Output of the Program:

    The flex-direction Property

    The "flex-direction: column-reverse;" stacks the flex items reverse vertically manner (but from bottom to top):

    1
    2
    3

    So this is our flex elements starting from row direction.



    Flex wrap property


    This property specifies whether elements should wrap or not. If list items are more and any user is watching those items in small screen than generally he can't able to see all items , so to make him view the whole elements we are using this flex-wrap property by which items use to come in next line known as flex line.


    Let's understand this by the following program :-


    <!DOCTYPE html>

    <html>

    <head>

    <style>

    .flex-container5 {

              display:flex;

              flex-wrap:wrap;

              background-color:lightpink;

    }

    .flexitem5 {

              width:100px;

              height:100px;

              margin:5px;

              text-align:center;

              color:white;

              font-size:20px;

    }

    </style>

    </head>

    <body>

    <div class="flex-container5">

    <div class="flex-item5"> 1 </div>

    <div class="flex-item5"> 2 </div>

    <div class="flex-item5"> 3 </div>

    <div class="flex-item5"> 4 </div>

    <div class="flex-item5"> 5 </div>

    <div class="flex-item5"> 6 </div>

    <div class="flex-item5"> 7 </div>

    <div class="flex-item5"> 8 </div>

    <div class="flex-item5"> 9 </div>

    <div class="flex-item5"> 10 </div>

    <div class="flex-item5"> 11 </div>

    <div class="flex-item5"> 12 </div>

    </div>

    </body>

    </html>

    Output of the Program:


    flex-container and elements


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    So now if we resize our browser these elements we can see coming in next line.



    Flex flow property


    The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.


    Let's understand this by the following program :-



    <!DOCTYPE html>

    <html>

    <head>

    <style>

    .flex-container6 {

              display:flex;

              height:500px;

              flex-flow:column wrap;

              background-color:lightpink;

    }

    .flex-item6 {

              width:100px;

              height:100px;

              margin:5px;

              text-align:center;

              color:white;

              font-size:20px;

    }

    </style>

    </head>

    <body>

    <div class="flex-container6">

    <div class="flex-item6"> 1 </div>

    <div class="flex-item6"> 2 </div>

    <div class="flex-item6"> 3 </div>

    <div class="flex-item6"> 4 </div>

    <div class="flex-item6"> 5 </div>

    <div class="flex-item6"> 6 </div>

    <div class="flex-item6"> 7 </div>

    <div class="flex-item6"> 8 </div>

    <div class="flex-item6"> 9 </div>

    <div class="flex-item6"> 10 </div>

    <div class="flex-item6"> 11 </div>

    <div class="flex-item6"> 12 </div>

    </div>

    </body>

    </html>


    Output of the Program:


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    So now through flex-flow property we can specify both flex-direction and flex-wrap.



    Justify Content property


    The justify-content property is used to align the flex items:


    Let's understand this by the following program :-



    <!DOCTYPE html>

    <html>

    <head>

    <style>

    .flex-container9 {

              display:flex;

              justify-content: flex-end;

              background-color:lightpink;

    }

    .flex-item9 {

              width:100px;

              margin:5px;

              text-align:center;

              color:white;

              font-size:20px;

    }

    </style>

    </head>

    <body>

    <p> flex-container and elements <p>

    <div class="flex-container9">

    <div class="flex-item9"> 1 </div>

    <div class="flex-item9"> 2 </div>

    <div class="flex-item9"> 3 </div>

    </div>

    </body>

    </html>


    Output of the Program



    flex-container and elements


    1
    2
    3

    the other property of justify-content are as- center, flex-start, flex-end, space-around, space-between.



    Align items property


    This property specifies the alignment of items vertically.We can align the flex items vertically by align-items property.


    Let's understand this by the following program :-



    <!DOCTYPE html>

    <html>

    <head>

    <style>

    .flex-container7 {

              display:flex;

              align-items:center;

              background-color:lightpink;

    }

    .flex-item7 {

              width:100px;

              margin:5px;

              text-align:center;

              color:white;

              font-size:20px;

    }

    </style>

    </head>

    <body>

    <p> flex-container and elements <p>

    <div class="flex-container7">

    <div class="flex-item7"> 1 </div>

    <div class="flex-item7"> 2 </div>

    <div class="flex-item7"> 3 </div>

    </div>

    </body>

    </html>


    Output of the Program



    flex-container and elements


    1
    2
    3

    So now through align-items property we can align elements vertically and here we align the items at the center. We can also use align items property as- flex-end, flex-start, stretch, baseline.



    Align content property


    This property specifies the alignment of flex lines .We can align the flex lines by align-content property.


    Let's understand this by the following program :-



    <!DOCTYPE html>

    <html>

    <head>

    <style>

    .flex-container8 {

              display:flex;

              align-content: stretch;

              background-color:lightpink;

    }

    .flex-item8 {

              width:100px;

              margin:5px;

              text-align:center;

              line-height:75px;

              font-size:20px;

    }

    </style>

    </head>

    <body>

    <p> flex-container and elements <p>

    <div class="container">

    <div class="flex-item8"> 1 </div>

    <div class="flex-item8"> 2 </div>

    <div class="flex-item8"> 3 </div>

    </div>

    </body>

    </html>


    Output of the Program



    1
    2
    3

    So now through align-content property we have align the elements and other properties are-center, flex-start, flex-end, stretch, space-around and space-between.








CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute