Giới thiệu

Đây là một vấn đề thường xuyên gặp phải của các bạn mới tham gia lập trình Frontend, vậy nên các bạn hãy tham khảo kỹ nội dung dưới đây để nắm chắc những kỹ thuật đầu tiên này nhé.

Bản chất của <tag/>

Tag thường xuyên được vận hành dưới 2 dạng cơ bản là:

• Tag Inline : cho phép các tag khác nằm chung hàng
• Tag Block : chiếm nguyên hàng.

Tag về bản chất sẽ ưu tiên hiển thị theo chiều ngang, và nếu chúng ta muốn chuyển đổi cách hiển thị của nó, ta cần phải làm rõ nội dung sau đây.

<div> dạng hàng

Nhưng theo kiến thức ta học, tag div là dạng tag block và thường xuyên được sử dụng để đóng gói nội dung. Hãy tham khảo ví dụ sau:

Giả sử ta có 1 div cha chứa 2 div con, ta sẽ có được giao diện như sau:

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;
}

Kết quả

Qua ví dụ trên, ta có thể thấy 2 div con chiếm nguyên hàng và không thể nằm cạnh nhau, nếu ta trình bày nội dung trong 2 div con theo chiều từ trên xuống dưới, mọi thứ sẽ rất hoàn hảo và không gặp khó khăn gì.

<div> dạng cột

Tại đây, ta phát sinh ra một vấn đề mới, sẽ ra sao khi ta cần đóng gói 2 bộ nội dung theo chiều ngang, trong trường hợp này là div con 1 nằm bên trái, div con 2 nằm bên phải. Ta sẽ gặp trở ngại vì bản chất tag div là block và sẽ chiếm nguyên hàng.

Cách dễ dàng nhất để giải quyết vấn đề này, chính là sử dụng tính năng đặc biệt của CSS flex, một công cụ giúp ta định dạng lại bản chất của các tag con, đồng thời cũng là công cụ hữu hiệu để thực hiện responsive giao diện sau này. Hãy tham khảo cách giải quyết sau đây:

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;
}

Kết quả

Qua ví dụ trên, sau comment lại nội dung và thiết lập css flex cho div cha, nội dung con nằm bên trong div cha sẽ được trình bày lại theo chiều ngang từ trái sang phải, div con 1 sẽ được hiển thị đầu tiên, kế đến sẽ là div con 2.

Vậy để hiển thị được 2 cột nằm ngang, giả sử chiều ngang chiếm 100% kích thước màn hình, thì ta sẽ thiết lập 2 tag div con có kích thước là 50% để 2 tag div con có thể phủ trọn vẹn màn hình theo chiều ngang. Theo dõi ví dụ dưới đây :

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*/
}

Kết quả

Qua ví dụ trên ta có thể thấy được với sự vận hành của flex, và với việc thiết lập chiều ngang của cột div con là 50%, ta đã thành công trong việc hiển thị tag div theo chiều ngang từ trái qua phải, thay vì hiển thị từ trên xuống dưới.