Home / Tài liệu CNTT / CSS-CSS3 / Css responsive đổi vị trí các phần tử Flex Order

Css responsive đổi vị trí các phần tử Flex Order

Trong xử lý responsive, chúng ta rất dễ gặp trường hợp các thành phần thay đổi vị trí khi chuyển từ giao diện màn hình lớn sang giao diện có màn hình nhỏ, nếu như trước đây ta cần sự can thiệp của Javascript, thì giờ đây, thuộc tính order sẽ giúp giải quyết vẫn đề này đơn giản, tiện lợi hơn nhiều.

Thuộc tính order sẽ đi kèm với thuộc tính display: flex, có cấu trúc sau:

HTML viết:

Cấu trúc CSS:

Với cách xử lý như trên, ta đã thay đổi vị trí của các block so với ban đầu.

Ví dụ đơn giản sử dụng Flex – Order

Tạo các block theo thứ tự A, B, C, D với display: flex đơn giản sau:

HTML viết:

 

CSS viết:

Hiển thị trình duyệt:

Để sắp xếp lại thứ tự các block trên, ta sử dụng thuộc tính order như sau.

CSS viết lại như sau:

Hiển thị trình duyệt sau khi đã có order:

Nhìn vào kết quả trên, ta thấy vị trí các block đã thay đổi thành B, D, A, C.

Xử lý responsive với Flex – Order

Thông thường việc xử lý responsive ta dễ bắt gặp trường hợp sắp xếp lại vị trí cho phù hợp với màn hình nhỏ, giả sự yêu cầu đặt ra là khi màn hình nhỏ thì các block sẽ sắp xếp theo chiều dọc, với các vị trí thay đổi. Dựa theo ví dụ trên, ta viết lại như sau:

CSS viết

  • flex-direction: column: Với màn hình từ 600px trở xuống, ta xử lý cho các block hiển thị theo chiều dọc.
  • width: 50%: Ở màn hình nhỏ hơn 600px, lớn hơn 480px ta điều chỉnh chiều rộng các block thành 50%.
  • width: 100%: Ở màn hình nhỏ hơn 480px ta điều chỉnh chiều rộng các block thành 100%.
  • Với việc sử dụng các order như trên, ta đã sắp xếp lại thứ tự các block như mong muốn.

Ta được kết quả sau: