Giới thiệu

Khi làm việc với Web, rất nhiều các bạn học viên đặt câu hỏi là:s

Làm sào để kiểm soát một khối giao diện trên màn hình?

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é.

Khối nội dung

Trước khi ta kiểm soát một nội dung bất kỳ, việc đâu tiên ta phải đóng gói tất cả nội dung vào một khối bằng cách sử dụng div. Tham khảo ví dụ sau:

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ả

Trong ví dụ trên, ta có thể dễ dàng nhận ra, các tag nội dung đang được tổ chức rời rạc, việc đưa chúng ra giữa giao diện rất khó khăn.

Vậy nên việc đầu tiên, ta sẽ đóng gói chúng lại trong tag div trước để dễ dàng quản lý chúng hơn. Hãy theo dõi tiếp tục ví dụ sau:

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

Kết quả

Qua ví dụ trên, giờ đây thay vì ta phải quản lý vị trí của cả tag span lẫn tag p, chúng ta chỉ cần kiểm soát vị trí của tag div có class là box.

Đường cơ sở của flex

Khi ta khởi tạo flex cho tag cha, flex sẽ hiển thị các tag con theo các hướng và chiều rất đa dạng, mặc định sẽ là hướng nằm ngang, chiều từ trái sang phải.

Dựa vào đó, khi ta gán flex cho tag cha, ta sẽ có được đường cơ sở có hướng nằm ngang và ta có thể điều khiển vị trí của tag con theo 2 thuộc tính CSS sau :

• justify-content : di chuyển theo đường cơ sở.
• align-item : di chuyển theo hướng vuông góc với đường cơ sở

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 (giá trị mặc định) : qui định đường cơ sở nằm ngang, chiều từ trái sang phải.
• row-reverse : qui định đường cơ sở nằm ngang, chiều từ phải sang trái.
• column : qui định đường cơ sở nằm dọc, chiều từ trên xuống dưới
• column-reverse : qui định đường cơ sở nằm dọc, chiều từ dưới lên trên.

Việc thay đổi hướng của đường cơ sở sẽ dẫn tới các hệ quả riêng cho tag con, ví dụ như:

• Đường cơ sở nằm ngang (row):
• Tag con bị giới hạn chiều ngang (witdh) bằng với chiều ngang nội dung
• Chiều cao tag con bằng với tag cha.
• Đường cơ sở nằm dọc (column)
• Tag con bị giới hạn chiều cao (height) bằng với chiều cao nội dung.
• Chiều ngang tag con bằng với tag cha

Di chuyển box theo chiều ngang

Dựa vào kiến thức trên khi ta ôn tập về flex, ta sẽ thử di chuyển tag div có class là box theo chiều ngang thông qua các bước sau:

1. Gán flex cho tag cha, để dùng tag cha điều khiển tag con
2. Sử dụng justify-content vào tag cha để điều khiển tag con theo chiều ngang

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>

Bước 1: Gán flex cho tag cha

CSS

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

.item .box{
  background: coral;
}

Kết quả

Thông qua bước 1, sau khi tag cha được thiết lập flex, chiều ngang tag con đã bị giới hạn lại và chiều cao bằng với tag cha

Bước 2: Sử dụng justify-content để điều khiển tag con theo hướng đường cơ sở nằm ngang.

CSS

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

.item .box{
  background: coral;
}

Kết quả

Qua bước 2, bằng việc thiết lập justify-content có giá trị là center, ta đã thành công mang tag con ra giữa theo chiều ngang.

Di chuyển box theo chiều dọc

Cùng với ví dụ trên, nếu ta cần di chuyển box theo chiều dọc, ta đơn giản chỉ cần sử dụng thuộc tính CSS align-items với 3 giá trị thiết lập flext-start, center và flex-end tương tự như 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ả

Qua ví dụ trên, với việc thiết lập aligh-items là center, ta đã thành công di duyển box ra giữa màn hình theo chiều dọc. Ngoài ra, việc thiết lập align-items đã huỷ bỏ trạng thái chiều cao đặc biệt của box (chiều cao phải bằng tag cha) khi bị ảnh hưởng bởi flex, thay vì đó, chiều cao của box sẽ chỉ phủ nội dung của chính nó.

Kết luận

Đây là cấu trúc di chuyển box rất đơn giản nhưng được áp dụng rất nhiều trong thực tế, với việc thành thục và hình thành mindset tốt, các bạn đã có thể giải quyết rất nhiều UI trong thực tế. Hãy học và đừng bỏ lỡ nội dung này nhé.