00:00:00

CSS Display 

In CSS3, the display property is used to define the type of box an HTML element should generate. The different values of the display property determine the layout and behavior of an element, including how it affects the flow of the document and the position of other elements. Here are some of the most commonly used values for the `display property:

  1. block: The element generates a block-level box and takes up the full width of its parent container. Block elements automatically create a new line after the element.

  2. inline: The element generates an inline-level box, which means it only takes up as much width as necessary to display its content. Inline elements do not create a new line after the element.

  3. inline-block: The element generates a box that acts as an inline-level box, but it can have a width and height specified.

  4. flex: The element generates a block-level flexible container, which allows its child elements to be laid out in flexible, responsive ways.

  5. grid: The element generates a block-level grid container, which allows its child elements to be laid out in a grid of rows and columns.

  6. none: The element does not generate a box, and it takes up no space in the layout.

  7. table: The element generates a block-level table container, which allows its child elements to be laid out in a table with rows and columns.

These values for the display property provide a wide range of options for controlling the layout of elements on a web page, and can be combined with other CSS properties to create complex and sophisticated designs.

Inline , Block, inline-block, none

display block property is used to change the html element to cover the whole width of Horizontal.

display inline property is takes require space for an element.

a{
    display:block;
    display:inline-block;
    display:inline;
    display:none;
}

Flex Box Property

Flex property is create html element flexible. you can adjust as your requirement. The most common flex property is here.

div{
    display: flex;
    align-items: center;   /* center items vertcally in the flex container */
    justify-content: center;  /* center items Horizontally in the flex container */
    justify-content: end;     /* items justify at end in the flex container */
    justify-content: start;   /* items justify at start in the flex container */
    justify-content: space-between;   /* items have space between them in the flex container */
    justify-content: space-around;    /* space around the items in the flex container */
    justify-content: space-evenly;   /* items have equal space in the flex container */

}

Flex Shorthand Property

this shorthand property allows to write all flex property in one line.

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

Flex-Direction

flex direction is adjust the direction of flexible element.

div{
    display: flex;
    flex-direction: inherit;
    flex-direction: column;
    flex-direction: column-reverse;
    flex-direction: row;
    flex-direction: row-reverse;
}

Flex-Wrap

flex-wrap property is used to wrap the flexible element if space is not sufficient.

div{
    display: flex;
    flex-wrap: nowrap;
    flex-wrap: wrap-reverse;
    flex-wrap: wrap;
    flex-wrap: inherit;
}

Display Grid

display grid propery is used to create grid layout of webpage.

div{
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: 1fr 1fr 2fr; /* fr is fractional unit  */
    grid-template-rows: repeat(3,1fr); /* repeat function repeats the same unit by equal length */
    grid-template-column: repeat(3,1fr); /* repeat function repeats the same unit by equal length  */
}

Grid Gap

grid gap create the gap or space between grid.

div{
    display: grid;
    gap: 20px;  /* row and column gap */
}

Grid-Row-Start And Grid-Row-End

which row to start displaying the grid-item where you specify by row number and which row to end displaying the grid-item specify by row number. This property will apply on grid-items to span the multiple rows.

.div-item{
    display: grid;
    grid-row-start: 1;  /*grid-item start with row number */
    grid-row-end: 3;  /* grid-item end with row number */
}

Grid-Column-Start And Grid-Column-End

which column to start displaying the grid-item where you specify by column number and which column to end displaying the grid-item specify by column number. This property will apply on grid-items to span the multiple columns.

.div-item{
    display: grid;
    grid-column-start: 2;  /*grid-item start with column number */
    grid-column-end: 3;  /* grid-item end with column number */
}

Grid-Area

grid-area is specify the name of grid-area. It must be inside the parent container. create a grid layout using grid-area property just few lines of code.

.item1{
    /* background-color: lightskyblue;*/
    grid-area: header;    /* This is grid area name */
}

.item2{
    /*background-color: lightcoral; */
    grid-area: menu;     /* This is grid area name */
}

.item3{
    /* background-color: rgb(248, 43, 73);*/
    grid-area: main;     /* This is grid area name */
}

.item4{
    /* background-color: rgb(243, 183, 159);*/
    grid-area: aside;  /* This is grid area name */
}

.item5{
    /* background-color: lightgreen;*/
    grid-area: footer;    /* This is grid area name */
}

Grid-Template-Areas

This grid-template-areas property define the area of grid area name. It is apply on parent container which 'display' has 'grid'.

.main_container{
    /* width: 900px;
    margin: 5px auto;
    border: 2px solid green;
    background-color: rgb(223, 219, 219); */
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 100px 70px 400px 400px 100px;
    gap: 5px;  
    grid-template-areas: 'header header header'
                        'menu menu menu'
                        'main main aside'
                        'main main aside'
                        'footer footer footer';
}