Introduction

This is a common problem encountered by beginners in Frontend programming, so you should refer to the content below to grasp these first techniques.

The essence of <tag/>

Tags are commonly operated in 2 basic forms:

• Inline Tag: allows other tags to be placed in the same row
• Block Tag: occupies the entire row.

In essence, tags will prioritize horizontal display, and if we want to change its display, we need to clarify the following content.

<div> row layout

But according to our knowledge, the div tag is a block tag and is often used to wrap content. Please refer to the following example:

Suppose we have a parent div containing 2 child divs, we will have the following interface:

HTML

<div class="item0">
    div cha
    <div class="item1">
        div con 1
    </div>
    <div class="item2">
        div con 2
    </div>
</div>

CSS

.item0{
  background-color: lightseagreen;
  padding: 10px;
}
.item1 {
  background: lightyellow;
}

.item2 {
  background: salmon;
}

Result

From the above example, we can see that the 2 child divs occupy the entire row and cannot be placed side by side. If we present the content in the 2 child divs from top to bottom, everything will be perfect and there will be no difficulties.

<div> column layout

Here, we encounter a new problem, what will happen when we need to wrap 2 contents horizontally, in this case, the first child div is on the left, the second child div is on the right. We will face obstacles because the nature of the div tag is block and will occupy the entire row.

The easiest way to solve this problem is to use the special feature of CSS flex, a tool that helps us format the nature of child tags, and also an effective tool to implement responsive interfaces in the future. Please refer to the following solution:

HTML

<div class="item0">
    <!-- div cha -->
    <div class="item1">
        div con 1
    </div>
    <div class="item2">
        div con 2
    </div>
</div>

CSS

.item0 {
    background-color: lightseagreen;
    padding: 10px;
    display: flex; /*New*/
}

.item1 {
    background: lightyellow;
}

.item2 {
    background: salmon;
}

Result

In the above example, after commenting the content and setting css flex for the parent div, the child content inside the parent div will be displayed horizontally from left to right, the first child div will be displayed first, followed by the second child div.

So to display 2 columns horizontally, assuming the horizontal dimension occupies 100% of the screen size, we will set 2 child div tags with a size of 50% so that the 2 child div tags can fully cover the screen horizontally. Follow the example below:

HTML

<div class="item0">
    <!-- div cha -->
    <div class="item1">
        div con 1
    </div>
    <div class="item2">
        div con 2
    </div>
</div>

CSS

 .item0 {
    background-color: lightseagreen;
    padding: 10px;
    display: flex;
}

.item1 {
    background: lightyellow;
    width: 50%; /*New*/
}

.item2 {
    background: salmon;
    width: 50%; /*New*/
}

Result

From the above example, we can see that with the operation of flex, and with the setting of the horizontal direction of the child div column to 50%, we have successfully displayed the div tag horizontally from left to right, instead of displaying from top to bottom.