how to use css justify

Posted under CSS3 Course On By mohammed.mutawe

CSS Justify

We know that HTML tags are vertical, which means that whenever we add an HTML tag, its content reserves a new line in our page space, but what if we place more than one HTML tag horizontally, and this is what we will talk about in this lesson.

 

Definition

.container{
    //coordinates

    display:flex;
    flex-direction: row;
}

CSS provides us with a display direction and method to make the tags appear next to each other through a special container in the view, which takes the characteristics and type of display in our page, and only what is inside the container applies those properties, and what is outside remains outside the format.

 

Benefits

Using justify content has many benefits which can be summarized as:

  • Exploiting the space of large screens by filling in the right and middle spaces.
  • Compress content to accommodate the largest number of tags to reduce poor formatting on multiple screens.
  • Shaping the type and nature of information that appears permanently and maintaining updates to appear to users quickly.

 

Cons

As is usual in technology, there are pros and cons. One of the disadvantages of using justify content is:

  • The difficulty of controlling the display method in mobile phones, because browsing mobile phones depends on the height, not the width, and the justify feature is almost certainly losing its characteristics while using it on the phone
  • Difficulty controlling large pages that contain databases while including other programming languages ​​in the project.

 

Example

Please, to understand CSS Justify well, copy the following codes and run it in your browser.

CSS

.container{
    width:800px;
    margin:50px auto;
    background-color:#D9D9D9;
    display:flex;
    flex-direction: row;
}

.container div{
    background-color:#592C2C;
    color:#FFF;
    width:200px;
    height:100px;
    padding:10px;
}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS  Flex Flow | Justify Content</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class = "container">
            <div>Div1</div>
            <div>Div2</div>
            <div>Div3</div>
        </div>

    </body>

</html>