Một vài thủ thuật làm việc với các dạng layout – Phần 1

Tram Ho

Chào mọi người, hôm nay mình sẽ làm một số ví dụ về layout mà chúng ta thường gặp.

Anh em Backend thường nói “làm ép e dễ mà, chỉ cần nhớ mấy cái thẻ HTML với thuộc tính CSS bỏ vào là xong chứ gì…” à mà câu đó là của mấy bạn mới ra trường thôi, chứ mấy anh Dev từng trải không ai nói vậy. Nếu bạn là một Frontend Developer, những task liên quan đến Markup UI chắc hẳn chúng ta đã từng trải qua nhiều dạng layout, đặc biệt là xây dựng landing page hay web tương tác user. Những website như vậy mình rất hứng thú vì giao diện bắt mắt, hiệu ứng bay nhảy làm mình cũng vui hơn thay vì làm việc với những layout table dữ liệu nhàm chán. Tuy nhiên với những layout đẹp nó lại có độ phức tạp cao trong việc xây dựng và maintain, vì vậy việc đưa ra ý tưởng xây dựng trước khi code là một điều cần thiết.

Bài viết này hoặc có thể những bài sau sau sẽ là một chuỗi series chia sẻ về những dạng layout thường gặp.

1. Layout multi row với flex

Thông thường, flex được biết đến để dựng layout khi nó là hàng hoặc cột. Với trường hợp có nhiều item trên 1 row, để giãn các phần tử đều nhau và bám 2 bên bạn sẽ dùng justify-content: space-between. Tuy nhiên, cách này sẽ có nhược điểm không dùng cho trường hợp nhiều row được. Để mình cho bạn xem ví dụ nhé.


Trường hợp row có một item trống sẽ xảy ra tình trạng trên. Vì vậy mình sẽ dùng thủ thuật sau để dàn layout để có thể dãn đều các item mà vừa dùng cho nhiều row.

Ý tưởng thực hiện:

  • List bọc các item bằng flex
  • Ví dụ này mình sẽ cho 3 item trên 1 row. Mỗi item có width - 10px => 3(item) * 10px = 30px sẽ trống ra 30px khoảng cách.
  • Trừ item cuối ra, thì mỗi item trước đó (ở đây là 2 item) của 1 row sẽ có margin-right = 30px / 2 = 15px.

Khá đơn giản, bạn cũng có thể áp dụng nó cho số lượng item trên 1 row nhiều hơn. Bạn cũng có thể xem demo ở đây:
https://codepen.io/nguyenhuukhuyenudn/details/WNvzoGv

2. Layout change position avatar responsive

Một dạng layout nữa, đó là kiểu layout khi ở trên PC sẽ hiển thị thành 2 cột, một bên là avatar còn một bên là content. Khi responsive về màn hình nhỏ hơn thì avatar sẽ lọt vào giữa titledesciption. Để dễ hình dung, bạn có thể xem hình mình demo bên dưới.

Ý tưởng thực hiện:

  • Ban đầu cấu trúc html giống như hình ở mobile, theo thứ tự title > avatar > content > button
  • Padding trái của wrapper sẽ bằng hoặc lớn hơn size avatar để giữ chỗ cho avatar
  • Avatar sẽ để position: absolute khi đó sẽ không còn chiếm height nữa
  • Style vị trí của avatar phù hợp với design
  • Về responsive:
  • Avatar sẽ thành position: relative lúc này size avatar sẽ trở lại như bình thường
  • CSS lại size của avatar auto với wrapper

Bạn có thể xem phần demo ở đây: https://codepen.io/nguyenhuukhuyenudn/details/KKpoaPv

Tổng kết

Trên đây là 2 dạng layout mình thường làm. Ngoài cách mình chia sẻ nếu bạn có cách tối ưu hơn hãy chia sẻ bên dưới nhé. Hãy tiếp tục đón xem phần sau, mình sẽ cùng mọi người xử lý thêm một vài kiểu layout thú vị khác nữa.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo