Introduction

When working with the Web, many students ask questions: s

How to control an interface block on the screen?

Vậy trong bài học hôm nay, chúng ta hãy cũng nhau làm rõ câu hỏi trên nhé.

Content block

Before controlling any content, the first thing we need to do is wrap all the content in a block using a div. Refer to the following example:

HTML

<section class="item">
    <span>Nội dung</span>
    <p>Nội dung 2</p>
</section>

CSS

.item{
  background-color: lightseagreen;
  padding: 10px;
  height: 150px;
}

Kết quả

In the above example, we can easily see that the content tags are organized separately, and bringing them to the center of the interface is very difficult.

Therefore, the first step is to wrap them in a div tag for easier management. Please continue to follow the example:

HTML

<section class="item">
    <div class="box">       <!--new-->
      <span>Nội dung</span>
      <p>Nội dung 2</p>
    </div>                  <!--new-->
</section>

CSS

.item{
  background-color: lightseagreen;
  padding: 10px;
  height:150px;
}

.box{
  background: coral; /*new*/
}

Result

With the above example, instead of having to manage the position of both the span tag and the p tag, we only need to control the position of the div tag with the class 'box'.

Baseline of flex

When initializing flex for the parent tag, flex will display the child tags in various directions and orientations, by default it will be horizontal, from left to right.

Based on that, when we assign flex to the parent tag, we will have a baseline with a horizontal direction and we can control the position of the child tag using the following 2 CSS properties:

• justify-content: move along the baseline.
• align-item: moves perpendicular to the baseline

Ngoài ra ta có thể thay đổi hướng đường cơ sở của flex bằng thuộc tính CSS là :

• flex-direction:
• row (default value): defines the baseline horizontally, from left to right.
• row-reverse: defines the baseline horizontally, from right to left.
• column: determines that the baseline is vertical, from top to bottom.
• column-reverse: defines the baseline vertically, from bottom to top.

Changing the direction of the baseline will lead to specific consequences for the child tags, for example:

• Baseline is horizontal (row):
• Tag con bị giới hạn chiều ngang (witdh) bằng với chiều ngang nội dung
• The height of the child tag is equal to the parent tag.
• Baseline is vertical (column)
• Tag con bị giới hạn chiều cao (height) bằng với chiều cao nội dung.
• The width of the child tag is equal to the parent tag

Move the box horizontally

Based on the above knowledge, when reviewing flex, we will try to move the div tag with the class 'box' horizontally through the following steps:

1. Assign flex to the parent tag to control the child tag
2. Use justify-content on the parent tag to control the child tag horizontally

Hãy xem ví dụ sau đây:

HTML

<section class="item2">
  <div class="box">
    <span>Nội dung</span>
    <p>Nội dung 2</p>
  </div>
</section>

Step 1: Assign flex to the parent tag

CSS

.item{
  background-color: lightseagreen;
  padding: 10px;
  height:150px;
  display: flex; /*new*/
}

.item .box{
  background: coral;
}

Result

Through step 1, after the parent tag is set to flex, the width of the child tag is limited and the height is the same as the parent tag.

Step 2: Use justify-content to control the child tag in the direction of the baseline.

CSS

.item{
  background-color: lightseagreen;
  padding: 10px;
  height:150px;
  display: flex;
  justify-content : center; /*new*/
}

.item .box{
  background: coral;
}

Kết quả

In step 2, by setting justify-content to center, we have successfully centered the child tag horizontally.

Move the box vertically

Along with the above example, if we need to move the box vertically, we simply use the CSS property align-items with 3 values set to flext-start, center, and flex-end similar to justify-content.

Tham khảo ví dụ sau :

CSS

.item{
  background-color: lightseagreen;
  padding: 10px;
  height:150px;
  display: flex;
  justify-content : center;
  align-items: center; /*new*/
}

.item .box{
  background: coral;
}

Kết quả

In the above example, by setting align-items to center, we have successfully centered the box vertically on the screen. In addition, setting align-items cancels the special height of the box (height must be equal to the parent tag) when affected by flex, instead, the height of the box will only cover its own content.

Conclusion

This is a very simple box movement structure but is widely applied in practice. With proficiency and good mindset, you can solve many UIs in practice. Learn and don't miss this content.